DescriptionSurprising as it may be, VideoJS does not natively support M3U format playlists.
I hacked together a translator yesterday whilst fooling around with something else, so it'd be good to take that work and translate it into something which can be used here.
Essentially, what's needed is to fetch the M3U and iterate over its items in order to build a JSON object which can then be passed into the videojs-playlist plugin (may also want to consider adding support for videojs-playlist-ui at the same time).
Activity
2019-04-02 17:42:42
2019-04-02 17:42:42
2019-04-19 11:56:49
2019-04-19 11:56:49
2019-12-15 11:29:35
2019-12-15 11:33:19
function parseM3U(){ window.videoList = [] lines = this.responseText.split('\n'); domain = window.location.hostname; var o; for (var i=0; i<lines.length; i++){ if (lines[i][0] == "/" && lines[i] != "/shuffle.m3u"){ o = { sources : [ { src: 'https://'+domain+lines[i], type: 'video/mp4' } ] } window.videoList.push(o); } } window.player.playlist(window.videoList); window.player.playlist.autoadvance(0); // play all window.player.playlist.first(); window.player.play(); }As we can see, this happens after the player has been instantiated, so for each video it's just a case of pushing the URL into the player's playlist. The function does assume that the video will be of type
2019-12-15 12:29:39
View Commit | View Changes
2019-12-15 12:57:40
View Commit | View Changes
2019-12-15 13:01:27
As we can see in their example call, it uses sources information that we just don't have available when using a M3U as the original source:
player.playlist([{ name: 'Disney\'s Oceans 1', description: 'Explore the depths of our planet\'s oceans. ' + 'Experience the stories that connect their world to ours. ' + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' + 'sed do eiusmod tempor incididunt ut labore et dolore magna ' + 'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ' + 'laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure ' + 'dolor in reprehenderit in voluptate velit esse cillum dolore eu ' + 'fugiat nulla pariatur. Excepteur sint occaecat cupidatat non ' + 'proident, sunt in culpa qui officia deserunt mollit anim id est ' + 'laborum.', duration: 45, sources: [ { src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' }, { src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' }, ], // you can use <picture> syntax to display responsive images thumbnail: [ { srcset: 'test/example/oceans.jpg', type: 'image/jpeg', media: '(min-width: 400px;)' }, { src: 'test/example/oceans-low.jpg' } ] },What we have available is literally just the URL to the media file.
The result is that the plugin generates a div with a grey background, there's nothing really visible there at all.
The reason I've left the hooks in place is I'm not averse to building a "special" playlist format (maybe JSON?) which does contain this information. The plugin will probably be quite useful for that. In the meantime the limited things it does pull in for an M3U have no negative impact.
To finish off this issue then, probably need to look at adding a couple of buttons to the player - Next/Previous - so that it's possible to navigate through the playlist
2019-12-15 13:34:55
I'm going to mark this FR as done - given the issues with
2019-12-15 13:35:04
2019-12-15 13:35:04
2019-12-15 13:35:09
2019-12-15 13:35:40
View Commit | View Changes