html5 비디오 태그에서 소스 변경 dev.opera.com/articles/everything-you-need-need-html-html5-video-audio/- 섹션

어디에서나 작동하는 비디오 플레이어를 만들려고합니다. 지금까지 나는 갈 것입니다 :

<video>
    <source src="video.mp4"></source>
    <source src="video.ogv"></source>
    <object data="flowplayer.swf" type="application/x-shockwave-flash">
        <param name="movie" value="flowplayer.swf" />
        <param name="flashvars" value='config={"clip":"video.mp4"}' />
    </object>
</video>

(여러 사이트에서 볼 수 있듯이 (예 : 모두를위한 비디오 )) 지금까지는 훌륭했습니다.

그러나 이제는 다른 비디오를 선택할 수있는 비디오 플레이어와 함께 일종의 재생 목록 / 메뉴를 원합니다. 그것들은 플레이어 내에서 즉시 열어야합니다. “동영상 소스를 동적으로 변경”해야합니다 ( dev.opera.com/articles/everything-you-need-need-html-html5-video-audio/- 섹션 “다른 영화를 보자” “)를 자바 스크립트로 사용합니다. 당분간 플래시 플레이어 (및 IE) 부분을 잊어 버리십시오. 나중에 처리하려고합니다.

따라서 <source>태그 를 변경하는 JS 는 다음과 같아야합니다.

<script>
function loadAnotherVideo() {
    var video = document.getElementsByTagName('video')[0];
    var sources = video.getElementsByTagName('source');
    sources[0].src = 'video2.mp4';
    sources[1].src = 'video2.ogv';
    video.load();
}
</script>

문제는 모든 브라우저에서 작동하지 않는다는 것입니다. 즉, firefox = O 멋진 페이지가 있습니다. 여기에 내가 겪고있는 문제를 관찰 할 수 있습니다 : http://www.w3.org/2010/05/video/mediaevents.html

firefox에서 load () 메서드를 트리거하자마자 비디오 플레이어가 죽습니다.

이제 여러 <source>태그를 사용하지 않고 태그 내에서 하나의 src 속성 만 사용 <video>하면 모든 것이 firefox에서 작동한다는 것을 알았습니다.

그래서 내 계획은 그 src 속성을 사용하고 canPlayType () 함수를 사용하여 적절한 파일을 결정하는 것입니다.

어떻게 든 잘못하거나 일을 복잡하게합니까?



답변

나는이 모든 대답이 너무 짧거나 다른 프레임 워크에 의존하기 때문에 미워했습니다.

다음은 Chrome에서 작동하는 “하나의”vanilla JS 방법입니다. 다른 브라우저에서 테스트하십시오.

http://jsfiddle.net/mattdlockyer/5eCEu/2/

HTML :

<video id="video" width="320" height="240"></video>

JS :

var video = document.getElementById('video');
var source = document.createElement('source');

source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Kill%20Bill%20Vol.3.mp4');

video.appendChild(source);
video.play();

setTimeout(function() {
    video.pause();

    source.setAttribute('src', 'http://www.tools4movies.com/trailers/1012/Despicable%20Me%202.mp4');

    video.load();
    video.play();
}, 3000);

답변

Modernizr 는 저에게 매력처럼 작용했습니다.

내가 한 것은 내가 사용하지 않았다는 것 <source>입니다. 어떻게 든 비디오가 load ()를 처음 호출했을 때만 작동했기 때문에 문제가 해결되었습니다. 대신 비디오 태그-> 안에 source 속성을 <video src="blabla.webm" />사용하고 Modernizr 을 사용 하여 브라우저가 지원하는 형식을 결정했습니다.

<script>
var v = new Array();

v[0] = [
        "videos/video1.webmvp8.webm",
        "videos/video1.theora.ogv",
        "videos/video1.mp4video.mp4"
        ];
v[1] = [
        "videos/video2.webmvp8.webm",
        "videos/video2.theora.ogv",
        "videos/video2.mp4video.mp4"
        ];
v[2] = [
        "videos/video3.webmvp8.webm",
        "videos/video3.theora.ogv",
        "videos/video3.mp4video.mp4"
        ];

function changeVid(n){
    var video = document.getElementById('video');

    if(Modernizr.video && Modernizr.video.webm) {
        video.setAttribute("src", v[n][0]);
    } else if(Modernizr.video && Modernizr.video.ogg) {
        video.setAttribute("src", v[n][1]);
    } else if(Modernizr.video && Modernizr.video.h264) {
        video.setAttribute("src", v[n][2]);
    }

    video.load();
}
</script>

희망적으로 이것은 당신을 도울 것입니다 🙂

Modernizr 을 사용하지 않으려면 언제든지 CanPlayType ()을 사용할 수 있습니다 .


답변

당신의 원래 계획은 나에게 잘 들립니다. <source>W3 사양 노트에 표시된대로 요소 를 동적으로 관리하는 데 더 많은 브라우저가 필요합니다.

요소가 비디오 또는 오디오 요소에 이미 삽입 된 경우 소스 요소 및 해당 특성을 동적으로 수정해도 효과가 없습니다. 재생중인 내용을 변경하려면 미디어 요소에서 src 속성을 직접 사용하여 canPlayType () 메서드를 사용하여 사용 가능한 리소스 중에서 선택하십시오. 일반적으로 문서를 파싱 한 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 접근 방식입니다.

http://dev.w3.org/html5/spec/Overview.html#the-source-element


답변

이 간단한 방법으로 해결했습니다.

function changeSource(url) {
   var video = document.getElementById('video');
   video.src = url;
   video.play();
}

답변

동일한 비디오 플레이어가 새 파일을로드하도록하는 대신 전체 <video>요소를 지우고 다시 만드십시오. src가 올바른 경우 대부분의 브라우저가 자동으로로드합니다.

예 ( 시제품 사용 ) :

var vid = new Element('video', { 'autoplay': 'autoplay', 'controls': 'controls' });
var src = new Element('source', { 'src': 'video.ogg', 'type': 'video/ogg' });

vid.update(src);
src.insert({ before: new Element('source', { 'src': 'video.mp4', 'type': 'video/mp4' }) });

$('container_div').update(vid);

답변

div를 넣고 내용을 업데이트하십시오 …

<script>
function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style="height: 100px; width: 100px;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}
</script>
<button onClick="setvideo('video1.mp4');">Video1</button>
<div id="div_video"> </div>

답변

사양 에 따르면

요소가 이미 비디오 또는 오디오 요소에 삽입 된 경우 소스 요소와 해당 특성을 동적으로 수정해도 효과가 없습니다. 재생중인 내용을 변경하려면 미디어 요소에서 src 속성을 직접 사용하여 canPlayType () 메서드를 사용하여 사용 가능한 리소스 중에서 선택하십시오. 일반적으로 문서를 구문 분석 한 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 접근 방식입니다.

그래서 당신이하려는 것은 분명히 작동하지 않아야합니다.