如何将HLS.js和mp4与Plyr集成

Question

是否可能不将hls文件的源硬编码在javascript中，而是将源放置在像常规mp4文件一样的<source>标签中？

用例

我正在使用基于html5的Plyr运行网站。 到目前为止，我已经设法使其运行并具有mp4编码编码的4种分辨率供您选择。 视频标签如下所示：

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

但是问题是如果我放一个带有.m3u8文件扩展名的源，Firefox抱怨说，由于不受支持，它无法播放它。 公平地说，除了github自述文件中的hls演示显示了一个硬编码源的codepen，如下所示：

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

在我的用例中，这是行不通的，因为如上所述，我需要多个源来进行分辨率切换，直到Plyr可以本地对清单执行此操作。

有什么方法可以将hls.js合并到Plyr中，这样我就可以指定视频标签了吗？

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

（我正在努力添加自动标签）

Answer 1

嘿，我想您需要执行以下操作：

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