[英]pause html5 video when scrolling starts
我最近在自己的公司网站上添加了html5视频。 imbeeld.nl
现在,我希望视频在人们开始滚动页面时暂停播放。
我知道可以通过添加一些JS来完成,但是我对此很陌生。
document.getElementById('myvideotag').pause();
当滚动开始时,我已经准备好一些脚本来替换视频的CSS类:
$(document).on("scroll",function(){
if($(document).scrollLeft()>1)
{$("#frontvideo").removeClass("front_cover").addClass("front_cover_hide");}
else{$("#frontvideo").removeClass("front_cover_hide").addClass("front_cover");}
});
滚动开始时,如何结合两个JS部分并暂停视频?
谢谢!
仅仅将其组合起来会有什么问题? 如果您不想在任何滚动条上暂停视频:
$(document).on("scroll",function(){
document.getElementById('myvideotag').pause();
if($(document).scrollLeft()>1{
$("#frontvideo").removeClass("front_cover").addClass("front_cover_hide");
}
else{
$("#frontvideo").removeClass("front_cover_hide").addClass("front_cover");
}
});
你可以通过变量定义
喜欢
var video = document.getElementById("myvideotag");
然后您就可以像滚动开始时一样暂停
video.pause();
如果要实现的目的是在用户向左滚动时隐藏并暂停视频,则此处有一个片段,其中包含来自wikimedia的视频示例。
顺便说一句,您可以使用$('#myvideotag')[0]
从jQuery对象中提取DOM对象。
$(document).ready(function(){ $('#myvideotag')[0].play(); }); $(document).on("scroll",function(){ if($(document).scrollLeft()>1) { $("#frontvideo").removeClass("front_cover").addClass("front_cover_hide"); $('#myvideotag')[0].pause(); } else { $("#frontvideo").removeClass("front_cover_hide").addClass("front_cover"); $('#myvideotag')[0].play(); } });
html, body { width: 110%; height: 100%; } #frontvideo { position: absolute; top: 0; height: 0; width: 110%; height: 100%; background: white; text-align: center; padding-top: 100px; } .front_cover { opacity: 0; } .front_cover_hide { opacity: 0.9; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video id="myvideotag" width="400" controls> <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/4/4d/Wikipedia_Edit_2014.webm/Wikipedia_Edit_2014.webm.480p.webm" type="video/mp4"> Your browser does not support HTML5 video. </video> <div id="frontvideo" class="front_cover">I'M THE COVER</div>
希望能帮助到你!
试试这个代码
$(document).ready(function(){
$(document).on("scroll",function(){
var sc = $("body").prop('scrollLeft')
var scv= $("#myvideotag").offset().Left;
if(scv < sc)
{
$("#frontvideo").removeClass("front_cover").addClass("front_cover_hide");
}
else{
$("#frontvideo").removeClass("front_cover_hide").addClass("front_cover");
}
});
});
有用! 这可以解决问题:对不起布局不好
$(document).ready(function(){
$('#frontvideo')[0].play();
});
$(document).on("scroll",function(){
if($(document).scrollLeft()>1){
$('#frontvideo')[0].pause();
}
else
{
$('#frontvideo')[0].play();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.