gpt4 book ai didi

javascript - Html5 视频播放器在自动播放时必须按暂停两次

转载 作者:太空宇宙 更新时间:2023-11-04 02:43:58 24 4
gpt4 key购买 nike

我正在使用此代码笔中的代码 http://codepen.io/frytyler/pen/juGfk为我的视频播放器制作自定义控件效果很好,除非我将视频设置为“自动播放”,如下面的代码所示。它播放视频,但我必须按两次暂停才能暂停它,我该如何修改代码来解决这个问题?

<video id="myVideo" autoplay controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >

最佳答案

http://codepen.io/anon/pen/PZwxed

这是屏幕的快速解决方案,在 dom.ready() 内的 js 的最后一行添加此代码段。

     //doubleclick
$('#myVideo').click(function () {
if ($("#myVideo").get(0).paused) {
$("#myVideo").get(0).play();
}
});

$('#myVideo').dblclick(function () {


$("#myVideo").get(0).pause();

});

有一个问题,当您在屏幕中点击两次后点击按钮时,播放/暂停按钮可能会表现得很奇怪,您需要分配播放/暂停按钮类才能正确显示,或者隐藏此按钮看起来最好。

编辑:您可以在以下代码中操作播放/暂停按钮:

var vid = document.getElementById("myVideo");
vid.onplaying = function() {
//call when video is playing, it should show pause icon in button like .addClass and .removeClass
};
vid.onpause = function() {
//call when video is paused, it should show play icon in button like .addClass and .removeClass
};

关于javascript - Html5 视频播放器在自动播放时必须按暂停两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34163922/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com