我的目標是當視頻進入視口時，即使沒有點擊播放按鈕，視頻也會自動播放，離開視口時自動暫停，即使沒有點擊暫停按鈕
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video id="video1" played="false" style="width: 100%; height: 60vh" controls controlslist="nodownload">
<source src="assets\homevideo.mp4" type="video/mp4">
<source src="assets\homevideo.ogg" type="video/ogg">
</video>
<script>
$.fn.isInViewport = function() {
var elementTop = $(this).offset().top;
var elementBottom = elementTop $(this).outerHeight();
var viewportTop = $(window).scrollTop();
var viewportBottom = viewportTop $(window).height();
return elementBottom > viewportTop && elementTop < viewportBottom;
};
setInterval(function() {
$('video').each(function(){
let id = $(this).attr("id");
let played = $(this).attr("played");
if ($(this).isInViewport()) {
if (played == "false") {
$(this)[0].play();
$(this).attr("played", "true");
}
} else {
if (played == "true") {
$(this)[0].pause();
$(this).attr("played", "false");
}
}
});
}, 1000);</script>
uj5u.com熱心網友回復：
您應該使用Intersection Observer
uj5u.com熱心網友回復：
在您的腳本中嘗試此 javascript 代碼。
document.addEventListener("webkitfullscreenchange", function () {
var vid = document.getElementById("video1");
if(document.webkitIsFullScreen == true){
vid.play();
} else {
vid.pause();
}
}, false);
document.addEventListener("fullscreenchange", function () {
console.log(document.fullscreen);
var vid = document.getElementById("video1");
if(document.fullscreen == true){
vid.play();
} else {
vid.pause();
}
}, false);
document.addEventListener("mozfullscreenchange", function () {
console.log(document.mozFullScreen);
var vid = document.getElementById("video1");
if(document.mozFullScreen == true){
vid.play();
} else {
vid.pause();
}
}, false);<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<video id="video1" style="width: 100%; height: 60vh" controlslist="nodownload" controls="controls">
<source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>uj5u.com熱心網友回復：
你可以使用觀察者來做到這一點:)
$("video").each(function() {
$(this).prop({
controls: true,
controlslist: "nodownload"
});
const observer = new window.IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
if (this.paused) {
$(this).prop("muted", true);
this.play();
}
} else {
this.pause();
}
}, {
threshold: 0.5,
}
);
observer.observe(this);
});video {
width: 100%;
}
.white {
height: 1000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="white"></div>
<video>
<source
src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
type="video/mp4"
/>
</video>
<div class="white"></div>
<video>
<source
src="https://static.videezy.com/system/resources/previews/000/018/159/original/herbst-version2.mp4"
type="video/mp4"
/>
</video>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/480268.html
標籤：javascript html jQuery