1

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

用例

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

<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 演示显示了一个代码笔，其中源代码被硬编码，如下所示：

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

（我正在努力包含 Auto 标签）

4

1 回答 1

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>
于 2019-10-23T07:36:50.670 回答