当滚动开始时暂停html5视频

pause html5 video when scrolling starts

本文关键字：html5 视频 暂停 开始时 滚动      更新时间：2023-09-26

我最近在我自己的公司网站上添加了一个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();

试试这个代码

 $(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");
            }
        });
    });

如果您想要实现的是在用户向左滚动时隐藏和暂停视频，这里有一个来自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(){
  $('#frontvideo')[0].play();
});
$(document).on("scroll",function(){
  if($(document).scrollLeft()>1){      
     $('#frontvideo')[0].pause();
   }
   else
   {
     $('#frontvideo')[0].play();
   }
});
相关文章：