Posso utilizzare un tag <video>
o <audio>
per riprodurre una playlist e controllarli?HTML 5 playlist video o audio
Il mio obiettivo è sapere quando un video/brano ha finito di suonare e prendere quello successivo e cambiarne il volume.
Posso utilizzare un tag <video>
o <audio>
per riprodurre una playlist e controllarli?HTML 5 playlist video o audio
Il mio obiettivo è sapere quando un video/brano ha finito di suonare e prendere quello successivo e cambiarne il volume.
è possibile caricare clip successiva in caso onend come quello
<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 />
Maggiori informazioni here
sarà presente non solo giocare 2 file, che ne dici di gioco dicono 10 file audio – defau1t
penso che tutto quello che avrei dovuto fare è creare un array di URL (chiamiamolo myArray), crea un var i = 1, inizialmente impostato nextVideo su myArray [0] e sotto videoPlayer.src = nextVideo; metti nextVideo = myArray [i]; i ++; In questo modo, ogni volta che termina il video corrente, verrà caricato il video successivo e l'url successivo sarà pronto. PS. scusa per la completa mancanza di formattazione, sono al lavoro e volevo solo rispondere rapidamente – DanTheMan
Per coloro che desiderano effettuare il loop al primo video dopo che il secondo termina qui è un adattamento molto semplice della risposta di cui sopra: Fiddle: http://jsfiddle.net/P38aV/ – cameronjonesweb
Non c'è modo di definire una playlist utilizzando solo un tag <video>
o <audio>
, ma ci sono modi per controllarli, in modo da poter simulare una playlist utilizzando JavaScript. Controlla le sezioni 4.8.7, 4.8.9 (in particolare 4.8.9.12) di HTML5 spec. Speriamo che la maggior parte dei metodi e degli eventi siano implementati su browser moderni come Chrome e Firefox (ultime versioni, ovviamente).
E 'stato fatto lì: http://www.jezra.net/projects/pageplayer
Sì, si può semplicemente puntare il tag src a un file di playlist .m3u. Un file .m3u è facile da costruire -
#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
----- ----- AGGIORNAMENTO
Beh, si scopre file M3U playlist sono supportato su l'iPhone, ma non su molto altro incluso Safari 5 che è un po 'triste. Non sono sicuro dei telefoni Android, ma dubito che lo supportino da quando Chrome non funziona. Scusa per la disinformazione.
Questo in realtà non è vero. Le specifiche HTML5 non supportano i file di playlist di m3u, tuttavia esiste un plugin jquery http://plugins.jquery.com/plugin-tags/m3u che aggiunge il supporto. – huntaub
è un po 'vero ...;) –
Si dovrebbe dare un'occhiata a Popcorn.js - un framework javascript per interagire con Html5: http://popcornjs.org/documentation
JPlayer è un libero e open source HTML5 audio e Videoteca che si possono trovare utili.Ha il supporto per le playlist costruito in: http://jplayer.org/
ho creato un violino JS per questo qui:
http://jsfiddle.net/Barzi/Jzs6B/9/
primo luogo, il codice HTML simile a questo:
<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>
In secondo luogo, il tuo codice JavaScript tramite libreria JQuery sarà simile al seguente:
$(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")
})
})
E, ultimo ma non meno importante, il vostro 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;
}
non ero soddisfatto di quello che è stato offerto, quindi ecco la mia proposta, utilizzando 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>
basta modificare il playlist
array, e il gioco è fatto
Ho ottimizzato un po 'il codice javascript da cameronjonesweb. Ora puoi semplicemente aggiungere le clip nell'array. Tutto il resto è fatto automaticamente.
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>
+1 per interesse per le nuove tecnologie senza flash – markcial