Как правильно реализовать плагин videojs-dvrseekbar? - PullRequest
Новая
       60

Как правильно реализовать плагин videojs-dvrseekbar?

0 голосов
/ 21 декабря 2018

Я хочу реализовать проигрыватель 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>

1 Ответ

0 голосов
/ 10 июня 2019

Здравствуйте, после поиска на многих страницах я нашел ответ.После videjs 7.xx функциональность плагина dvrseekbar добавлена ​​в videojs.Вам не нужно загружать или импортировать дополнительный плагин для этого.

Здесь объясняется https://github.com/videojs/video.js/blob/master/docs/guides/live.md

Новый пользовательский интерфейс в настоящее время включен, чтобы предотвратить нарушение обратной совместимости.Мы считаем, что новый пользовательский интерфейс намного лучше, и он, вероятно, станет новым по умолчанию в следующей основной версии.Если вы хотите использовать новый пользовательский интерфейс, вам нужно будет передать {liveui: true} во время настройки проигрывателя.Это можно сделать двумя способами:

Использование data-setup

Использование функции videojs

var player = videojs ('some-player-id', {liveui:правда});Новый пользовательский интерфейс отображает компонент ProgressControl на панели управления, скрывает компонент LiveDisplay и показывает новый компонент SeekToLive, когда Video.js обнаруживает, что воспроизводимое видео является живым (через событие durationchange).Наряду с обновлением 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>
...