html5 비디오 태그에서 소스 변경

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

<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 () 메서드를 사용하여 사용 가능한 리소스 중에서 선택하십시오. 일반적으로 문서를 구문 분석 한 후 소스 요소를 수동으로 조작하는 것은 불필요하게 복잡한 접근 방식입니다.

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

Yaur : 복사하여 붙여 넣은 내용은 좋은 조언이지만 IE9 (또는 해당 문제의 경우 IE8)에서도 HTML5 비디오 요소의 소스 요소를 우아하게 변경할 수 없음을 의미하지는 않습니다. 전체 비디오 요소를 교체하는 것은 나쁜 코딩 관행이므로).

Javascript를 통해 HTML5 비디오 태그의 비디오를 변경 / 전환하는 완벽한 솔루션 은 여기 에서 찾을 수 있으며 모든 HTML5 브라우저 (Firefox, Chrome, Safari, IE9 등)에서 테스트됩니다.

도움이되거나 문제가있는 경우 알려주십시오.

비디오 소스를 동적으로 변경하기 위해 이것을 제공합니다. Firefox에서 "canplay"이벤트가 실행되지 않으므로 "loadedmetadata"를 추가했습니다. 또한 이전 비디오가 있으면 일시 중지합니다 ...

var loadVideo = function(movieUrl) {
    console.log('loadVideo()');
    $videoLoading.show();
    var isReady = function (event) {
            console.log('video.isReady(event)', event.type);
            video.removeEventListener('canplay', isReady);
            video.removeEventListener('loadedmetadata', isReady);
            $videoLoading.hide();
            video.currentTime = 0;
            video.play();
        },
        whenPaused = function() {
            console.log('video.whenPaused()');
            video.removeEventListener('pause', whenPaused);
            video.addEventListener('canplay', isReady, false);
            video.addEventListener('loadedmetadata', isReady, false); // Sometimes Firefox don't trigger "canplay" event...
            video.src = movieUrl; // Change actual source
        };

    if (video.src && !video.paused) {
        video.addEventListener('pause', whenPaused, false);
        video.pause();
    }
    else whenPaused();
};

이것은 내 솔루션입니다.

<video id="playVideo" width="680" height="400" controls="controls">
    <source id="sourceVideo" src="{{video.videoHigh}}" type="video/mp4">
</video>
    <br />
<button class="btn btn-warning" id="{{video.videoHigh}}" onclick="changeSource(this)">HD</button>
<button class="btn btn-warning" id="{{video.videoLow}}" onclick="changeSource(this)">Regular</button>

<script type="text/javascript">
    var getVideo = document.getElementById("playVideo");
    var getSource = document.getElementById("sourceVideo");
    function changeSource(vid) {
        var geturl = vid.id;
        getSource .setAttribute("src", geturl);
        getVideo .load()
        getVideo .play();
        getVideo .volume = 0.5;
    }
</script>

<source />Chrome 14.0.835.202에서는 FireFox에서 제대로 작동했지만 태그를 사용하는 것이 특히 어려운 것으로 나타났습니다. (이것은 내 지식 부족 일 수 있지만 어쨌든 대체 솔루션이 유용 할 것이라고 생각했습니다.) 따라서 <video />태그를 사용 하고 비디오 태그 자체에서 src 속성을 바로 설정했습니다. 이 canPlayVideo('<mime type>')기능은 특정 브라우저가 입력 비디오를 재생할 수 있는지 여부를 결정하는 데 사용되었습니다. 다음은 FireFox 및 Chrome에서 작동합니다.

Chrome은 "webm"을 권장하지만 FireFox와 Chrome은 모두 "ogg"형식을 재생합니다. 다른 게시물은 파이어 폭스 (즉 먼저 OGG 소스를 선호 언급 만하기 때문에 내가 먼저 "OGG"의 브라우저 지원에 대한 점검을 넣어 <source src="..." type="video/ogg"/>). 그러나 비디오 태그에서 "src"를 설정할 때 코드의 순서가 전혀 차이가 있는지 여부는 테스트하지 않았으며 의심의 여지가 없습니다.

HTML

<body onload="setupVideo();">
    <video id="media" controls="true" preload="auto" src="">
    </video>
</body>

자바 스크립트

function setupVideo() {
       // You will probably get your video name differently
       var videoName = "http://video-js.zencoder.com/oceans-clip.mp4";

       // Get all of the uri's we support
       var indexOfExtension = videoName.lastIndexOf(".");
       //window.alert("found index of extension " + indexOfExtension);
       var extension = videoName.substr(indexOfExtension, videoName.length - indexOfExtension);
       //window.alert("extension is " + extension);
       var ogguri = encodeURI(videoName.replace(extension, ".ogv"));
       var webmuri = encodeURI(videoName.replace(extension, ".webm"));
       var mp4uri = encodeURI(videoName.replace(extension, ".mp4"));
       //window.alert(" URI is " + webmuri);


       // Get the video element
       var v = document.getElementById("media");
       window.alert(" media is " + v);

       // Test for support
       if (v.canPlayType("video/ogg")) {
            v.setAttribute("src", ogguri);
           //window.alert("can play ogg");
       }
       else if (v.canPlayType("video/webm")) {
           v.setAttribute("src", webmuri);
           //window.alert("can play webm");
       }
       else if (v.canPlayType("video/mp4")) {
           v.setAttribute("src", mp4uri);
           //window.alert("can play mp4");
       }
       else {
           window.alert("Can't play anything");
       }

      v.load();
      v.play();
  }

나는 이것을 오랫동안 연구 해왔고 같은 일을하려고 노력하고 있기 때문에 이것이 다른 누군가를 도울 것입니다. 나는 crossbrowsertesting.com을 사용하고 문자 그대로 사람에게 알려진 거의 모든 브라우저에서 이것을 테스트했습니다. 내가 가지고있는 솔루션은 현재 Opera, Chrome, Firefox 3.5 이상, IE8 이상, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1 이상, Android 2.3 이상, Windows Phone 8에서 작동합니다.

동적으로 변화하는 소스

비디오를 동적으로 변경하는 것은 매우 어렵고 Flash 폴백을 원하면 DOM / 페이지에서 비디오를 제거했다가 다시 추가하여 Flash가 Flash vars에 대한 동적 업데이트를 인식하지 못하므로 Flash가 업데이트되도록해야합니다. JavaScript를 사용하여 동적으로 변경하려는 경우 모든 <source>요소를 완전히 제거하고 JavaScript에서 또는 첫 번째 지원되는 비디오 유형 canPlayType을 설정하는 데 사용 하고 플래시 var mp4를 동적으로 업데이트하는 것을 잊지 마십시오. 또한 일부 브라우저는를 호출하지 않으면 소스를 변경 한 것으로 등록하지 않습니다 . 먼저 전화로 문제를 해결할 수 있다고 생각합니다.srcbreakreturnvideo.load().load()video.pause(). 비디오 요소를 제거하고 추가하면 제거 된 비디오를 계속 버퍼링하므로 브라우저 속도가 느려질 수 있지만 해결 방법이 있습니다.

크로스 브라우저 지원

실제 크로스 브라우저 부분까지 Video For Everybody 에도 도착했습니다 . 이미 MediaelementJS Wordpress 플러그인을 사용해 보았는데 해결 된 것보다 훨씬 많은 문제가 발생했습니다. 문제는 실제로 라이브러리가 아닌 Wordpress 플러그인으로 인한 것으로 의심됩니다. 가능한 경우 JavaScript없이 작동하는 것을 찾으려고합니다. 지금까지 내가 생각해 낸 것은이 일반 HTML입니다.

<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
    <img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong>  <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>

중요 사항 :

• <source>Mac OS Firefox가 MP4를 처음 만나면 비디오 재생을 중단하기 때문에 ogg를 처음으로 넣었습니다 <source>.
• 올바른 MIME 유형은 중요하다 .ogv 파일이 있어야한다 video/ogg, 하지 video/ogv
• HD 비디오를 사용하는 경우 HD 품질의 OGG 파일에서 찾은 최고의 트랜스 코더는 Firefogg입니다
• 이 .iphone.mp4파일은 iPhone 4+ 용 이며 H.264 Baseline 3 비디오 및 AAC 오디오가있는 MPEG-4 비디오 만 재생합니다. 해당 형식에 대해 찾은 최고의 트랜스 코더는 핸드 브레이크입니다 .iPhone & iPod Touch 사전 설정을 사용하면 iPhone 4 이상에서 작동하지만 iPhone 3GS가 작동하려면으로 추가 한 해상도가 훨씬 낮은 iPod 사전 설정 을 사용해야합니다 video.iphone3g.mp4.
• 앞으로는 요소 media에 대한 속성 을 사용하여 <source>미디어 쿼리로 모바일 장치를 타겟팅 할 수 있지만 현재는 이전 Apple 및 Android 장치가이를 충분히 지원하지 않습니다.

편집 :

• 나는 아직도 모두를 위해 비디오를 사용하고 있지만, 지금은 멋진있는 플래시 대체, 제어 할 있으며, Flowplayer를 사용으로 전환 한 자바 스크립트 API 를 제어 할 수 있습니다.

나는 비슷한 웹 응용 프로그램을 가지고 있으며 그런 종류의 문제에 전혀 직면하지 않습니다. 내가하는 일은 다음과 같습니다.

var sources = new Array();

sources[0] = /path/to/file.mp4
sources[1] = /path/to/another/file.ogg
etc..

그런 다음 소스를 변경하려면 다음과 같은 기능을 수행합니다.

this.loadTrack = function(track){
var mediaSource = document.getElementsByTagName('source')[0];
mediaSource.src = sources[track];

    var player = document.getElementsByTagName('video')[0];
    player.load();

}

나는 사용자가 재생 목록을 통해 길을 찾을 수 있도록하지만 userAgent를 확인한 다음 적절한 파일을로드 할 수 있습니다. 인터넷의 모든 사람들이 제안한 것처럼 여러 소스 태그를 사용하려고 시도했지만 단일 소스 태그의 src 속성을 조작하는 것이 훨씬 깨끗하고 안정적이라는 것을 알았습니다. 위의 코드는 메모리에서 작성되었으므로 세부 정보 중 일부를 살펴 보았을 수도 있지만 일반적으로 적절한 경우 javascript를 사용하여 소스 태그의 src 속성을 동적으로 변경하는 것이 좋습니다.

OGG 소스를 맨 위로 이동하십시오. 파이어 폭스가 때때로 혼란스러워하고 플레이하려는 플레이어가 처음이 아닐 때 플레이어를 멈추는 것을 알았습니다.

시도해 볼 가치가 있습니다.

Jquery에서 할 수있는 또 다른 방법.

HTML

<video id="videoclip" controls="controls" poster="" title="Video title">
    <source id="mp4video" src="video/bigbunny.mp4" type="video/mp4"  />
</video>

<div class="list-item">
     <ul>
         <li class="item" data-video = "video/bigbunny.mp4"><a href="javascript:void(0)">Big Bunny.</a></li>
     </ul>
</div>

jquery

$(".list-item").find(".item").on("click", function() {
        let videoData = $(this).data("video");
        let videoSource = $("#videoclip").find("#mp4video");
        videoSource.attr("src", videoData);
        let autoplayVideo = $("#videoclip").get(0);
        autoplayVideo.load();
        autoplayVideo.play();
    });

JavaScript 및 jQuery 사용 :

<script src="js/jquery.js"></script>
...
<video id="vid" width="1280" height="720" src="v/myvideo01.mp4" controls autoplay></video>
...
function chVid(vid) {
    $("#vid").attr("src",vid);
}
...
<div onclick="chVid('v/myvideo02.mp4')">See my video #2!</div>