使用 VideoJS 或类似软件播放 IPTV 直播电视流答案

【问题标题】：Playing a IPTV live tv stream with VideoJS or similar使用 VideoJS 或类似软件播放 IPTV 直播电视流
【发布时间】：2022-06-21 12:03:21
【问题描述】：

我正在尝试使用 videojs 播放直播电视频道。我尝试了各种方法，但总是得到“找不到此媒体的兼容来源”。错误。其他视频播放正常。

网址在 VLC 中播放良好，编解码器将流显示为“MPEG-H Part2/HEVC (H.265) (hevc)”。

我也尝试过各种浏览器，chrome、firefox、safari 和 edge。

这是代码的骨架。有办法玩吗？

<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>

<video id='live-video' class='video-js vjs-default-skin' controls>
</video>

<script>
  var player = videojs('live-video');
  player.src({ src:'https://www.example.com/play.php?OTUxE2NDUN', type:'application/x-mpegurl'});
  player.play();
</script>

【问题讨论】：

我从来不需要这些。但是，我确实注意到 'class=' 规范需要两个额外的规范，根据：docs.videojs.com/tutorial-live.html 希望这会有所帮助。
谢谢，我假设你在谈论 'vjs-live' 和 'vjs-liveui' ？添加这些没有任何区别。
与此同时，我一直在玩，对整个“实时”概念进行更多实验。无论您尝试使用“hls”还是“dash”，您的代码看起来都不清楚。无论如何，我一直在（仅）玩“hls”，我将有一些结果要报告，再过一两天。
@David 谢谢，我尝试了上面的很多变体，hls，dash，不同的类型属性，但没有运气。如果你在这方面取得了一些成功，那就太好了。我尝试了一个使用 ffmpeg 创建 hls 流的流类，但它也无法播放。我希望直接播放它而不进行任何转换。

标签： javascript video video-streaming video.js

【解决方案1】：

我已经得出结论，您在基本帖子（问题）中显示的编码没有任何问题。我推测您使用的实际源 URL 不是有效的 HLS 流，因此是您所述错误的原因。（它可能是一个有效的 DASH 流，但我有理由确定您的代码不适用于 DASH 流。）

这是一些与您的等效的工作代码，除了它使用 Video.js 实时教程中提到的更新的（推荐的）UI/API。为什么下面的代码有效的关键在于它确实引用了一个有效的 HLS 流......（我在互联网上偶然发现的一个 URL）。


<!DOCTYPE html>
<html>
<head>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<!--  [ Note:  HLS code is "built-in" to video.js, as of version 4.x, so we should NOT include (possibly older?) HLS support separately ]  -->
<!--   script src="https://unpkg.com/videojs-contrib-dash/dist/videojs-dash.js"></script  -->
<!--   script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script -->
</head>

<video id='live-video' class='video-js   vjs-default-skin    vjs-live  vjs-liveui'    width='640' height='360'  controls  muted>
</video>

<script>
// The extra 'liveui' arg below, and two extra classnames are not REQUIRED, but documentation-tutorial
// refers to it as the newer/preferred API    See:  https://docs.videojs.com/tutorial-live.html
   var  player = videojs('live-video', {liveui: true} );
   player.src({ src:'https://live.alarabiya.net/alarabiapublish/alarabiya.smil/playlist.m3u8', type:'application/x-mpegurl'});
   // Note: We begin with the stream playing, but the audio is initially 'muted' (see that attribute in video tag above )
   //   See:   https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted
   player.play();
  
  /*   Note: Their "playlist.m3u8" file in their URL contains these lines (this info helps us understand the goal of their HLS)
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=2130537,RESOLUTION=1920x1080,CODECS="avc1.4d4028,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_1080p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1292733,RESOLUTION=1280x720,CODECS="avc1.4d401f,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_720p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=557217,RESOLUTION=640x360,CODECS="avc1.77.30,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_360p/chunks.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=418515,RESOLUTION=426x240,CODECS="avc1.42c015,mp4a.40.2",CLOSED-CAPTIONS=NONE
alarabiapublish/alarabiya_240p/chunks.m3u8
*/
</script>
</body>
</html

【讨论】：

【解决方案2】：

这是在您的网页中播放流媒体视频的一种更简单的方法。您可以通过添加 video.js 网站指南中的参数和代码来根据自己的喜好对其进行自定义。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>UN Web TV</title>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js
</script>
</head>
<body>
<video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto" data-setup='{}'>
<source src="https://cdnapi.kaltura.com/p/2503451/sp/250345100/playManifest/entryId/1_gb6tjmle/protocol/https/format/applehttp/a.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video_1');
player.play();
</script>
</body>
</html>

【讨论】：