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

【问题标题】：How to implement videojs-dvrseekbar plugin correctly?如何正确实现 videojs-dvrseekbar 插件？
【发布时间】：2018-12-20 21:48:29
【问题描述】：

我想实现一个能够播放实时 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>

【问题讨论】：

您找到解决方案了吗？
你好，@SelimEmreToy 我刚刚回答了你的问题。你可以检查一下。我相信最后一个例子是最好的方法。

标签： javascript video-streaming video.js

【解决方案1】：

您好，在搜索了很多页面后，我找到了答案。在 videojs 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}); 新的用户界面在控制栏上显示 ProgressControl 组件，隐藏 LiveDisplay 组件，并在 Video.js 检测到正在播放的视频是实时的（通过 durationchange 事件）时显示新的 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>

【讨论】：

请注意，我能够使其与 HLS 流一起使用。我尝试了很多东西，但我无法使用 DASH 流实现它
这对我来说效果很好，但视频从当前直播开始。如何从头开始播放视频（开始 dvr）。不是来自现场？
所以你想让它像 DVR 一样开始，但你也想看直播对吧？或者你只是想要完整的 DVR 不直播？如果您想要第一个选项，我还没有看到这样的实施或要求实施这样的实施的人。但是，您可以从带有实时按钮选项的常规 DVR 开始。当页面加载时，它可以作为 DVR 启动，当点击实时按钮时，您可以加载上面的示例来创建这种错觉。
不，抱歉。我遇到的问题如下：例如我的 dvr 商店是 2 小时。如果我用 live-ui 打开播放器，播放器流是当前直播的。实时按钮显示红色指示灯。但我会从 dvr 开始播放（-2 小时）。