Javascript 滚动开始时暂停html5视频

我最近在自己的公司网站上添加了一个html5视频。inbeeld.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");
    }
}); 

---

把它结合起来有什么问题？ 如果您不想在任何滚动上暂停视频：

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

---

您可以通过变量进行定义

像

然后你可以像滚动开始时那样暂停

video.pause();

---

您可以通过变量进行定义

像

然后你可以像滚动开始时那样暂停

video.pause();

---

如果您想在用户向左滚动时隐藏并暂停视频，这里有一个来自wikimedia的视频示例片段

顺便说一句，您可以使用

$（'#myvideotag'）[0]

从jQuery对象中提取DOM对象

$（文档）.ready（函数（）{
$（'#myvideotag'）[0]。播放（）；
});
$（文档）.on（“滚动”，函数（）{
if（$（文档）.scrollLeft（）>1）
{      
$（“#frontvideo”）.removeClass（“前封面”）.addClass（“前封面隐藏”）；
$（'#myvideotag'）[0]。暂停（）；
}
其他的
{
$（“#frontvideo”）.removeClass（“前#封面#隐藏”）.addClass（“前#封面”）；
$（'#myvideotag'）[0]。播放（）；
}
});
html，正文
{
宽度：110%；
身高：100%；
}
#frontvideo
{
位置：绝对位置；
排名：0；
身高：0；
宽度：110%；
身高：100%；
背景：白色；
文本对齐：居中；
填充顶部：100px；
}
.前盖
{
不透明度：0；
}
.前盖
{
不透明度：0.9；
}

您的浏览器不支持HTML5视频。
我是封面
如果你想在用户向左滚动时隐藏并暂停视频，这里有一个来自wikimedia的视频示例片段

顺便说一句，您可以使用
$（'#myvideotag'）[0]
从jQuery对象中提取DOM对象


$（文档）.ready（函数（）{
$（'#myvideotag'）[0]。播放（）；
});
$（文档）.on（“滚动”，函数（）{
if（$（文档）.scrollLeft（）>1）
{      
$（“#frontvideo”）.removeClass（“前封面”）.addClass（“前封面隐藏”）；
$（'#myvideotag'）[0]。暂停（）；
}
其他的
{
$（“#frontvideo”）.removeClass（“前#封面#隐藏”）.addClass（“前#封面”）；
$（'#myvideotag'）[0]。播放（）；
}
});
html，正文
{
宽度：110%；
身高：100%；
}
#frontvideo
{
位置：绝对位置；
排名：0；
身高：0；
宽度：110%；
身高：100%；
背景：白色；
文本对齐：居中；
填充顶部：100px；
}
.前盖
{
不透明度：0；
}
.前盖
{
不透明度：0.9；
}

您的浏览器不支持HTML5视频。
我是封面
试试这个代码

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

        });
    });

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，函数（）{
var sc=$（“body”）.prop（'scrollLeft'）
var scv=$（“#myvideotag”）.offset（）.左；
如果（scv
试试这段代码

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

        });
    });

$（文档）.ready（函数（）{
$（文档）.on（“滚动”，函数（）{
var sc=$（“body”）.prop（'scrollLeft'）
var scv=$（“#myvideotag”）.offset（）.左；
如果（scv
它可以工作！
这就是诀窍：
对不起，布局不好

$(document).ready(function(){
  $('#frontvideo')[0].play();
});

$(document).on("scroll",function(){
  if($(document).scrollLeft()>1){      
     $('#frontvideo')[0].pause();
   }
   else
   {
     $('#frontvideo')[0].play();
   }
});

它起作用了！
这就是诀窍：
对不起，布局不好

$(document).ready(function(){
  $('#frontvideo')[0].play();
});

$(document).on("scroll",function(){
  if($(document).scrollLeft()>1){      
     $('#frontvideo')[0].pause();
   }
   else
   {
     $('#frontvideo')[0].play();
   }
});