调整html5视频触发暂停事件的时间线
调整html5视频触发暂停事件的时间线
提问于 2022-09-22 09:04:38
当视频暂停时，我试图隐藏它，但是当您移动视频播放器上的时间线时，暂停事件也会被触发。是否可以在不触发暂停事件的情况下调整视频时间线？
var singleVideo = document.getElementById('single-video');
$(singleVideo).get(0).addEventListener('pause', function(){
$('#singleVideo').hide();
});回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-22 13:27:32
单击时间线后，视频暂停几秒钟并继续播放。
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>Play and pause the video</p>
<video id="single-video" height="200" controls="controls" preload="none" onpause="myFunction()">
<source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Under_forvandlingens_lov_%281911%29.webm">
</video>
</body> 一件棘手的事情就是添加异步函数并等待片刻以获得视频暂停状态。
JS
async function getStatus(singleVideo) {
return new Promise(resolve => {
setTimeout(() => {
resolve(singleVideo);
}, 1000);
});
}
function myFunction() {
var singleVideo = document.getElementById('single-video');
//Get status
getStatus(singleVideo).then(video => {
if(video.paused){
console.log("Stream pause");
$(singleVideo).hide();
}else{
console.log("Stream not pause, Just drag/click timeline");
}
});
}Stack Overflow用户
发布于 2022-09-22 16:54:45
“
”能够在不触发暂停事件的情况下调整视频时间线吗？
不是的。这是浏览器工作的标准过程。
“当视频暂停时，我试图隐藏它，但是当你移动视频播放器上的时间线时，暂停事件也会被触发。
您需要创建自己的自定义控件。这样，您自己的暂停按钮的功能将隐藏视频，而擦拭时间线本身只会控制寻找。
如果您选择使用浏览器的内置控件，那么您将不得不创造性地思考。
例如:在使用时间线时，pause事件后面跟着一个seeking事件，因此在pause事件期间只需要为seeking事件设置一个临时侦听器。这样的“寻找”会让你知道视频不只是暂停，它应该保持可见。没有任何额外的“寻找”事件，你可以假设视频是真正的paused.
这个概念的一个例子是：
<!DOCTYPE html>
<html>
<body>
<video id="single-video" width="640" height="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var singleVideo = document.getElementById('single-video');
singleVideo.addEventListener("seeking", mySeek);
singleVideo.addEventListener("playing", myPlaying);
singleVideo.addEventListener("pause", myPause);
//# Your main Seek handler function (if needed)
function mySeek()
{
/* if you have custom code for during Seek events */
//alert("you did seeking..."); singleVideo.play();
}
//# During playback keep video visible
function myPlaying() { singleVideo.style.opacity="1"; }
//# Pause function also checks if a Seek event happens during Pause event
//# eg: Hide video but IF a Seek also happens during, then keep video visible
function myPause()
{
singleVideo.style.opacity="0.1"; //# hide here...
//# add temporary new Seek handler function (has alternate instructions)
singleVideo.addEventListener("seeking", mySeekInPaused);
//# force video visiblity & re-add main Seek handler function
function mySeekInPaused()
{
singleVideo.style.opacity="1"; //# keep visible
singleVideo.removeEventListener("seeking", mySeekInPaused); //# not needed now
}
}
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73811969
复制相关文章
相似问题
腾讯云开发者
