Da sh. js Управление битрейтом с помощью ControlBar. js - PullRequest
Новая
       91

Da sh. js Управление битрейтом с помощью ControlBar. js

0 голосов
/ 26 февраля 2020

Мы создаем простую веб-страницу для воспроизведения видео .mpd с помощью проигрывателя da sh. js. Наличие селектора битрейта является обязательным, поэтому мы добавили панель управления. js к видео.

ControlBar правильно работает, так как селектор битрейта показывает доступные битрейты. Но при нажатии на кнопку мы не можем увидеть разницу.

Мы провели небольшое исследование, и рекомендуется использовать функцию player.setFastSwitchEnabled(true);, но мы получили следующую ошибку: 

Uncaught TypeError: player.setFastSwitchEnabled is not a function
at startVideo ((index):26)
at onload ((index):35)
at window.onload (jquery.waypoints.min.js:7)

Как можно мы реализуем функцию? Требуются ли какие-либо другие действия для изменения битрейта?

Нужно ли подключить функцию setQualityFor () к этой части кода: 

<li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
                    <li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
                    <li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
                    <li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
                    <li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
                    <li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
                    <li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
                    <li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
                    <li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
                    <li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
                    <li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
                  </ul>

Пожалуйста, найдите индекс . html прилагается ниже: 

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Video Europea</title>
  <meta name="description" content="">

  <link rel="stylesheet" href="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/controlbar.css">

  <!-- Links apariencia -->

  <script class="code"
    src="http://reference.dashif.org/dash.js/latest/contrib/akamai/controlbar/ControlBar.js"></script>
  <script class="code" src="http://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>

  <script class="code">
    function startVideo() {
      const url = 'http://videoeuropea.es/videos/Feria_DASH/Feria.mpd';
      var videoElement = document.querySelector(".videoContainer video");

      var player = dashjs.MediaPlayer().create();
      player.initialize(videoElement, url, true);
      var controlbar = new ControlBar(player);
      controlbar.initialize();

      player.setFastSwitchEnabled(true); 
    }
  </script>

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

</head>

<body onload="startVideo()" data-spy="scroll" data-target=".site-navbar-target" data-offset="100">
    <div class="dash-video-player code">
      <!-- HTML structure needed for the ControlBar -->
      <div class="videoContainer" id="videoContainer">
        <video preload="auto" autoplay="" src="blob:http://reference.dashif.org/682c3720-89f2-4987-8f30-494795fa6b10">
        </video>
        <div id="videoController" class="video-controller unselectable">
          <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
            <span id="iconPlayPause" class="icon-play"></span>
          </div>
          <span id="videoTime" class="time-display">00:00</span>
          <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
            <span class="icon-fullscreen-enter"></span>
          </div>
          <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
            <span class="icon-bitrate"></span>
          </div>
          <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01">
          <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
            <span id="iconMute" class="icon-mute-off"></span>
          </div>
          <div id="trackSwitchBtn" class="control-icon-layout hide" title="A/V Tracks">
            <span class="icon-tracks"></span>
          </div>
          <div id="captionBtn" class="btn-caption control-icon-layout hide" title="Closed Caption">
            <span class="icon-caption"></span>
          </div>
          <span id="videoDuration" class="duration-display">00:00:00</span>
          <div class="seekContainer">
            <div id="seekbar" class="seekbar seekbar-complete">
              <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
              <div id="seekbar-play" class="seekbar seekbar-play"></div>
            </div>
          </div>
          <div id="bitrateMenu" class="menu hide unselectable menu-item-unselected" style="left: 550px; top: 364px;">
            <div id="video">
              <div class="menu-sub-menu-title">Video</div>
              <ul id="videoContent" class="video-menu-content">
                <li id="video-bitrate-listItem_0" class="menu-item-selected"> Auto Switch</li>
                <li id="video-bitrate-listItem_1" class="menu-item-unselected">254 kbps (320x180)</li>
                <li id="video-bitrate-listItem_2" class="menu-item-unselected">507 kbps (320x180)</li>
                <li id="video-bitrate-listItem_3" class="menu-item-unselected">759 kbps (480x270)</li>
                <li id="video-bitrate-listItem_4" class="menu-item-unselected">1013 kbps (640x360)</li>
                <li id="video-bitrate-listItem_5" class="menu-item-unselected">1254 kbps (640x360)</li>
                <li id="video-bitrate-listItem_6" class="menu-item-unselected">1883 kbps (768x432)</li>
                <li id="video-bitrate-listItem_7" class="menu-item-unselected">3134 kbps (1024x576)</li>
                <li id="video-bitrate-listItem_8" class="menu-item-unselected">4952 kbps (1280x720)</li>
                <li id="video-bitrate-listItem_9" class="menu-item-unselected">9914 kbps (1920x1080)</li>
                <li id="video-bitrate-listItem_10" class="menu-item-unselected">14931 kbps (3840x2160)</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/aos.js"></script>

  <script src="js/main.js"></script>

</body>

</html>
...