HTML5 비디오가로드되고 있지만 재생되지 않음

비디오 태그를 통해 추가 된 비디오를 재생하는 색상 상자를 통해 HTML5 문서를로드하려고합니다. 비디오에 대한 링크는 다음과 같습니다HTML5 비디오가로드되고 있지만 재생되지 않음

<a href="content/video/test-video-01.html" class="cboxElement"></a>

JS는 colorbox이 추가 :

var $gallery = $('a.cboxElement').colorbox({ 
    transition : 'elastic', 
    speed : box_speed, 
    maxHeight : 700, 
    maxWidth : 900, 
    initialHeight : 486, 
    initialWidth : 722, 
    fixed : true, 
    preloading : false, 
    onCleanup : function() { 
     $('canvas#connector').fadeOut(box_speed); 
    }, 
    onClosed : function() { 
     box_opened = false; 
     initiateActivity(); 
    } 
}); 


$('a.cboxElement').click(function(e) { 
    $gallery.eq(0).click(); 
    return false; 
});

그리고 마지막으로, 테스트 영상 01.html은 다음과 같습니다

<video width="722px" height="487px" controls="controls"> 
    <source src="http://localhost:8888/ipm/content/video/test-video-01.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
    <source src="http://localhost:8888/ipm/content/video/test-video-01.webm" type='video/webm; codecs="vp8, vorbis"' /> 
    Your browser does not support the video tag. 
</video>

I을 다른 MIME 유형을 허용하기 위해 .htaccess 파일에 AddType 선언을 추가했습니다.

문제는 색상 상자를 통해 콘텐츠를로드하면 동영상과 컨트롤이 표시된다는 것입니다. 그러나 영화는 재생되지 않습니다. 나는 영화 타임 라인을 클릭하고 영화의 다른 프레임을 볼 수는 있지만 어느 시점에서도 재생할 수는 없다. test-video-o1.html 파일을 직접 방문하면 완벽하게 작동합니다. Colorbox는 HTML 파일을 가져 오기 위해 AJAX 요청을하고 이것이 문제를 일으키는 지 궁금합니다. 이것에 대한 도움은 정말 대단합니다. 감사!

출처

2011-10-20 tollmanz

죄송합니다. 답변으로 게시했습니다. 댓글로는 너무 컸습니다. jsfiddle을 게시 할 수 있습니까? 내 머리 위로 떨어져

몇 가지 : 당신이 autoplay 속성을 사용하면 어떻게됩니까

?
mp4 버전에 'faststart'/ moov atom/스트리밍에 맞게 최적화되도록 비디오를 인코딩 했습니까?
는 (206 응답이 .. 자주 probs 원인)
가 'canplaythrough' 이벤트가 기록되는지 확인하기위한 요소에 JS 수신기를 연결하려고 서버에서 실행중인 일부 내용 헤더를 가지고 있습니까.

출처

2012-07-25 11:49:22 Alex

HTML5 비디오가로드되고 있지만 재생되지 않음

답변

관련 문제