Can I use a
<video>
or <audio>
tag to play a playlist, and to control them?A simple HTML5 media player with custom controls and WebVTT captions. A simple, accessible and customisable media player for Video, Audio, YouTube and Vimeo. If you think Plyr's good. Apr 06, 2017 How does HTML5 audio player work HTML5, different from HTML 4 or its old version, puts an end to audio plug-in like Microsoft Windows Media Player, Microsoft Silverlight, Apple QuickTime, Adobe Flash, etc. For playing an audio file in HTML, the tag of HTML5 audio must have 'audio' and 'source' tag.
My goal is to know when a video/song has finished to play and take the next and change its volume.
Derek 朕會功夫63.6k3737 gold badges143143 silver badges194194 bronze badges
xdevel2000xdevel20008,9073030 gold badges108108 silver badges180180 bronze badges
9 Answers
you could load next clip in the onend event like that
More information here
markcialmarkcial5,56333 gold badges2525 silver badges4040 bronze badges
I created a JS fiddle for this here:
First, your HTML markup looks like this:
Second, your JavaScript code via JQuery library will look like this:
And last but not least, your CSS:
Maziar BarziMaziar Barzi
I optimized the javascript code from cameronjonesweb a little bit. Now you can just add the clips into the array. Everything else is done automatically.
TaurusTaurus
You should take a look at Popcorn.js - a javascript framework for interacting with Html5 : http://popcornjs.org/documentation
brendanbrendan22.4k1616 gold badges6161 silver badges103103 bronze badges
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/
yagoogalyyagoogaly
There's no way to define a playlist using just a
FelixFelix<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).64.8k3838 gold badges138138 silver badges162162 bronze badges
Yep, you can simply point your src tag to a .m3u playlist file. A .m3u file is easy to construct -
-----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.
Shi3,68011 gold badge1919 silver badges3030 bronze badges
Marcus PopeMarcus Pope
It has been done there : http://www.jezra.net/projects/pageplayer
Laurent DebriconLaurent Debricon3,43222 gold badges1919 silver badges2121 bronze badges
I wasn't satisfied with what was offered, so here's my proposal, using jQuery :
You only have to edit the
playlist
array, and you're doneMrVaykadjiMrVaykadji