HTML5 동영상이 반복되지 않습니다.

HTML5 동영상이 반복되지 않습니다.

---

웹 페이지의 배경으로 비디오를 가지고 있으며 반복하도록 노력하고 있습니다. 다음은 코드입니다.

<video autoplay='true' loop='true' muted='true'>
  <source src='/admin/wallpapers/linked/4ebc66e899727777b400003c' type='video/mp4'></source>
</video>

비디오를 반복하라고 말했지만 그렇지 않습니다. 나는 또한 onended속성 으로 반복하도록 시도했습니다 ( 이 Mozilla 지원 스레드 에 따라 jQuery도 시도했습니다). 지금까지 아무것도 작동하지 않았습니다. Chrome 또는 내 코드에 문제가 있습니까?

편집하다:

네트워크 이벤트와 작업 복사본의 HEAD ( http://fhsclock-labs.heroku.com/no-violence )와 작업하려는 응용 프로그램을 확인했습니다. 차이점은 작업 복사본이 Heroku의 정적 자산 (분명히 Varnish를 통해)에서 비디오를 제공하는 반면, 광산은 GridFS (MongoDB)에서 제공한다는 것입니다.

Chrome Inspector의 네트워크 탭에 내 애플리케이션에서 동영상이 세 번 요청 된 것으로 표시됩니다. 한 번 상태는 "보류 중"이고 두 번째는 "취소됨"이며 마지막 상태는 200 OK입니다. 작업 사본에는 두 개의 요청 만 표시됩니다. 하나의 상태는 보류 중이고 다른 하나는 206 부분 콘텐츠입니다. 그러나 동영상이 한 번 재생되면 해당 요청이 '취소됨'으로 변경되고 해당 동영상에 대해 또 다른 요청을합니다. 내 응용 프로그램에서는 발생하지 않습니다.

Type의 경우, 내 응용 프로그램에서 두 개는 "정의되지 않음"이고 다른 하나는 "비디오 / mp4"(예상)입니다. 작동중인 앱에서 모든 요청은 "video / mp4"입니다.

또한 Resource interpreted as Other but transferred with MIME type undefined.콘솔에 경고가 표시됩니다.

나는 이것을 어디서부터 시작해야할지 잘 모르겠습니다. 파일을 정적 자산으로 제공하면 문제가 서버 측이라고 생각합니다. 서버가 올바른 콘텐츠 유형을 보내지 않을 수 있습니다. GridFS의 문제 일 수 있습니다. 나도 몰라.

어쨌든 소스는 여기에 있습니다 . 당신이 제공 할 수있는 모든 통찰력을 높이 평가합니다.

---

아, 방금이 정확한 문제를 발견했습니다.

결과적 으로 Chrome의 요소에서 루핑 (또는 그 문제에 대한 모든 종류의 검색)은 부분적인 콘텐츠 요청<video> 을 이해하는 서버에서 동영상 파일을 제공 한 경우에만 작동 합니다 . 즉, 서버는 206 "Partial Content"응답과 함께 "Range"헤더를 포함하는 요청을 존중해야합니다. 동영상이 크롬에 의해 완전히 버퍼링 될 수있을만큼 작아서 더 이상 서버 왕복이 발생하지 않는 경우에도 마찬가지입니다. 서버가 처음에 크롬의 범위 요청을 수락하지 않으면 동영상이 반복되거나 검색되지 않습니다. .

그렇습니다. GridFS의 문제이지만 Chrome이 더 관대해야합니다.

---

가장 간단한 해결 방법 :

$('video').on('ended', function () {
  this.load();
  this.play();
});

이 'ended'이벤트는 동영상이 끝에 도달 video.load()하면 시작되고 동영상이 처음으로 재설정되며 video.play()로드 된 즉시 재생을 시작합니다.

이는 서버 응답을 많이 제어 할 수없는 Amazon S3에서 잘 작동 video.currentTime하며 동영상에 길이 메타 데이터가 누락 된 경우 설정할 수 없는 것과 관련된 Firefox 문제도 해결 합니다.

jQuery가없는 유사한 자바 스크립트 :

document.getElementsByTagName('video')[0].onended = function () {
  this.load();
  this.play();
};

---

과거에 문제가 된 것처럼 보이지만 적어도 두 개의 닫힌 버그가 있지만 두 가지 모두 수정되었음을 나타냅니다.

http://code.google.com/p/chromium/issues/detail?id=39683

http://code.google.com/p/chromium/issues/detail?id=18846

Chrome과 Safari는 모두 웹킷 기반 브라우저를 사용하기 때문에 다음 해결 방법 중 일부를 사용할 수 있습니다. http://blog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how -그들을 해결하기 위해 /

function restartVideo(){
vid.currentTime = 0.1; //setting to zero breaks iOS 3.2, the value won't update, values smaller than 0.1 was causing bug as well.
vid.play();
}

//loop video
vid.addEventListener('ended', restartVideo, false);

---

내 상황 :

나는 똑같은 문제가 있지만 응답 메시지의 헤더를 변경하는 것만으로는 효과가 없습니다. 루프, 리플레이 또는 탐색이 없습니다. 또한 순수한 중지가 작동하지 않지만 내 구성이 될 수 있습니다.

대답:

일부 사이트에 따르면 (더 이상 찾을 수 없음) 비디오가 끝난 직후와 다음 사이트가 시작되기 전에 load () 메서드를 트리거 할 수도 있습니다. 그러면 소스가 다시로드되어 비디오 / 오디오 요소가 다시 작동합니다.

@남자

Please note that your answers/links are normal bugs, and not focused on this problem. Using a server/webserver is what causes this problem. Whereas the bugs these links describe are of a different kind. Thats also why the answer isnt working.

I hope it helps, i am still looking for a solution.

---

Just in case none of the answers above help you, make sure you don't have your inspector running with the Disable cache option checked. Since Chrome grabs the video from cache, it will basically work once. Just debugged this for 20 minutes before realizing this was the cause. For reference and so I know I am not the only one someone else's chromium bug report.

---

it is super lame but dropbox use the right status code. So upload to dropbox and replace the www by dl.

Thus using a dropbox url the video play fine.

---

I know this doesn't pertain exactly to the question asked, but if someone comes across this when having a similar issue, make sure that you have your sources in order properly.

I was loading an mp4 and a webm file and noticed that the video was not looping in Chrome. It was because the webm file was the first source listed so Chrome was loading the webm file and not the mp4.

Hope that helps someone else that comes across this issue.

<video autoplay loop>
    <source src="/path-to-vid/video.mp4" type="video/mp4">
    <source src="/path-to-vid/video.webm" type="video/webm">
</video>

참고URL : https://stackoverflow.com/questions/8088364/html5-video-will-not-loop