当前位置： 文江博客话题详情

使用 VideoJS 或类似工具播放 IPTV 直播电视流

发布于 2025-01-09 01:36:12 字数 869 浏览 0 评论 0原文

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

该 URL 在 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>
原文

I'm trying to play live tv channel with videojs. I've tried various ways but always get "No compatible source was found for this media." error. Other videos are playing fine.

The url plays fine in VLC and the codec shows the stream as "MPEG-H Part2/HEVC (H.265) (hevc)".

I've tried across a range of browsers too, chrome, firefox, safari and edge.

This is the bones of the code. Is there a way to play it ?

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

人│生佛魔见 2025-01-16 01:36:12

我得出的结论是，您在基本帖子（问题）中显示的编码没有任何问题。我推测您使用的实际源 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

I've concluded there is nothing wrong with the coding you show in your base posting (question). I speculate that the ACTUAL source URL you were using is NOT a valid HLS stream, and hence the cause of your stated error.
(It's possible that it is a valid DASH stream, but I'm reasonably certain
your code would NOT work with a DASH stream.)

Here's is some working code that is equivalent to yours, except that it
uses the newer (recommended) UI / API, mentioned in the Video.js live tutorial.
The key to WHY the code below works is simply that it DOES reference a valid HLS stream...(a URL that I stumbled upon, on the Internet).


<!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
回复 原文
冬天旳寂寞 2025-01-16 01:36:12

这是在网页中播放流视频的更简单的方法。您可以通过添加 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>

Here is a simpler method of playing streaming video in your webpage. You can customize it to your liking by adding parameters and code from the video.js website guide.

<!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>
回复 原文
~没有更多了~

关于作者

记忆消瘦

暂无简介

文章
评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

微信用户

文章 0 评论 0

小情绪

文章 0 评论 0

追我者格杀勿论

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

笨死的猪

文章 0 评论 0

彭明超

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文