videojs 网络播放器中未播放实时流媒体答案

【问题标题】：Live streaming is not playing in videojs web playervideojs 网络播放器中未播放实时流媒体
【发布时间】：2020-06-22 10:30:46
【问题描述】：

我正在尝试使用 videojs 播放直播电视频道流。未播放直播，但正在播放其他视频。这是我的所有代码。在 html 文件中，有一个直播电视频道流媒体 m3u8 链接。我想在我的网络视频播放器中直播这个频道。有什么问题？

HTML 文件：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Responsive Video.js Example (v4.3)</title>
  <link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.3/video.js"></script>
  <script>
    videojs.options.flash.swf = "video-js.swf"
  </script>
</head>

<body>
  <h1>Responsive Video.js Example (v4.3)</h1>
  <p></p>
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" data-setup='{ "asdf": true }' poster="http://video-js.zencoder.com/oceans-clip.png">
        <source src="http://almonqith.tv:8134/hls-live/livepkgr/_definst_/livestream/livestream.m3u8" type='video/mp4'>
        <source src="http://almonqith.tv:8134/hds-live/livepkgr/_definst_/livestream/livestream.f4m" type='video/mp4'>
      </video>

  <script src="js/index.js"></script>
</body>
</html>

JS 文件：

videojs.autoSetup();

videojs('my_video_1').ready(function() {
  console.log(this.options()); //log all of the default videojs options

  // Store the video object
  var myPlayer = this,
    id = myPlayer.id();
  // Make up an aspect ratio
  var aspectRatio = 264 / 640;

  function resizeVideoJS() {
    var width = document.getElementById(id).parentElement.offsetWidth;
    myPlayer.width(width).height(width * aspectRatio);

  }

  // Initialize resizeVideoJS()
  resizeVideoJS();
  // Then on resize call resizeVideoJS()
  window.onresize = resizeVideoJS;
});

【问题讨论】：

标签： javascript html5-video video.js

【解决方案1】：

这是一个非常旧的 Video.js 版本，它不支持没有附加组件的流格式。如果您升级到 v7.x（当前为 7.8.2），它默认包含 HLS 和 DASH 支持。 type 属性也应更正为 application/x-mpegURL 和 application/dash+xml，以便以正确的格式处理。

【讨论】：