HTML5에서로드시 무한 반복 재생 재생

HTML5에서로드시 무한 반복 재생 재생

---

페이지로드시 재생을 시작하고 완료하면 중단없이 처음으로 돌아가는 동영상을 HTML5 페이지에 배치합니다. 는해야 우리 비디오 하지 그와 관련된 모든 컨트롤이 있고, 중 모든 '현대의 브라우저와 호환 또는 polyfill의 옵션이 있습니다.

나는 통해이에 이전 작업을 수행 한을 구석으로 Flash과 FLVPlayback, 그러나 나는 놀지하는 것을 선호 FlashHTML5의 구체한다. setTimeout루프를 만들기 위해 자바 확장을 사용할 수있는 생각 하는데 자체를 삽입 구매 무엇을 사용할까요? 비디오를 스트리밍 할 수있는 방법 FLVPlayback이 있습니까?

---

루프 속성을 수행해야합니다.

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

루프 속성에 문제가있는 경우 (예전처럼) videoEnd이벤트를 수신 하고 이벤트가 보관 될 play()때 메소드 를 호출합니다 .

참고 1 : Apple iPad / iPhone의 동작에 대해 잘 모르겠습니다 autoplay..

참고 2 : loop="true"및 autoplay="autoplay"더 이상 사용되지 않습니다.

---

2018 년 4 월부터 크롬 (다른 여러 주요 브라우저와 함께) 에도 속성이 필요 합니다 muted.

따라서

<video width="320" height="240" autoplay loop muted>
  <source src="movie.mp4" type="video/mp4" />
</video>

---

iPhone의 경우 인라인도 추가하면 작동합니다.

<video width="320" height="240" autoplay loop muted playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

---

다음 두 가지 방법 으로이 작업을 수행 할 수 있습니다.

1) loop비디오 요소에서 속성 사용 (첫 번째 답변에서 언급) :

2) ended미디어 이벤트를 사용할 수 있습니다 .

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});

참고 URL : https://stackoverflow.com/questions/10377453/play-infinitely-looping-video-on-load-in-html5