使用JQuery播放/暂停HTML 5video
我正在尝试使用JQuery控制HTML5video。 我在标签界面中有两个剪辑，总共有六个标签，其他标签只有图像。 我试图让video剪辑在他们的标签被点击时播放，然后当其他人被点击时停止。
这一定是一件简单的事情，但我似乎无法得到它的工作，我用来播放video的代码是：
$('#playMovie1').click(function(){ $('#movie1').play(); }); 我已经读过video元素需要被暴露在一个函数中，以便能够控制它，但无法find一个例子。 我能够使用JS工作：
document.getElementById('movie1').play();
任何build议将是伟大的。 谢谢
你的解决scheme在这里显示的问题 – play不是一个jQuery函数，而是一个DOM元素的函数。 因此，您需要在DOM元素上调用它。 你举一个如何使用本地DOMfunction来做这个例子。 jQuery的等价物 – 如果你想这样做以适应现有的jQueryselect – 将是$('#videoId').get(0).play() 。 （ get jQueryselect中的本地DOM元素。）
这是我设法使它工作的方式：
jQuery( document ).ready(function($) { $('.myHTMLvideo').click(function() { this.paused ? this.play() : this.pause(); }); });
我所有的HTML5标签都有“myHTMLvideo”类
为什么你需要使用jQuery？ 你提出的解决scheme的工作，它可能比构build一个jQuery对象更快。
document.getElementById('videoId').play();
暂停多个video，我发现这很好地工作：
$("video").each(function(){ $(this).get(0).pause(); });
这可以放入一个非常方便的点击function。
你可以做
$('video').trigger('play'); $('video').trigger('pause');
作为寂寞日子答案的延伸，你也可以使用
$('#playMovie1').click(function(){ $('#movie1')[0].play(); });
请注意，没有调用get（）或eq（）jQuery函数。 用来调用play（）函数的DOM数组。 记住这是一条捷径。
我喜欢这一个：
$('video').click(function(){ this[this.paused ? 'play' : 'pause'](); });
希望能帮助到你。
我使用FancyBox和jQuery来embeddedvideo。 给它一个ID。
也许不是最好的解决scheme可以切换播放/暂停不同 – 但容易对我和它的作品！ 🙂
在里面
`
<input type="hidden" id="current_video_playing"> <input type="hidden" id="current_video_status" value="playing"> <video id="video-1523" autobuffer="false" src="movie.mp4"></video> <script> // Play Pause with spacebar $(document).keypress(function(e) { theVideo = document.getElementById('current_video_playing').value if (e.which == 32) { if (document.getElementById('current_video_status').value == 'playing') { document.getElementById(theVideo).pause(); document.getElementById('current_video_status').value = 'paused' } else { document.getElementById('current_video_status').value = 'playing' document.getElementById(theVideo).play(); } } }); </script>`
请注意，在尝试调用浏览器之前，请确保您检查浏览器是否支持videofunction：
if($('#movie1')[0].play) $('#movie1')[0].play();
这将防止不支持video标签的浏览器发生JavaScript错误。
使用这个.. $('#video1').attr({'autoplay':'true'});
我也做了这样的工作：
$(window).scroll(function() { if($(window).scrollTop() > 0) document.querySelector('#video').pause(); else document.querySelector('#video').play(); });
@lone有一天，我们对它进行了精美的解释，这里有一个解决scheme可以让你知道如何实现播放/暂停function
单击播放/暂停video
通过JQuery使用select器
$("video_selector").trigger('play'); $("video_selector").trigger('pause'); $("div.video:first").trigger('play');$("div.video:first").trigger('pause'); $("#video_ID").trigger('play');$("#video_ID").trigger('pause');
通过Javascript使用ID
video_ID.play(); video_ID.pause();
要么
document.getElementById('video_ID').play(); document.getElementById('video_ID').pause();
<video style="min-width: 100%; min-height: 100%; " id="vid" width="auto" height="auto" controls autoplay="true" loop="loop" preload="auto" muted="muted"> <source src="video/sample.mp4" type="video/mp4"> <source src="video/sample.ogg" type="video/ogg"> </video> <script> $(document).ready(function(){ document.getElementById('vid').play(); }); </script>
