한페이지에서 동시에 영상 1개만 재생 가능하게 햇는데 무한 스크롤에서 않됩니다.

한페이지에서 동시에 영상 1개만 재생 가능하게 햇는데 무한 스크롤에서 않됩니다.

QA

한페이지에서 동시에 영상 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 10,639
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT