dash.js プレーヤーを使用して .mpd ビデオを再生するための簡単な Web ページを作成しています。ビット レート セレクターは必須です。そのため、ビデオに controlbar.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>
以下に添付されている index.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>