HTML 5 비디오 또는 오디오 재생 목록

HTML 5 비디오 또는 오디오 재생 목록

---

<video>또는 <audio>태그를 사용하여 재생 목록을 재생하고 제어 할 수 있습니까?

내 목표는 비디오 / 노래가 언제 재생되었는지 확인하고 다음 곡을 취하고 볼륨을 변경하는 것입니다.

---

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

여기에 더 많은 정보

---

여기에 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;
}​

---

cameronjonesweb에서 자바 스크립트 코드를 약간 최적화했습니다. 이제 클립을 배열에 추가 할 수 있습니다. 다른 모든 작업은 자동으로 수행됩니다.

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

---

Html5와 상호 작용하기위한 자바 스크립트 프레임 워크 인 Popcorn.js를 살펴보아야합니다. http://popcornjs.org/documentation

---

jPlayer is a free and open source HTML5 Audio and Video library that you may find useful. It has support for playlists built in: http://jplayer.org/

---

There's no way to define a playlist using just a <video> or <audio> tag, but there are ways of controlling them, so you can simulate a playlist using JavaScript. Check out sections 4.8.7, 4.8.9 (especially 4.8.9.12) of the HTML5 spec. Hopefully the majority of methods and events are implemented on modern browsers such as Chrome and Firefox (latest versions, of course).

---

Yep, you can simply point your src tag to a .m3u playlist file. A .m3u file is easy to construct -

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

Well, it turns out playlist m3u files are supported on the iPhone, but not on much else including Safari 5 which is kind of sad. I'm not sure about Android phones but I doubt they support it either since Chrome doesn't. Sorry for the misinformation.

---

It has been done there : http://www.jezra.net/projects/pageplayer

---

I wasn't satisfied with what was offered, so here's my proposal, using 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>

You only have to edit the playlist array, and you're done

참고URL : https://stackoverflow.com/questions/2551859/html-5-video-or-audio-playlist