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

问题描述 投票:0回答:2

我正在尝试使用 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>
javascript video video-streaming video.js
2个回答
0
投票

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


0
投票

这是在您的网页中播放流媒体视频的更简单方法。您可以通过添加 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>
© www.soinside.com 2019 - 2024. All rights reserved.