한페이지에서 동시에 영상 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개
다음 코드는 동적으로 생성되는 비디오 엘리먼트를 포함해
페이지 내에서 한개만 재생이 가능하도록 제어하는 방법중 하나입니다.
</p>
<p><style>
.wrap { display: flex; gap: 1em; flex-wrap: wrap; margin: 1em; }
.img-item { width: 320px; height: 176px; }
</style></p>
<p> </p>
<p><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);
});
}
};</p>
<p> </p>
<p>const observer = new MutationObserver((records) => {
records.forEach((nodes) => {
nodes.addedNodes.forEach((el) => {
el.querySelectorAll('video').forEach((vdo) => {
manipulationVideo.addevent(vdo);
});
});
});
});</p>
<p> </p>
<p>document.addEventListener('DOMContentLoaded', function () {
observer.observe(document.body, { subtree: true, childList: true });</p>
<p> document.querySelectorAll('video').forEach((vdo) => {
manipulationVideo.addevent(vdo);
});
});</p>
<p> </p>
<p>function testdynvdo() {
var img_item = document.querySelector('.img-item:last-of-type');
img_item.parentNode.appendChild(img_item.cloneNode(true));
}
</script></p>
<p> </p>
<p><button onclick="testdynvdo()">create a new video element</button></p>
<p> </p>
<p><div class="wrap">
<div class="img-item">
<video style="width: 100%; height: 100%;" src="<a href="https://www.w3schools.com/html/mov_bbb.mp4"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/html/mov_bbb.mp4"</a> controls autoplay playsinline></video>
</div>
<div class="img-item">
<video style="width: 100%; height: 100%;" src="<a href="https://www.w3schools.com/html/mov_bbb.mp4"" target="_blank" rel="noopener noreferrer">https://www.w3schools.com/html/mov_bbb.mp4"</a> controls autoplay playsinline></video>
</div>
</div></p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인