超级黑客！
所以我尝试并搜索了几个小时，但似乎无法找到解决方案。在我的页面上，当用户滚动到页面的某个点时，我将其设置为自动播放视频的位置。它效果很好，但我发现视频一遍又一遍地循环很烦人。我只希望视频只播放一次，直到用户重新加载页面或访问新页面并返回。然后视频可以再次播放。这就是我得到的！
HTML:
<video id="vid" width="400">
<source src="assets/img/me.mp4" type="video/mp4">
Your browser does not support HTML5 video. Please update your browser.
</video>
JavaScript：
$(window).scroll(function(){
var myVideo = document.getElementById("vid");
// console.log($(window).scrollTop());
if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
myVideo.play();
}else{
myVideo.pause();
}
})
没什么特别的，非常简单。我知道循环有一个名为“loop”的 html5 属性，我不知道这是否是我的答案？在一些 HTML5 文档中看到循环属性和值 0 似乎是我正在寻找的？但不知道该怎么做？
值 0（默认）：视频仅播放一次。
值 1：视频将循环播放（永远）。
预先感谢女士们先生们！我真的很感激你的时间。
默认值loop属性是false，所以不，这不是你的解决方案。
你的问题是你会打电话play()每次满足您的要求（滚动位置）时。
您需要的是检查视频是否已经播放，如果没有，则播放视频。
值得庆幸的是，有一个played https://developer.mozilla.org/en/docs/Web/HTML/Element/video#attr-playedvideo 元素上的属性将返回“指示已播放视频的所有范围的时间范围”。
所以你可以很容易地做到这样：
$(window).scroll(function(){
var myVideo = document.getElementById("vid");
if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
if(myVideo.played.length === 0 )
myVideo.play();
}else{
myVideo.pause();
}
})
但正如您所注意到的，它只会播放视频一次，但在您暂停后不会重新开始播放，即使未到达结尾也是如此。
那么这种情况的解决方案就是在上面绑定一个flagonended视频事件：
// first attach the flag in the onended event
$('#vid').on('ended', function(){this.playedThrough = true;});
$(window).scroll(function(){
var myVideo = document.getElementById("vid");
if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
// only if we didn't reached the end yet
if(!myVideo.playedThrough)
myVideo.play();
}else{
myVideo.pause();
}
})
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
