How to integrate HLS.js and mp4's with Plyr

Question

is it possible to not hardcode the source of an hls file inside javascript but instead put the source in a <source> tag like regular mp4 files?

Use Case

I am running a website with the html5 based Plyr. So far, I have managed to get it running along with having the option of 4 resolutions to choose from, encoded with mp4 files. The video tag looks like this:

<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">
and so on....

However the issue is if I put a source with an .m3u8 file extension, Firefox complains it cannot play it since it's unsupported. Fair enough, except the hls demo on the github readme shows a codepen where the source is hardcoded in, like so:

<video id="video" controls></video>
<script>
var source = 'https://<url-to-m3u8-here
...

This cannot work in my use-case since as you saw above, I need the multiple sources for resolution switching until Plyr can do this with the manifest natively.

Is there any way to incorporate hls.js into Plyr so I can just specify a video tag like so?

<video id="video" controls poster="{URL}/poster.jpg playsinline>
<source src="{URL}/index.m3u8" type="application/x-mpegURL" size="Auto">
<source src="{URL}/1080.mp4 type="video/mp4" size="1080">
<source src="{URL}/720.mp4" type="video/mp4" size="720">

(I'm working to include the Auto tag)

score 1 · Answer 1 · answered Oct 23 '19 at 07:36

Hey i guess you need to do something like this:

HTML

<link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css">

<video id="player" controls preload="metadata">
    <source src="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8" type="application/x-mpegURL">
    <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_10mb.mp4">
</video>

<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>

JS

<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        var player = new Plyr(document.getElementById('player'), {
            //debug: true
        });
            player.on('ready', function(event){
                var instance = event.detail.plyr;

                var hslSource = null;
                var sources = instance.media.querySelectorAll('source'), i;
                for (i = 0; i < sources.length; ++i) {
                    if(sources[i].src.indexOf('.m3u8') > -1){
                        hslSource = sources[i].src;
                    }
                }

                if (hslSource !== null && Hls.isSupported()) {
                    var hls = new Hls();
                        hls.loadSource(hslSource);
                        hls.attachMedia(instance.media);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            console.log('MANIFEST_PARSED');
                        });
                }
            });
    });
</script>

How to integrate HLS.js and mp4's with Plyr

1 Answers1