在视图中自动播放HTML5视频
在视图中自动播放HTML5视频
提问于 2018-08-12 09:05:03
我需要一个特定的JS的帮助，我正在使用，使HTML5视频播放时在视图中。
代码：
$(document).ready(function() {
// Get media - with autoplay disabled (audio or video)
var media = $('#video1, #video2, #video3, #video4, #video5');
var tolerancePixel = 10;
function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
//if ($(window).scrollTop() > $(window).height() - 100) {
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
//}
}
$(document).on('scroll', checkMedia);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>
我从这个答案中获得了这段代码：https://stackoverflow.com/a/26508106/10213848
我的问题是，一旦视频结束，它可以通过向上滚动再次触发。我需要的视频/s只播放一次，不会被再次触发。
任何帮助都将不胜感激。
回答 2
Stack Overflow用户
发布于 2018-08-12 09:13:51
您可以使用变量来标记视频是否已播放。如果已经播放过，请不要再播放：
$(document).ready(function() {
// Get media - with autoplay disabled (audio or video)
var media = $('#video1, #video2, #video3, #video4, #video5');
var tolerancePixel = 10;
var hasPlayMap = {};
function checkMedia(){
// Get current browser top and bottom
var scrollTop = $(window).scrollTop() + tolerancePixel;
var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
//if ($(window).scrollTop() > $(window).height() - 100) {
media.each(function(index, el) {
var yTopMedia = $(this).offset().top;
var yBottomMedia = $(this).height() + yTopMedia;
if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){
var thisId = $(this).attr("id");
if (hasPlayMap[thisId]){
return;
}
hasPlayMap[thisId] = true;
$(this).get(0).play();
} else {
$(this).get(0).pause();
}
});
//}
}
$(document).on('scroll', checkMedia);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:500px"></div>
<video muted id="video4" class="lightbulbs" width="100%" height="auto">
<source src="http://www.ddi.com.au/culture/img/lightbulbs.mp4" type="video/mp4">
</video>
<div style="height:500px"></div>
Stack Overflow用户
发布于 2018-08-12 10:51:05
对不起，我知道这看起来很像NewToJS在评论中的回答，遗憾的是我也在想同样的事情。
由于这是您想要的效果，请不要在此打绿勾，因为NewToJS首先得到了答案(当然，如果您计划这样做的话)。
您可以通过设置视频的onend事件来设置视频的onplay事件：
document.querySelector('video').forEach(function(element) {
// Set the onend event to...
element.onend = function() {
// ...set the onplay event to...
this.onplay = function() {
// ...stop playing video when the video starts playing
this.pause();
this.currentTime = 0;
};
};
});纯jQuery版本：
$('video').each(function(ix, ele) {
ele.addEventListener('end', function() {
this.addEventListener('play', function() {
ele.pause();
ele.currentTime = 0;
});
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51804939
复制相关文章
相似问题