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

Posted 2023-05-07

【中文标题】使用 jQuery 播放/暂停 mp4 视频 [重复]

【英文标题】：Play/Pause mp4 video using jQuery [duplicate]

【发布时间】：2018-04-17 16:35:36

【问题描述】：

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

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

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

jQuery

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

);

html

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

【参考方案1】：

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

$(document).ready(function()
    var theVideo = $('<video  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();
    );
);