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


3 Answers

私はここで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;
}​
Question

<video>タグまたは<audio>タグを使用してプレイリストを再生したり、コントロールすることはできますか?

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




jPlayerは無料でオープンソースのHTML5オーディオおよびビデオライブラリで、役に立つと思うかもしれません。 これは、 http://jplayer.org/ : http://jplayer.org/組み込まれたプレイリストをサポートしています。




うん、単純にあなたの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

- - -更新 - - -

さて、プレイリストm3uファイル iPhoneでサポートされていることが判明しましたが、悲しいことであるSafari 5をはじめとする他の多くのファイルでサポートされていません。 私はAndroidの携帯電話についてはわかりませんが、Chromeがサポートしていないため、Androidの携帯電話をサポートしているかどうかは疑問です。 誤った情報を申し訳ありません。









Related