การเปลี่ยนแหล่งที่มาบนแท็กวิดีโอ 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-to-know-html5-video-audio/ - ส่วน "ลองดูหนังเรื่องอื่น ") ด้วยจาวาสคริปต์ อย่าลืมเกี่ยวกับส่วน flashplayer (และ IE) ในขณะนี้ฉันจะพยายามจัดการกับสิ่งนั้นในภายหลัง

ดังนั้น JS ของฉันในการเปลี่ยน<source>แท็กควรเป็นดังนี้:

<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

ทันทีที่ฉันทริกเกอร์เมธอด load () (ใน firefox ให้นึกถึงคุณ) โปรแกรมเล่นวิดีโอจะตาย

ตอนนี้ฉันได้พบแล้วว่าเมื่อฉันไม่ได้ใช้หลาย<source>แท็ก แต่ใช้เพียงแอตทริบิวต์ src เดียวภายใน<video>แท็กสิ่งทั้งหมดทำงานใน firefox

ดังนั้นแผนของฉันคือการใช้เพียง src แอตทริบิวต์ที่และตรวจสอบไฟล์ที่เหมาะสมโดยใช้canPlayType ()ฟังก์ชั่น

ฉันทำผิดอะไรหรือเปล่า?

ฉันเกลียดคำตอบทั้งหมดนี้เพราะสั้นเกินไปหรืออาศัยกรอบความคิดอื่น ๆ

นี่คือวิธี Vanilla JS "หนึ่ง" ในการทำเช่นนี้ซึ่งใช้ได้กับ Chrome โปรดทดสอบในเบราว์เซอร์อื่น

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>สิ่งที่ฉันได้คือว่าผมไม่ได้ใช้ สิ่งนี้ทำให้เกิดความสับสนเนื่องจากวิดีโอใช้งานได้เฉพาะครั้งแรกที่เรียกโหลด () แต่ฉันใช้แอตทริบิวต์ต้นทางภายในแท็กวิดีโอ -> <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 () เพื่อเลือกจากแหล่งข้อมูลที่มีอยู่ โดยทั่วไปการจัดการองค์ประกอบของแหล่งที่มาด้วยตนเองหลังจากที่เอกสารถูกแยกวิเคราะห์เป็นวิธีการที่ซับซ้อนโดยไม่จำเป็น [sic]

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 ถูกต้อง

ตัวอย่าง (โดยใช้Prototype ):

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

ตามสเป็ค

การแก้ไของค์ประกอบแหล่งที่มาและแอตทริบิวต์แบบไดนามิกเมื่อแทรกองค์ประกอบในวิดีโอหรือเสียงแล้วจะไม่มีผล หากต้องการเปลี่ยนสิ่งที่กำลังเล่นอยู่เพียงแค่ใช้แอตทริบิวต์ src บนองค์ประกอบสื่อโดยตรงโดยอาจใช้เมธอด canPlayType () เพื่อเลือกจากแหล่งข้อมูลที่มีอยู่ โดยทั่วไปการจัดการองค์ประกอบแหล่งที่มาด้วยตนเองหลังจากที่เอกสารถูกแยกวิเคราะห์เป็นวิธีการที่ซับซ้อนโดยไม่จำเป็น

ดังนั้นสิ่งที่คุณพยายามทำดูเหมือนจะไม่ได้ผล

เพียงใส่ 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>

Yaur: แม้ว่าสิ่งที่คุณคัดลอกและวางไว้จะเป็นคำแนะนำที่ดี แต่ก็ไม่ได้หมายความว่าจะเป็นไปไม่ได้ที่จะเปลี่ยนองค์ประกอบต้นทางขององค์ประกอบวิดีโอ HTML5 อย่างหรูหราแม้ใน IE9 (หรือ IE8 สำหรับเรื่องนั้น) (โซลูชันนี้ไม่เกี่ยวข้องกับ การเปลี่ยนองค์ประกอบวิดีโอทั้งหมดเนื่องจากเป็นการฝึกฝนการเขียนโค้ดที่ไม่ดี)

โซลูชันที่สมบูรณ์ในการเปลี่ยน / สลับวิดีโอในแท็กวิดีโอ HTML5 ผ่านจาวาสคริปต์สามารถพบได้ที่นี่และได้รับการทดสอบในเบราว์เซอร์ HTML5 ทั้งหมด (Firefox, Chrome, Safari, IE9 และอื่น ๆ )

หากวิธีนี้ช่วยได้หรือหากคุณประสบปัญหาโปรดแจ้งให้เราทราบ

ฉันมาพร้อมกับสิ่งนี้เพื่อเปลี่ยนแหล่งวิดีโอแบบไดนามิก บางครั้งเหตุการณ์ "canplay" ไม่เริ่มทำงานใน Firefox ดังนั้นฉันจึงได้เพิ่ม "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

บังเอิญทั้ง FireFox และ Chrome กำลังเล่นรูปแบบ "ogg" แม้ว่า Chrome จะแนะนำ "webm" ก็ตาม ฉันทำการตรวจสอบการรองรับเบราว์เซอร์ของ "ogg" เป็นอันดับแรกเท่านั้นเนื่องจากโพสต์อื่น ๆ ได้กล่าวถึง FireFox ชอบแหล่งที่มาของ ogg ก่อน (เช่น<source src="..." type="video/ogg"/>) แต่ฉันยังไม่ได้ทดสอบ (และสงสัยอย่างมาก) ว่าลำดับในโค้ดทำให้เกิดความแตกต่างหรือไม่เมื่อตั้งค่า "src" บนแท็กวิดีโอ

HTML

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

JavaScript

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 จะไม่รู้จักการอัปเดตแบบไดนามิกสำหรับ Flash vars หากคุณจะใช้ JavaScript เพื่อเปลี่ยนแปลงแบบไดนามิกฉันจะลบ<source>องค์ประกอบทั้งหมดออกทั้งหมดและใช้canPlayTypeเพื่อตั้งค่าsrcใน JavaScript และbreakหรือreturnหลังจากประเภทวิดีโอแรกที่รองรับและอย่าลืมอัปเดต flash var mp4 แบบไดนามิก video.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>

หมายเหตุสำคัญ :

• จบลงด้วยการวาง OGG เป็นครั้งแรก<source>เพราะ Mac OS Firefox สละพยายามที่จะเล่นวิดีโอหากพบข้อ MP4 <source>เป็นครั้งแรก
• ประเภท MIME ที่ถูกต้องมีความสำคัญ.ogvไฟล์ควรเป็นvideo/ogg, ไม่ video/ogv
• หากคุณมีวิดีโอ HD ตัวแปลงรหัสที่ดีที่สุดที่ฉันพบสำหรับไฟล์ OGG คุณภาพ HD คือFirefogg
• .iphone.mp4ไฟล์สำหรับ iPhone 4 + ซึ่งจะเพียงเล่นวิดีโอที่มีรูปแบบ MPEG-4 ด้วย H.264 พื้นฐาน 3 วีดีโอและเสียง AAC ตัวแปลงรหัสที่ดีที่สุดที่ฉันพบสำหรับรูปแบบนั้นคือ Handbrake โดยใช้พรีเซ็ตของiPhone และ iPod Touchจะทำงานบน iPhone 4+ แต่เพื่อให้ iPhone 3GS ทำงานได้คุณต้องใช้iPod ที่ตั้งไว้ล่วงหน้าซึ่งมีความละเอียดต่ำกว่ามากซึ่งฉันได้เพิ่มเป็นvideo.iphone3g.mp4ไฟล์.
• ในอนาคตเราจะสามารถใช้mediaแอตทริบิวต์กับ<source>องค์ประกอบเพื่อกำหนดเป้าหมายไปยังอุปกรณ์มือถือที่มีข้อความค้นหาสื่อได้ แต่ตอนนี้อุปกรณ์ Apple และ Android รุ่นเก่ายังไม่รองรับคุณสมบัตินี้ดีพอ

แก้ไข :

• ฉันยังคงใช้วิดีโอสำหรับทุกคน แต่ตอนนี้ฉันได้เปลี่ยนไปใช้ FlowPlayer เพื่อควบคุม Flash ทางเลือกซึ่งมีJavaScript 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 ของแท็กแหล่งเดียว โค้ดด้านบนเขียนขึ้นจากหน่วยความจำดังนั้นฉันอาจเข้าใจรายละเอียด hte บางส่วน แต่แนวคิดทั่วไปคือการเปลี่ยนแอตทริบิวต์ src ของแท็กต้นทางแบบไดนามิกโดยใช้จาวาสคริปต์ตามความเหมาะสม

ลองย้ายแหล่ง OGG ไปด้านบน ฉันสังเกตเห็นบางครั้ง Firefox สับสนและหยุดผู้เล่นเมื่อผู้เล่นที่ต้องการเล่น 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>