2011-12-24 5 views
2

최신 브라우저에서 HTML5 동영상 기능을 사용하여 재생 목록을 만들려고합니다.HTML5 비디오 재생 목록을 만드는 가장 좋은 방법은 무엇입니까?

지금까지 발견 된 유일한 방법은 .. 내가 더 나은 방법이있을 생각

$("second video link").click (function(){ 
    $("#video wrapper").remove(); 
    $("#video wrapper").append(" new video tags "); 
}); 

을 ... 다음 비디오 태그를 제거 다음과 같은 다른 소스로 다시 추가하는 것입니다

+0

단순히 src 속성을 변경하는 것으로 충분하지 않습니까? – powerbuoy

+0

src를 수정하거나

+0

@powerbuoy // 나는 그것을 시도하지 않았다. 나는 그것을 시도 할 것이다. – Moon

답변

2

대답은 당신이 좋아하는 접근 방식과 비디오를 제공하고자하는 브라우저에 달려 있습니다. 소스 하위 요소를 통해 여러 소스를 제공 한 경우 video.src() 함수에서 IE9가 실패합니다. 하나의 브라우저 만 작동하면 webm 및 mp4에 대한 caniuse.com을 확인하여 어떤 브라우저가 어떤 코덱을 지원하는지 확인하십시오. 청중이 mp4 및 webm 전용 브라우저를 모두 사용하여 여러 코덱이 필요한 경우 .src() 함수를 사용하기 전에 .canPlayType()을 사용하여 확인해야하며 실패 할 소스를 제거해야합니다 이 수표는 총알 증명이 아닙니다.) 안드로이드 2.2 (또는 그것 2.1, 제발 날 수정하십시오) funciotn 전혀 몰라. 일부 Mac OSX 브라우저에는 afaik와 비슷한 문제가 있습니다.

최종선 : canPlayType()의 콤보를 사용하여 잘못된 소스를 필터링 한 다음 배열 또는 다른 정렬 가능한 목록을 사용하여 다음 비디오 소스를 가져와 비디오에서 "종료 된"이벤트가 발생하면 설정하십시오 src() 함수를 사용하여. 또한 일부 브라우저의 단점을 피하기 위해 소스를 변경할 때 비디오 요소의 유형 특성을 설정하는 것을 좋아합니다.

가능한 유형은 다음과 같습니다. mp4 및 m4v 파일의 경우 video/mp4; webm 파일을위한 video/webm; ogv 파일을위한 video/ogg; 어떤 종류의 서버 측 스크립팅을 통해 유형을 제공하거나 JS에서 파일 확장자를 확인한 다음 switch() {...} 또는 if else()를 수행하십시오 ...

확장자를 쉽게 얻을 수 있습니다 sourceString은 또한 당신이 비디오에 대한 자신의 요구 사항을 준수하는 브라우저 사양을 확인해야 소스

의 URL을 포함하는 변수입니다

var sourceExt = (sourceString.split(".")).pop(); 

를 통해. 예를 들어 iOS에서는 mp4가 기본 프로필로 인코딩되어야합니다.

관련 문제