Question

我想实现一个能够播放实时DVR流的videoJS播放器。它应该可以播放直播，但用户应该可以像过去30分钟一样返回并观看。

我尝试使用videojs-dvrseekbar插件，如以下网页https://www.npmjs.com/package/videojs-dvrseekbar所示。

就像在网页中一样，我尝试了以下

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-dvrseekbar.min.js"></script>
<script>
   var player = videojs('my-video');

   player.dvrseekbar();
</script>

我期待有一个视频栏，您可以跳回去，但它就像实时视频一样播放。由于我不明白的原因，有时会出现一个短条，您无法移动它。但是今天我可以移动它，DVR正在工作，唯一的问题是它太短了。但是，当我刷新页面时，它又消失了。我不明白为什么发生这些事情。插件页面上没有足够的信息。我的整个代码如下：

<video id="player" class="video-js vjs-default-skin" style="width: 100%;" height="400" controls></video>

<script>
  var player = videojs('player');
  player.ready(function() {
      player.src({
        src: srcurl,
        src: 'https:..../Manifest.mpd',
        type: 'application/dash+xml'});

      player.dvrseekbar();

    });

</script>

Answer 1

您好，在搜索许多页面后，我找到了答案。在videjs 7.xx之后，dvrseekbar插件功能已添加到videojs。您无需为此下载或导入额外的插件。

这里https://github.com/videojs/video.js/blob/master/docs/guides/live.md

进行了说明

当前已选择加入新的用户界面，以防止向后兼容。我们认为新的用户界面要好得多，并且很可能在下一个主要版本中成为新的默认界面。如果您想使用新的用户界面，则必须在播放器设置过程中传递{liveui：true}。这可以通过两种方式完成：

使用数据设置

使用videojs函数

var player = videojs（'some-player-id'，{liveui：true}）; 当Video.js检测到正在播放的视频是直播的（通过durationchange事件）时，新的用户界面在控件栏上显示ProgressControl组件，隐藏LiveDisplay组件，并显示新的SeekToLive组件。随着ProgressControl的更新，我们还更新了播放器上的所有时间工具提示，以指示当前当前时间为负数，而不是寻找特定时间。

这是一个简单的示例：

<link href="../dist/video-js.css" rel="stylesheet" type="text/css">
<script src="../dist/video.js"></script>
<script>
<video-js id="vid1" controls preload="auto" width="640"  height="264">
     <source src="https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8" type="application/x-mpegURL">
</video-js>

<script>
    var vid = document.getElementById('vid1');
    var liveui = true

    if (videojs.browser.IS_ANDROID) {
        liveui = false;
    }
    var player = videojs(vid, {liveui: liveui});
</script>

但是，当我尝试时，我遇到了很多问题，但是它没有正常工作。我还必须在css文件中进行一些更改。

但是，我找到了一个很好的liveui功能示例。您可以在https://codepen.io/facundofernandez/pen/LmLPVW上进行检查。这是该示例的代码。

    <!DOCTYPE html>
    <html lang="en" >

    <head>
      <meta charset="UTF-8">
      <title>Videojs 7.5 liveui</title>


      <link rel='stylesheet' href='https://unpkg.com/video.js@7.5.0/dist/video-js.min.css'>


    </head>

    <body>

      <div class="container">
      <video id="my-video" class="video-js" controls preload="auto" width="870" height="364" ></video>
    </div>
      <script src='https://unpkg.com/video.js@7.5.0/dist/video.min.js'></script>



        <script  >

        let hls = {
      //src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',
      src:
      "https://akamai-axtest.akamaized.net/routes/lapd-v1-acceptance/www_c4/Manifest.m3u8",
      type: "application/x-mpegURL" };


        let options = {
          liveui: true,
          //liveTracker: true,
          userActions: {
            hotkeys: function (event) {
              console.log(event);
            } } };



        videojs.log.history.disable();
        videojs.log.history.clear();
        let readyPlayer = function () {
          this.src(hls);
        };

        let player = videojs("my-video", options, readyPlayer);

        console.log(player, player.liveTracker, player.liveTracker.startTracking());

        player.on("error", e => {
          console.log(
          "error:",
          player.error().MEDIA_ERR_SRC_NOT_SUPPORTED,
          player.error().code,
          player.error().message);

        });

        </script>




    </body>

    </html>

如何正确实现videojs-dvrseekbar插件？

1 个答案: