thay đổi nguồn trên thẻ video html5

Tôi đang cố gắng xây dựng một trình phát video, hoạt động ở mọi nơi. cho đến nay tôi sẽ đi với:

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

(như đã thấy trên một số trang web, ví dụ video cho mọi người ) cho đến nay, rất tốt.

nhưng bây giờ tôi cũng muốn một số loại danh sách phát / menu cùng với trình phát video, từ đó tôi có thể chọn các video khác. những người nên được mở trong trình phát của tôi ngay lập tức. vì vậy tôi sẽ phải "tự động thay đổi nguồn của video" (như đã thấy trên dev.opera.com/articles/everything-you-need-to-ledge-html5-video-audio/ - phần "Hãy xem một bộ phim khác ") Với javascript. Hãy quên đi phần flashplayer (và do đó là IE) trong thời gian này, tôi sẽ cố gắng giải quyết vấn đề đó sau.

Vì vậy, mã JS của tôi để thay đổi các <source>thẻ phải giống như:

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

vấn đề là, điều này không hoạt động trong tất cả các trình duyệt. cụ thể là firefox = O có một trang đẹp, nơi bạn có thể quan sát vấn đề tôi đang gặp phải: http://www.w3.org/2010/05/video/mediaevents.html

Ngay khi tôi kích hoạt phương thức load () (trong firefox, hãy nhớ đến bạn), trình phát video sẽ chết.

bây giờ tôi đã phát hiện ra rằng khi tôi không sử dụng nhiều <source>thẻ, mà thay vào đó chỉ là một thuộc tính src trong<video> thẻ, toàn bộ điều này hoạt động trong firefox.

vì vậy kế hoạch của tôi là chỉ sử dụng thuộc tính src đó và xác định tệp thích hợp bằng cách sử dụng canPlayType () .

Tôi đang làm sai bằng cách nào đó hoặc làm phức tạp mọi thứ ??

Tôi ghét tất cả những câu trả lời này vì chúng quá ngắn hoặc dựa vào các khung khác.

Đây là cách "một" vanilla JS để thực hiện việc này, hoạt động trong Chrome, vui lòng kiểm tra trong các trình duyệt khác:

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 làm việc như một cơ duyên đối với tôi.

Những gì tôi đã làm là tôi đã không sử dụng <source>. Bằng cách nào đó, điều này làm hỏng mọi thứ, vì video chỉ hoạt động khi tải lần đầu tiên () được gọi. Thay vào đó, tôi đã sử dụng thuộc tính nguồn bên trong thẻ video -> <video src="blabla.webm" />và sử dụng Modernizr để xác định định dạng mà trình duyệt hỗ trợ.

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

Hy vọng rằng điều này sẽ giúp bạn :)

Nếu bạn không muốn sử dụng Modernizr , bạn luôn có thể sử dụng CanPlayType () .

Kế hoạch ban đầu của bạn nghe có vẻ tốt với tôi. Bạn có thể sẽ tìm thấy nhiều quirks trình duyệt hơn liên quan đến việc quản lý linh hoạt các <source>yếu tố, như được chỉ ra ở đây bởi ghi chú đặc tả W3:

Tự động sửa đổi một phần tử nguồn và thuộc tính của nó khi phần tử đã được chèn vào một phần tử video hoặc âm thanh sẽ không có hiệu lực. Để thay đổi nội dung đang phát, chỉ cần sử dụng trực tiếp thuộc tính src trên thành phần phương tiện, có thể sử dụng phương thức canPlayType () để chọn trong số các tài nguyên có sẵn. Nói chung, thao tác các phần tử nguồn theo cách thủ công sau khi tài liệu được phân tích cú pháp là một cách tiếp cận phức tạp [sic] không cần thiết.

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

Tôi đã giải quyết điều này bằng phương pháp đơn giản này

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

Thay vì tải cùng một trình phát video để tải các tệp mới, tại sao không xóa toàn bộ <video> phần và tạo lại nó. Hầu hết các trình duyệt sẽ tự động tải nó nếu src là chính xác.

Ví dụ (sử dụng 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);

Chỉ cần đặt một div và cập nhật nội dung ...

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

Theo thông số kỹ thuật

Tự động sửa đổi một phần tử nguồn và thuộc tính của nó khi phần tử đã được chèn vào một phần tử video hoặc âm thanh sẽ không có hiệu lực. Để thay đổi nội dung đang phát, chỉ cần sử dụng trực tiếp thuộc tính src trên thành phần phương tiện, có thể sử dụng phương thức canPlayType () để chọn trong số các tài nguyên có sẵn. Nói chung, thao tác các phần tử nguồn theo cách thủ công sau khi tài liệu được phân tích cú pháp là một cách tiếp cận phức tạp không cần thiết.

Vì vậy, những gì bạn đang cố gắng làm rõ ràng là không nên làm việc.

Yaur: Mặc dù những gì bạn đã sao chép và dán là lời khuyên tốt, nhưng điều này không có nghĩa là không thể thay đổi thành phần nguồn của phần tử video HTML5 một cách thanh lịch, ngay cả trong IE9 (hoặc IE8 cho vấn đề đó). (Giải pháp này KHÔNG liên quan đến vấn đề đó). thay thế toàn bộ yếu tố video, vì nó là thực hành mã hóa xấu).

Một giải pháp hoàn chỉnh để thay đổi / chuyển đổi video trong thẻ video HTML5 thông qua javascript có thể được tìm thấy ở đây và được thử nghiệm trong tất cả trình duyệt HTML5 (Firefox, Chrome, Safari, IE9, v.v.).

Nếu điều này có ích, hoặc nếu bạn gặp rắc rối, xin vui lòng cho tôi biết.

Tôi đi kèm với điều này để thay đổi nguồn video động. Sự kiện "canplay" đôi khi không kích hoạt trong Firefox vì vậy tôi đã thêm "loadmetadata". Ngoài ra tôi tạm dừng video trước nếu có một ...

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

Đây là giải pháp của tôi:

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

Việc sử dụng các <source />thẻ tỏ ra khó khăn đối với tôi trong Chrome 14.0.835.202, mặc dù nó hoạt động tốt với tôi trong FireFox. (Đây có thể là sự thiếu hiểu biết của tôi, nhưng tôi nghĩ rằng một giải pháp thay thế dù sao cũng có thể hữu ích.) Vì vậy, cuối cùng tôi chỉ sử dụng một <video />thẻ và đặt thuộc tính src ngay trên chính thẻ video. CáccanPlayVideo('<mime type>') chức năng được sử dụng để xác định có hay không phải là trình duyệt cụ thể phát video đầu vào. Các hoạt động sau đây trong FireFox và Chrome.

Ngẫu nhiên, cả FireFox và Chrome đều đang chơi định dạng "ogg", mặc dù Chrome khuyến nghị "webm". Tôi đặt kiểm tra hỗ trợ trình duyệt của "ogg" trước tiên chỉ vì các bài đăng khác đã đề cập rằng FireFox thích nguồn ogg trước (nghĩa là <source src="..." type="video/ogg"/>). Nhưng, tôi chưa kiểm tra (và rất nghi ngờ) liệu thứ tự trong mã có tạo ra sự khác biệt nào không khi đặt "src" trên thẻ video.

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

Tôi đã nghiên cứu điều này khá lâu và tôi đang cố gắng làm điều tương tự, vì vậy hy vọng điều này sẽ giúp được người khác. Tôi đã sử dụng crossbrowsertesting.com và thực sự thử nghiệm điều này trong hầu hết mọi trình duyệt mà con người biết đến. Giải pháp tôi hiện đang hoạt động trong Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.

Thay đổi nguồn động

Việc thay đổi video một cách linh hoạt là rất khó và nếu bạn muốn Flash dự phòng, bạn sẽ phải xóa video khỏi DOM / trang và thêm lại để Flash sẽ cập nhật vì Flash sẽ không nhận ra các cập nhật động cho vars Flash. Nếu bạn sẽ sử dụng JavaScript để thay đổi nó một cách linh hoạt, tôi sẽ loại bỏ hoàn toàn tất cả các <source>yếu tố và chỉ sử dụng canPlayTypeđể đặt srcJavaScript và breakhoặc returnsau loại video được hỗ trợ đầu tiên và đừng quên cập nhật tự động flash var mp4. Ngoài ra, một số trình duyệt sẽ không đăng ký rằng bạn đã thay đổi nguồn trừ khi bạn gọi video.load(). Tôi tin rằng vấn đề với .load()bạn đã gặp phải có thể được khắc phục bằng cách gọi đầu tiênvideo.pause(). Xóa và thêm các yếu tố video có thể làm chậm trình duyệt vì nó tiếp tục đệm video bị xóa, nhưng có một cách giải quyết .

Hỗ trợ nhiều trình duyệt

Theo như phần trình duyệt chéo thực tế, tôi cũng đã đến Video cho mọi người . Tôi đã thử plugin MediaelementJS Wordpress, hóa ra nó gây ra nhiều vấn đề hơn nó đã giải quyết. Tôi nghi ngờ các vấn đề là do trình cắm Wordpress chứ không phải thư viện thực sự. Tôi đang cố gắng tìm thứ gì đó hoạt động mà không cần JavaScript, nếu có thể. Cho đến nay, những gì tôi nghĩ ra là HTML đơn giản này:

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

Lưu ý quan trọng :

• Cuối cùng, việc đặt ogg là đầu tiên <source>vì Mac OS Firefox thoát khỏi việc cố gắng phát video nếu nó gặp MP4 như lần đầu tiên <source>.
• Các loại MIME chính xác là các tệp .ogv quan trọng video/ogg, không phải video/ogv
• Nếu bạn có video HD, bộ chuyển mã tốt nhất tôi tìm thấy cho các tệp OGG chất lượng HD là Firefogg
• Các .iphone.mp4tập tin là dành cho iPhone 4+ mà sẽ chỉ chơi video là MPEG-4 với H.264 Baseline 3 Video và âm thanh AAC. Bộ chuyển mã tốt nhất tôi tìm thấy cho định dạng đó là Handbrake, sử dụng cài đặt sẵn iPhone & iPod Touch sẽ hoạt động trên iPhone 4+, nhưng để iPhone 3GS hoạt động, bạn cần sử dụng cài đặt sẵn iPod có độ phân giải thấp hơn nhiều mà tôi đã thêm video.iphone3g.mp4.
• Trong tương lai, chúng tôi sẽ có thể sử dụng một mediathuộc tính trên các <source>yếu tố để nhắm mục tiêu các thiết bị di động có truy vấn phương tiện, nhưng ngay bây giờ các thiết bị cũ của Apple và Android không hỗ trợ đủ tốt.

Chỉnh sửa :

• Tôi vẫn đang sử dụng Video cho mọi người nhưng giờ tôi đã chuyển sang sử dụng FlowPlayer, để kiểm soát dự phòng Flash, có API JavaScript tuyệt vời có thể được sử dụng để kiểm soát nó.

Tôi có một ứng dụng web tương tự và hoàn toàn không phải đối mặt với vấn đề đó. Những gì tôi làm là một cái gì đó như thế này:

var sources = new Array();

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

Sau đó, khi tôi muốn thay đổi các nguồn, tôi có một chức năng thực hiện như thế này:

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

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

}

Tôi làm điều này để người dùng có thể truy cập danh sách phát, nhưng bạn có thể kiểm tra userAgent và sau đó tải tệp thích hợp theo cách đó. Tôi đã thử sử dụng nhiều thẻ nguồn như mọi người trên internet đã đề xuất, nhưng tôi thấy nó sạch hơn và đáng tin cậy hơn nhiều khi thao tác thuộc tính src của một thẻ nguồn. Đoạn mã trên được viết từ bộ nhớ, vì vậy tôi có thể đã xem qua một số chi tiết hte, nhưng ý tưởng chung là tự động thay đổi thuộc tính src của thẻ nguồn bằng cách sử dụng javascript, khi thích hợp.

Hãy thử di chuyển nguồn OGG lên đầu. Tôi đã nhận thấy Firefox đôi khi bị lẫn lộn và dừng trình phát khi trình phát mà nó muốn chơi, OGG, không phải là lần đầu tiên.

Đáng để thử.

Một cách khác bạn có thể làm trong 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();
    });

Sử dụng JavaScript và 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>