使用JQuery播放/暂停HTML 5视频


206

我正在尝试使用JQuery控制HTML5视频。我在选项卡式界面中有两个剪辑,总共有六个选项卡,其他只是图像。我试图使视频剪辑在单击选项卡时播放,然后在单击其他任何一个时停止播放。

这一定是一件简单的事情,但我似乎无法正常工作,我用来播放视频的代码是:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

我已经读到video元素需要在一个函数中公开才能控制它,但找不到示例。我可以使用JS使其工作:

document.getElementById('movie1').play();

任何建议都很好。谢谢

Answers:


356

您的解决方案在这里显示了问题- play不是jQuery函数,而是DOM元素的函数。因此,您需要在DOM元素上调用它。您将举例说明如何使用本机DOM函数执行此操作。相当于jQuery的-如果您想做到与现有的jQuery选择相适应-将会是$('#videoId').get(0).play()。(get从jQuery选择中获取本机DOM元素。)


5
太好了,效果很好,的确如此。也很好理解DOM。
Barny83 2011年

1
以这种方式使用JQuery来控制视频似乎会导致iPhone上的播放出现问题。我在选项卡中有video元素,jQuery揭示了这一点,但是然后单击video start箭头不会启动剪辑。当我删除$('#videoId')。get(0).play()行时,没有问题。最好的办法是什么?我当时想我可以使用针对iOS的常规语句删除js-该视频无论如何都不会针对iOS设备自动启动,因此很乐意这样做-还是有一个更简单的解决方案?任何帮助,不胜感激。
Barny83年

我该如何暂停页面上的所有 <video>元素?
棱镜规格2012年

5
@russellsayshi-不,那只会播放一个视频;棱镜规格要求所有视频。正确语法: $('video').each(this.play());全部播放;$('video').each(this.pause());暂停全部。each()是一个jQuery函数,传递给它的是一个JavaScript函数,该函数应用于每个元素。处理每个元素时,this代表该元素。
制造商史蒂夫(Steve)2014年

11
如果只需要第一个元素,可以通过替换.get(0)为来简化[0]。因此$('video')[0].play();或针对特定ID $('#videoId')[0].play();
制造商史蒂夫(Steve)2014年

56

这是我设法使其工作的方式:

jQuery( document ).ready(function($) {
    $('.myHTMLvideo').click(function() {
        this.paused ? this.play() : this.pause();
    });
});

我所有的HTML5标签都有“ myHTMLvideo”类


7
请注意,没有必要使用jQuery换行,因此您可以通过以下方式替换三元行来节省开销:this.paused ? this.play() : this.pause();
Pete Watts 2014年

56

你可以做

$('video').trigger('play');
$('video').trigger('pause');

2
您甚至可以切换:$('video')。trigger($('video')。prop('paused')?'play':'pause');
达里奥PM

21

为什么需要使用jQuery?您提出的解决方案有效,并且可能比构造jQuery对象要快。

document.getElementById('videoId').play();

如果您坚持使用jQuery实现,请查看lonesomeday的解决方案(也可以解释为什么不能仅调用playjQuery对象)。
sudo工作

我当时以为我会在其他jQuery中使用该代码,也许会这样做,但是就目前情况而言,我只是在使用那条线,所以我想它可以用我拥有的代码来完成...我也不确定如果这是混合使用的好习惯。无论如何,谢谢您的建议。
Barny83 2011年

2
如果您已经实例化一个jQuery对象movie1通过$('movie1')其他jQuery的行动,那么它的罚款; 但是,如果仅在此位置执行此操作,则会发现一些性能损失。它可能不够明显,但是我想进行很多优化。
sudo工作

@sudowork-认真吗?您正在讨论开始播放视频时的性能下降?如果您的设备足够快来播放视频,那么它就足够快来执行大量的jQuery操作而无需用户注意。
制造商史蒂夫(Steve)2014年

19

对于暂停多个视频,我发现这很好用:

$("video").each(function(){
    $(this).get(0).pause();
});

可以将其放入非常方便的单击功能。


4
您可以像这样操作:$(“ video”)。each(function(){this.pause()});
Marcel M.

1
$(this)->您可以从“ this”对象创建jquery对象。get(0)->您从jquery对象取回原始的“ this”对象... this === $(this).get(0)
Blackfire

14

作为lonesomeday答案的扩展,您还可以使用

$('#playMovie1').click(function(){
    $('#movie1')[0].play();
});

请注意,没有调用get()或eq()jQuery函数。用于调用play()函数的DOM数组。这是要牢记的捷径。


12

我喜欢这一个:

$('video').click(function(){
    this[this.paused ? 'play' : 'pause']();
});

希望能帮助到你。


4

我使用FancyBox和jQuery嵌入视频。给它一个ID。

也许不是BEST的解决方案可以以不同的方式切换播放/暂停-但对我和它来说都很容易!:)

在里面

`

<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>`

3

这是我们可以使用的简单方法

在jQuery按钮上单击功能

$("#button").click(function(event){
    $('video').trigger('play');
    $('video').trigger('pause');
}

谢谢


1

请注意,在尝试调用它之前,请确保检查浏览器是否支持视频功能:

if($('#movie1')[0].play)
    $('#movie1')[0].play();

这样可以防止不支持视频标记的浏览器出现JavaScript错误。


1

通过使用选择器的jQuery

$("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');

使用ID使用Javascript

video_ID.play();  video_ID.pause();

要么

document.getElementById('video_ID').play();  document.getElementById('video_ID').pause();

0

用这个.. $('#video1').attr({'autoplay':'true'});


2
“我试图使视频剪辑在单击其选项卡时播放”-因此需要事件控制的处理。
davidenke 2015年

0

我还使它像这样工作:

$(window).scroll(function() {
    if($(window).scrollTop() > 0)
        document.querySelector('#video').pause();
    else
        document.querySelector('#video').play();
});


0
<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> 

请在回答中添加一些解释
Sahil Mittal

0
    enter code here
<form class="md-form" action="#">
  <div class="file-field">
    <div class="btn btn-primary btn-sm float-left">
      <span>Choose files</span>
      <input type="file" multiple>
    </div>
    <div class="file-path-wrapper">
      <input class="file-path validate" type="text" placeholder="Upload one or more files">
    </div>
  </div>
</form>

<video  width="320" height="240" id="keerthan"></video>

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button> 
<script>
    (function localFileVideoPlayer() {

  var playSelectedFile = function (event) {
    var file = this.files[0]
    var type = file.type
    var videoNode = document.querySelector('video')




    var fileURL = URL.createObjectURL(file)
    videoNode.src = fileURL
  }
  var inputNode = document.querySelector('input')
  inputNode.addEventListener('change', playSelectedFile, false)
})()
function playVid() { 
  keerthan.play(); 
} 

function pauseVid() { 
  keerthan.pause(); 
} 

</script>

嗨,欢迎来到Stack Overflow。在回答已经有很多答案的问题时,请确保对您提供的回答为何具有实质性,而不是简单地呼应原始张贴者已经审查过的内容,增加一些其他见解。在“仅代码”答案(例如您提供的答案)中,这一点尤其重要。
CHB

-1

var vid = document.getElementById("myVideo"); 
function playVid() { 
  vid.play(); 
} 
function pauseVid() { 
  vid.pause(); 
} 
<video id="myVideo" width="320" height="176">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 


您的答案中的解决方案似乎不起作用
Cray19年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.