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

Posted 2023-03-05

【中文标题】使用 JQuery 播放/暂停 HTML 5 视频

【英文标题】：Play/pause HTML 5 video using JQuery

【发布时间】：2011-06-06 12:41:38

【问题描述】：

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

这一定是一件简单的事情，但我似乎无法让它工作，我用来播放视频的代码是：

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

我读到视频元素需要在函数中公开才能控制它，但找不到示例。我可以使用 JS 使其工作：

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

任何建议都会很棒。谢谢

【参考方案1】：

在这里@ToolmakerSteve 找到了答案，但必须以这种方式进行微调： 全部暂停

$('video').each(function(index)
    $(this).get(0).pause();
);

或全部播放

$('video').each(function(index)
    $(this).get(0).play();
);

【参考方案2】：

var vid = document.getElementById("myVideo"); 
function playVid()  
  vid.play(); 
 
function pauseVid()  
  vid.pause(); 
 

<video id="myVideo"  >
  <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> 

【讨论】：

您的答案中的解决方案似乎不起作用

【参考方案3】：

    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    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。在回答已经有很多答案的问题时，请务必添加一些额外的见解，说明为什么您提供的回复是实质性的，而不是简单地呼应原始发帖人已经审查过的内容。这在您提供的“纯代码”答案中尤其重要。

【参考方案4】：

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

关于jquery按钮点击功能

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

谢谢

【参考方案5】：

<video style="min-width: 100%; min-height: 100%; " id="vid"   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> 

【讨论】：

请为您的答案添加一些解释

【参考方案6】：

通过 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');

通过 javascript 使用 ID

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

或

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

【参考方案7】：

你可以的

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

【讨论】：

你甚至可以切换： $('video').trigger( $('video').prop('paused') ? 'play' : 'pause');

【参考方案8】：

这就是我设法使它工作的方法：

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

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

【讨论】：

请注意，不需要在 jQuery 中进行包装，因此您可以通过将三元行替换为以下内容来节省开销：this.paused ? this.play() : this.pause();

【参考方案9】：

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

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

【讨论】：

如果您坚持使用 jQuery 实现，请查看 lonesomeday 的解决方案（同时解释为什么您不能只在 jQuery 对象上调用 play）。

我在想我会使用其他 jQuery 中的代码，并且可能会这样做，但就目前而言，我只是使用该行，所以我想它可以用我拥有的代码完成。 ..我也不确定这是否是混合的好习惯。无论如何感谢您的建议。

如果您已经为movie1 到$('movie1') 为其他jQuery 操作实例化了一个jQuery 对象，那很好；然而，如果你只是在这个地方做，你会发现一些性能损失。它可能不够明显，但我喜欢优化很多。

@sudowork - 认真的吗？您正在讨论开始播放视频时的性能损失？如果您的设备足够快地播放视频，那么它的速度足以在不引起用户注意的情况下执行一桶 jQuery 操作。

【参考方案10】：

@loneSomeday 解释得很漂亮，这里有一个解决方案，它也可以让你很好地了解如何实现播放/暂停功能

play/pause of video on click

【参考方案11】：

我喜欢这个：

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

希望对你有帮助。

【参考方案12】：

对于暂停多个视频，我发现这很好用：

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

这可以放入一个点击函数中，非常方便。

【讨论】：

你可以这样做： $("video").each(function() this.pause() );

$(this) -> 你从“this”对象创建 jquery 对象。 get(0) -> 你从 jquery 对象中取回原来的“this”对象... this === $(this).get(0)

【参考方案13】：

我也让它像这样工作：

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

【参考方案14】：

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

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

这将防止不支持视频标签的浏览器出现 JavaScript 错误。

【参考方案15】：

作为lonesomeday's answer的扩展，你也可以使用

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

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

【参考方案16】：

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

也许不是最好的解决方案可以以不同的方式切换播放/暂停 - 但对我来说很容易而且它可以工作！ :)

在

`

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

【参考方案17】：

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

【讨论】：

“我正在尝试让视频剪辑在其标签被点击时播放”——因此需要事件控制处理。

【参考方案18】：

您的解决方案在这里显示了问题——play 不是 jQuery 函数，而是 DOM 元素的函数。因此，您需要在 DOM 元素上调用它。您将举例说明如何使用本机 DOM 函数执行此操作。 jQuery 等价物——如果你想这样做以适应现有的 jQuery 选择——将是$('#videoId').get(0).play()。 （get 从 jQuery 选择中获取原生 DOM 元素。）

【讨论】：

太棒了，完美运行，非常感谢。更好地理解 DOM 也很好。

这样使用JQuery来控制视频似乎会导致在iPhone上播放出现问题。我在选项卡中有视频元素，jquery 显示了这一点，但是单击视频开始箭头不会启动剪辑。当我删除 $('#videoId').get(0).play() 行时没有问题。解决这个问题的最佳方法是什么？我在想我可以删除带有 ios 条件语句的 js - 无论如何，视频不会为 iOS 设备自动启动，所以很乐意这样做 - 还是有更简单的解决方案？非常感谢任何帮助。

我怎样才能暂停页面上的所有

@russellsayshi - 不，它只会播放一个视频； prismspecs 要求提供所有视频。正确语法：$('video').each(this.play()); 全部播放； $('video').each(this.pause()); 暂停所有。 each() 是一个 jQuery 函数，传入它的是一个 javascript 函数，应用于每个元素。在处理每个元素时，this 代表该元素。

如果只想要第一个元素，可以通过将.get(0)替换为[0]来简化。所以$('video')[0].play(); 或特定的ID $('#videoId')[0].play();。