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

<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 () 함수를 사용하여 적절한 파일을 결정하는 것입니다.

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

답변

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

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

<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>

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

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

<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>