한페이지에서 동시에 영상 1개만 재생 가능하게 햇는데 무한 스크롤에서 않됩니다.
본문
한페이지에서 동시에 영상 1개만 재생 가능하게 햇는데 무한 스크롤에서 않됩니다.
아래 소스처럼 하면은 한페이지에 서 1개만 재생가능하는데 무한 스크롤일경우 더보기 하면은 1페이에 영상 하고 2페이지에 영상 동시에 재생 됩니다
이거를 어떻게 하면 무족건 1개만 재생되게 할수있나요?
고수님 도와주세요
감사 합니다.
<div class="img-item">
<video style="width: 100%; height: 100%;" src="<?php echo $list[$i]['wr_link1'] ?>" controls autoplay></video>
</div>
<script type="text/javascript">
var videos = document.getElementsByTagName('video');
for (var i = videos.length - 1; i >= 0; i--) {
(function(){
var p = i;
videos[p].addEventListener('play',function(){
pauseAll(p);
})
})()
}
function pauseAll(index){
for (var j = videos.length - 1; j >= 0; j--) {
if (j!=index) videos[j].pause();
}
}
</script>
답변 1
다음 코드는 동적으로 생성되는 비디오 엘리먼트를 포함해
페이지 내에서 한개만 재생이 가능하도록 제어하는 방법중 하나입니다.
<style>
.wrap { display: flex; gap: 1em; flex-wrap: wrap; margin: 1em; }
.img-item { width: 320px; height: 176px; }
</style>
<script>
const manipulationVideo = {
_playnode: null,
play: function (evt) {
const vdo = evt.target;
if (this._playnode != null && this._playnode != vdo) {
this._playnode.pause();
}
this._playnode = vdo;
},
addevent: function (vdo) {
const object = this;
vdo.addEventListener('play', function (evt) {
object.play(evt);
});
}
};
const observer = new MutationObserver((records) => {
records.forEach((nodes) => {
nodes.addedNodes.forEach((el) => {
el.querySelectorAll('video').forEach((vdo) => {
manipulationVideo.addevent(vdo);
});
});
});
});
document.addEventListener('DOMContentLoaded', function () {
observer.observe(document.body, { subtree: true, childList: true });
document.querySelectorAll('video').forEach((vdo) => {
manipulationVideo.addevent(vdo);
});
});
function testdynvdo() {
var img_item = document.querySelector('.img-item:last-of-type');
img_item.parentNode.appendChild(img_item.cloneNode(true));
}
</script>
<button onclick="testdynvdo()">create a new video element</button>
<div class="wrap">
<div class="img-item">
<video style="width: 100%; height: 100%;" src="https://www.w3schools.com/html/mov_bbb.mp4" controls autoplay playsinline></video>
</div>
<div class="img-item">
<video style="width: 100%; height: 100%;" src="https://www.w3schools.com/html/mov_bbb.mp4" controls autoplay playsinline></video>
</div>
</div>