We are building a simple web page to reproduce .mpd video using the dash.js player. Having a bit rate selector is a must, that is why we added controlbar.js to the video.
ControlBar is implementent properly as the bitrate selector shows the available bit rates. But when clicking on the we cannot see the difference.
We did a small research and having the player.setFastSwitchEnabled(true); function is recommended but this is the error we got:
Uncaught TypeError: player.setFastSwitchEnabled is not a function
at startVideo ((index):26)
at onload ((index):35)
at window.onload (jquery.waypoints.min.js:7)
How can we implement the function? Is any other action needed in order to make the bitrate change?
Do we need to connect the setQualityFor() function to this part of the code:
<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>
Please, find the index.html attached below:
<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>
