jquery - 切换视频点击

Question

单击以将视频换成另一个自动播放和循环播放的视频时，我试图获得一个按钮。

真的无法解决这个问题，任何帮助都会很棒！

这是我的代码，

 <div data-role="page">

    <div data-role="header">
        <h1>Live Fire</h1>
    </div><!-- /header -->

    <div data-role="content">
        <button>Clicky</button>
        <br>
        <video id="container" width="600" height="400" src="video/1.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video>

    </div><!-- /content    -->

    <div data-role="footer" data-position="fixed" class="ui-bar">
    <a href="#" data-icon="plus">Add</a>

</div>
</div><!-- /page -->
<script>
    $('button').on('click', function () {
    var $el = $(this).data('toggle') ? '<video id="container" width="600" height="400" src="video/1.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video>' : '<video id="container" width="600" height="400" src="video/3.mp4" type="video/mp4" autoplay="autoplay" loop="loop"></video>';
    $(this).data('toggle', !$(this).data('toggle'));
    $('#container').html($el);
});
    </script>
</body>

Answer 1

toggle()在 jQuery 1.9 之后不再像您想象的那样工作，它已被动画方法取代。

这是使用 jQuery 1.9.1 的一种方法：

$('button').on('click', function () {
    var $el = $(this).data('toggle') ? VIDEO_1 : VIDEO_2;
    $(this).data('toggle', !$(this).data('toggle'));
    $('#container').html($el);
});

小提琴