播放视频时滚动到,但播放视频一次
Play video when scrolled to, BUT play video ONCE
我想改编我在http://jsfiddle.net/jAsDJ/找到的代码。这几乎是我所需要的,除了我希望视频只播放一次。上面链接中的代码即使在去掉视频标签上的loop属性后也会在滚动上播放。
在http://jsfiddle.net/duya0ntw/1/您可以看到我所做的:添加JS第4行,第23-26行和第34-38行。我试图创建一个函数来确定视频是否完整播放,并且只在视频未播放时播放。
下面是JS。任何帮助都将非常感激。我已经摆弄了几个小时了,还是没有运气。(JS新手)
var videos = document.getElementsByTagName("video"), fraction = 0.8;
var once = new Array(videos.length);
function checkScroll() {
for (var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = video.offsetLeft,
y = video.offsetTop,
w = video.offsetWidth,
h = video.offsetHeight,
r = x + w, //right
b = y + h, //bottom
visibleX, visibleY, visible;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
if (once[i] == false) {
video.play();
once[i] = true;
}
}
else {
//video.pause();
}
}
}
$(document).ready(function () {
for (var i = 0; i < videos.length; i++) {
once[i] = false;
}
});
变化:
if (visible > fraction)
:
if (visible > fraction && video.currentTime < video.duration)
这样你的视频就不会循环播放-只有当播放头还没有结束时,它们才会播放。
JSFiddle: https://jsfiddle.net/jAsDJ/218/
这是我用来构建这个答案的参考,这可能会有所帮助。
相关文章:
- 在移动设备中自动播放视频
- Twitter Boostrap:模式窗口在重新播放模式窗口后不播放视频
- 可以't从peerConnection Connection播放视频
- 在一天中的某个时间自动在我的网站上播放视频
- 如何使用videojs开始播放视频时不显示字幕
- 鼠标悬停时播放视频/鼠标悬停时显示缩略图
- jwplayer seek()和onTime()来播放视频片段
- 噩梦与YouTube API和播放视频工作
- 使用MediaSource扩展播放视频播放列表
- Jwplayer可以'不要在Chrome中播放视频
- 使用Javascript在黑莓设备上播放视频
- video.js,播放视频,但在IE10上没有声音
- 在播放视频时调整屏幕大小
- youtube API播放视频、pauseVideo和stopVideo不工作
- 滚动播放视频,但只能播放一次
- 在安卓设备上使用html5播放视频
- 使用jquery循环播放视频
- 播放视频时如何隐藏标题
- 如何在 HTML 中播放视频
- 通过脚本播放视频在安卓上不起作用