如何使用 video.js 在 m3u8 中选择频道

Posted

技术标签:

【中文标题】如何使用 video.js 在 m3u8 中选择频道【英文标题】:How to choose channel in m3u8 with video.js 【发布时间】:2020-08-11 08:52:29 【问题描述】:

我正在使用 video.js 播放 m3u8,这个文件包含多个频道。 我想显示频道列表并选择其中任何一个播放。 我已经搜索过,但我找不到这个功能。 这是源代码

<video-js id="my_video_1" class="vjs-default-skin" controls preload="auto"  >
    <source src="--m3u8 file path--" type="application/x-mpegURL">
  </video-js>

  <script src="https://unpkg.com/video.js/dist/video.js"></script>
  <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>

  <script>
    var player = videojs('my_video_1');

  </script>

这是我的 m3u8 文件内容

#EXTM3U 
#EXTINF:0,##### |AR| MOROCCO ##### 
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/3547 
#EXTINF:0,|AR| CORONA VIRUS INFO 
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/113221 
#EXTINF:0,|AR| AL AOULA INTER 
line.ma-cobra.com:80/Cesar2/Y5SNvNqGfyxH3Qb/2189 

现在有 3 个 url(我称之为频道,我不知道调用这个频道是否正确)所以我想显示包含这 3 个链接的菜单并想单击一个查看它。谢谢

【问题讨论】:

“渠道”是什么意思? HLS 中没有这样的概念。您的意思是变体还是演绎版? 请不要将新信息发布到 cmets。更新问题。 我更新了问题 【参考方案1】:

这是文档video.js。我认为您正在寻找的是更改视频的来源。创建实例时,您可以使用任何事件更改源。

var player = videojs('some-video-id');

player.src(
  src: 'https://link.to./file.m3u8',
  type: 'application/x-mpegURL',
);

【讨论】:

【参考方案2】:

您似乎在同一个 HLS 主清单中组合不同的内容。主清单应该包含相同内容的不同再现,例如不同的质量级别或替代音频。 @joshua-joel-cleveland 是正确的。当您想要更改内容/频道时,您需要更改视频元素的 src 值。

【讨论】:

以上是关于如何使用 video.js 在 m3u8 中选择频道的主要内容,如果未能解决你的问题,请参考以下文章

vue使用video.js解决m3u8视频播放格式

video.js支持m3u8格式直播

播放 video.js ustream m3u8 文件流

使用 Video JS 播放 M3U8 或 TS 直播

H5播放m3u8 - <video><source src=“xx.m3u8“/></video> - 使用video.js+HLS插件

vue.js+video.js+videojs-contrib-hls支持PC端播放m3u8格式的视频