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

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>

我期待一个视频栏，你可以跳回去，但它只是像现场视频一样播放。由于我不明白的原因，有时会出现一个短条，您无法移动它。但是今天我能够 c\move 它并且 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

新的用户界面目前 opt-in 以防止破坏向后兼容性。我们觉得新的用户界面要好得多，它很可能成为下一个主要版本的新默认界面。如果您想使用新的用户界面，您必须在播放器设置期间传递 {liveui: true}。这可以通过两种方式完成：

使用data-setup

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

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

How to implement videojs-dvrseekbar plugin correctly?

javascript

video-streaming

video.js