HTML 5 danh sách phát video hoặc âm thanh

Question

Tôi có thể sử dụng thẻ <video> hoặc <audio> để phát danh sách phát và kiểm soát chúng không?

Mục tiêu của tôi là biết thời điểm video/bài hát kết thúc để phát và tiếp tục phát và thay đổi âm lượng.

Answer 1

bạn có thể tải đoạn tiếp theo trong trường hợp onend như vậy thông tin

<script type="text/javascript"> 
var nextVideo = "path/of/next/video.mp4"; 
var videoPlayer = document.getElementById('videoPlayer'); 
videoPlayer.onended = function(){ 
    videoPlayer.src = nextVideo; 
} 
</script> 
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls /> 

More here

Answer 2

Không có cách nào để xác định danh sách phát chỉ bằng cách sử dụng thẻ <video> hoặc <audio>, nhưng có nhiều cách kiểm soát chúng, vì vậy bạn có thể mô phỏng danh sách phát bằng JavaScript. Xem các phần 4.8.7, 4.8.9 (đặc biệt là 4.8.9.12) của HTML5 spec. Hy vọng rằng phần lớn các phương pháp và sự kiện được triển khai trên các trình duyệt hiện đại như Chrome và Firefox (các phiên bản mới nhất, tất nhiên).

Answer 3

Nó đã được thực hiện có: http://www.jezra.net/projects/pageplayer

Answer 4

Yep, bạn chỉ có thể trỏ thẻ src của bạn để tệp danh sách phát .m3u. Một tập tin m3u rất dễ dàng để xây dựng -

#hosted mp3's need absolute paths but file system links can use relative paths 
http://servername.com/path/to/mp3.mp3 
http://servername.com/path/to/anothermp3.mp3 
/path/to/local-mp3.mp3 

----- CẬP NHẬT -----

Vâng, nó quay ra file m3u playlist là hỗ trợ trên iPhone, nhưng không phải trên nhiều người khác bao gồm cả Safari 5 mà là loại buồn. Tôi không chắc chắn về điện thoại Android nhưng tôi nghi ngờ họ hỗ trợ nó kể từ khi Chrome không. Xin lỗi vì thông tin sai lạc.

Answer 5

Bạn nên có một cái nhìn tại Popcorn.js - một khuôn khổ javascript để tương tác với Html5: http://popcornjs.org/documentation

Answer 6

jPlayer là một nguồn mở miễn phí HTML5 Audio và Thư viện băng hình mà bạn có thể thấy hữu ích.Nó có hỗ trợ cho các danh sách nhạc được xây dựng trong: http://jplayer.org/

Answer 7

Tôi tạo ra một fiddle JS cho đây này:

http://jsfiddle.net/Barzi/Jzs6B/9/

Đầu tiên, đánh dấu HTML của bạn trông như thế này:

<video id="videoarea" controls="controls" poster="" src=""></video> 

<ul id="playlist"> 
    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li> 
    <li movieurl="VideoURL2.webm">Second video</li> 
    ... 
    ... 
</ul> 

Thứ hai, mã JavaScript của bạn qua thư viện JQuery sẽ trông giống như sau:

$(function() { 
    $("#playlist li").on("click", function() { 
     $("#videoarea").attr({ 
      "src": $(this).attr("movieurl"), 
      "poster": "", 
      "autoplay": "autoplay" 
     }) 
    }) 
    $("#videoarea").attr({ 
     "src": $("#playlist li").eq(0).attr("movieurl"), 
     "poster": $("#playlist li").eq(0).attr("moviesposter") 
    }) 
})​ 

.210

Và cuối cùng nhưng không kém, CSS của bạn:

#playlist { 
    display:table; 
} 
#playlist li{ 
    cursor:pointer; 
    padding:8px; 
} 
#playlist li:hover{ 
    color:blue;       
} 
#videoarea { 
    float:left; 
    width:640px; 
    height:480px; 
    margin:10px;  
    border:1px solid silver; 
}​ 

Answer 8

tôi đã không hài lòng với những gì đã được cung cấp, vì vậy đây là đề nghị của tôi, sử dụng jQuery:

  <div id="playlist"> 
       <audio id="player" controls preload="metadata" volume="1"> 
        <source src="" type="audio/mpeg"> 
        Sorry, this browser doesn't support HTML 5.0 
       </audio> 
       <ul></ul> 
      </div> 

      <script> 
       var folder = "audio"; 
       var playlist = [ 
        "example1.mp3", 
        "example2.mp3" 
       ]; 
       for (var i in playlist) { 
        jQuery('#playlist ul').append('<li>'+playlist[i]+'</li>'); 
       } 

       var player = document.getElementById('player'); 
       var playing = playlist[0]; 
       player.src = folder + '/' + playing; 

       function display(id) { 
        var list = jQuery('#playlist ul').children(); 
        list.removeClass('playing'); 
        jQuery(list[id]).addClass('playing'); 
       } 

       display(0); 

       player.onended = function(){ 
        var ind_next = playlist.indexOf(playing) + 1; 

        if (ind_next !== 0) { 
         player.src = folder + '/' + playlist[ind_next]; 
         playing = player.src; 
         display(ind_next) 
         player.play(); 
        } 
       } 
      </script> 

Bạn chỉ cần chỉnh sửa playlist mảng và bạn đã hoàn thành

Answer 9

Tôi đã tối ưu hóa mã javascript từ cameronjonesweb một chút. Bây giờ bạn chỉ có thể thêm các clip vào mảng. Mọi thứ khác được thực hiện tự động.

var nextVideo = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4","http://www.w3schools.com/html/movie.mp4"]; 
 
var curVideo = 0; 
 
var videoPlayer = document.getElementById('videoPlayer'); 
 
videoPlayer.onended = function(){ 
 
\t \t ++curVideo; 
 
    if(curVideo < nextVideo.length){  \t \t 
 
     videoPlayer.src = nextVideo[curVideo];   
 
    } 
 
}

<video width="320" height="240" autoplay controls id="videoPlayer"> 
 
    <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
 
    Your browser does not support the video tag. 
 
</video>