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

92

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

이전에 나는 통해이 작업을 수행 한 것 Flash과 FLVPlayback, 그러나 나는 놀지하는 것을 선호 FlashHTML5의 구체한다. setTimeout매끄러운 루프를 만들기 위해 자바 스크립트를 사용할 수 있다고 생각 하는데 동영상 자체를 삽입하려면 무엇을 사용해야합니까? 비디오를 스트리밍 할 수있는 방법 FLVPlayback이 있습니까?

— 스테 미카 일
소스

156

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

<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"더 이상 사용되지 않습니다.

— 롱기
소스

1

참으로 좋은 충고입니다. 나는 이벤트 javascript를 수신하기 위해을 (를) 사용 videoEnd하고 내가 말할 수있는 것처럼 처음으로 되돌아가는 것으로 끝났습니다 . loop속성은 모든 브라우저에서 지원되지 않습니다. iOS 장치의 경우 autoplayiOS 5에서 모양이나 형태를 지원하지 않으므로 모바일 용 대체 이미지를 사용했습니다. 다시 한 번 감사드립니다.

— stefmikhail

10

<video loop = "true"> 사용은 유효하지 않습니다. w3.org/TR/html-markup/video.html-<video loop = "loop">를 사용하거나 <video loop> 만 사용하십시오.이 규칙은 거의 모든 HTML5 태그에 적용됩니다. (단지 tagname 또는 tagname = "tagname"(XHTML5의 경우))

@vaxquis 업데이트에 감사드립니다. 다음에 api 변경 사항을 편집 할 수 있습니다!

— longi '

5

문제 없어요, 항상 기꺼이 도와 드리겠습니다. 그래도 XHTML 유형 속성 'autoplay = "autoplay"'를 HTML 유형 'loop'와 혼합하지 않습니다. HTML5 또는 <video .. . autoplay = "autoplay"loop = "loop">, HTML5 또는 XHTML5로 파싱 가능. 스타일을 혼합하면 XHTML로는 유효하지 않지만 HTML에서는 불필요하게 자세한 마크 업이 생성됩니다.

1

일반적으로, autoplay당신은 또한 사용하는 경우에만 사파리에서 작동 muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

38

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

따라서

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

— 미카 5
소스

14

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

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

— 랄 루카 알부
소스

JSX를위한 소품 :autoPlay loop muted playsInline

— pomber

2

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

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();

});

— asmmahmud
소스