web-dev-qa-db-ja.com

HTML 5ビデオまたはオーディオプレイリスト

<video>または<audio>タグを使用して、プレイリストを再生し、それらを制御できますか？

私の目標は、ビデオ/曲の再生がいつ完了したかを知り、次の曲を取り、音量を変更することです。

javascripthtmlhtml5audiovideo
64
xdevel2000

そのようなonendイベントで次のクリップをロードできます

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

詳細 こちら

64
markcial

ここで、このためのJSフィドルを作成しました。

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

まず、HTMLマークアップは次のようになります。

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

次に、JQueryライブラリを介したJavaScriptコードは次のようになります。

$(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")
    })
})​

最後になりましたが、CSS：

#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;
}​
11
Maziar Barzi

CameronjoneswebのJavaScriptコードを少し最適化しました。これで、クリップを配列に追加できます。他のすべては自動的に行われます。

<video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();">Your browser does not support the video tag.</video>

<script>
var nextsrc = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4"];
var Elm = 0; var Player = document.getElementById('Player');
Player.onended = function(){
    if(++Elm < nextsrc.length){         
         Player.src = nextsrc[Elm]; Player.play();
    } 
}
</script>
5
Taurus

Html5とやり取りするためのJavaScriptフレームワークであるPopcorn.jsをご覧ください： http://popcornjs.org/documentation

3
brendan

jPlayerは、無料でオープンソースのHTML5オーディオおよびビデオライブラリであり、便利です。組み込みのプレイリストをサポートしています： http://jplayer.org/

3
yagoogaly

<video>または<audio>タグだけを使用してプレイリストを定義する方法はありませんが、それらを制御する方法があるため、JavaScriptを使用してプレイリストをシミュレートできます。 HTML5仕様 のセクション4.8.7、4.8.9（特に4.8.9.12）を確認してください。メソッドとイベントの大部分がChromeやFirefox（もちろん最新バージョン）などの最新のブラウザに実装されていることを願っています。

1
Felix

はい、srcタグで.m3uプレイリストファイルを指定するだけです。 .m3uファイルは簡単に作成できます-

#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

----- UPDATE -----

まあ、プレイリストm3uファイルareはiPhoneでサポートされていますが、Safari 5を含む他の多くではサポートされていません。 Android電話についてはよくわかりませんが、Chromeはサポートしていません。誤報でごめんなさい。

1
Marcus Pope

私は提供されたものに満足していなかったので、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>

playlist配列を編集するだけで、完了です。

0
MrVaykadji

それはそこで行われました： http://www.jezra.net/projects/pageplayer

0
Laurent Debricon