使用 jQuery 播放/暂停 mp4 视频 [重复]答案

【问题标题】：Play/Pause mp4 video using jQuery [duplicate]使用 jQuery 播放/暂停 mp4 视频 [重复]
【发布时间】：2018-04-17 16:35:36
【问题描述】：

我想添加按钮，或者只是使视频支架可点击，以播放/暂停网页启动时自动播放的视频。

已在 Stack 上查看过此问题，但无法将其拼凑到适合我的 jQuery 中。

任何帮助将不胜感激！谢谢

jQuery

$(document).ready(function(){
    $('#videoholder').append(
        '<video width="600px" autoplay>' + 
            '<source src="Images/event-video.mp4" type="video/mp4"></source>' +
        '</video>');

});

HTML

<div id="videoholder"></div>

【问题讨论】：

标签： jquery html video

【解决方案1】：

对于播放和暂停，你可以从jQuery集合中获取普通的DOM元素，在.paused查看播放状态后在视频上使用.play()和.pause()：

$(document).ready(function(){
    var theVideo = $('<video width="600px" autoplay>' + 
            '<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></source>' +
        '</video>'),
    	videoHolder = $('#videoholder');
    videoHolder.append(theVideo);

    videoHolder.on("click", function() {
      var videoEl = theVideo[0];
      if (videoEl.paused) {
        videoEl.play();
      } else {
        videoEl.pause();
      }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="videoholder"></div>

【讨论】：

【解决方案2】：

此 Jquery 代码使 vedeoholder 在点击时在播放/暂停之间切换：

$(document).ready(function() {
    $('#videoholder').click(function() {
        var video=$(this).children("video")[0];
        video.paused ? video.play() : video.pause();
    });
});

【讨论】：