如何解决如何淡入和淡出视频中添加的控件,如默认控件
我向页面上的视频添加了一些控件,例如倒带或重新加载,但我希望这些添加的控件像视频的默认控件一样通过移动鼠标(淡入)并在 2 秒后停止移动(淡出)来淡入/淡出.
var videoMov = document.getElementById("video1");
videoMov.onmousemove = function () {
if (videoMov.currentTime > 0 && !videoMov.paused && !videoMov.ended && videoMov.readyState > 2) {
let timeout;
clearTimeout(timeout);
timeout = setTimeout(function () {
$(".reload-video").fadeOut("slow");
},2000);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<video id="video1" muted class="col-12 video-tut" height="720" controls controlsList=" " poster="./images/6.jpg">
<source src="./video/1.mkv#t=15,120">
</video>
解决方法
测试了几种方法后我找到了答案。
let sit = 0;
let timeout;
var videoMov = document.getElementById("video1");
videoMov.onmousemove = function () {
if (videoMov.currentTime > 0 && !videoMov.paused && !videoMov.ended && videoMov.readyState > 2) {
if (sit === 1) {
$(".reload-video").css("display","inline");
$(".rewind-video").css("display","inline");
}
clearTimeout(timeout);
timeout = setTimeout(function () {
if(!videoMov.paused){
$(".reload-video").fadeOut();
$(".rewind-video").fadeOut();
sit = 1;
}else{
$(".reload-video").css("display","inline");
}
},2500);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。