Javascript Dash.js使用ControlBar.js进行比特率控制
我们正在构建一个简单的网页，使用dash.js播放器复制.mpd视频。必须有一个比特率选择器，这就是为什么我们在视频中添加了controlbar.js 当比特率选择器显示可用比特率时，ControlBar可以正确实现。但是，当点击按钮时，我们看不到区别 我们做了一个小调查，并启用了Javascript Dash.js使用ControlBar.js进行比特率控制,javascript,mpd,dash.js,Javascript,Mpd,Dash.js,我们正在构建一个简单的网页，使用dash.js播放器复制.mpd视频。必须有一个比特率选择器，这就是为什么我们在视频中添加了controlbar.js 当比特率选择器显示可用比特率时，ControlBar可以正确实现。但是，当点击按钮时，我们看不到区别 我们做了一个小调查，并启用了player.setFastSwitchEnabled（true）函数，但这是我们得到的错误： Uncaught TypeError: player.setFastSwitchEnabled is not a func
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>
自动切换
254kbps（320x180）
507kbps（320x180）
759kbps（480x270）
1013kbps（640x360）
1254kbps（640x360）
1883 kbps（768x432）
3134 kbps（1024x576）
4952 kbps（1280x720）
9914 kbps（1920x1080）
14931 kbps（3840x2160）
请查找下面所附的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>
视频欧洲
函数startVideo（）{
常量url=http://videoeuropea.es/videos/Feria_DASH/Feria.mpd';
var videoElement=document.querySelector（“.videoContainer video”）；
var player=dashjs.MediaPlayer（）.create（）；
初始化（videoElement，url，true）；
var controlbar=新的controlbar（播放器）；
初始化（）；
player.setFastSwitchEnabled（true）；
}
00:00
00:00:00
视频
自动切换
254kbps（320x180）
507kbps（320x180）
759kbps（480x270）
1013kbps（640x360）
1254kbps（640x360）
1883 kbps（768x432）
3134 kbps（1024x576）
4952 kbps（1280x720）
9914 kbps（1920x1080）
14931 kbps（3840x2160）
我认为您使用的是较旧版本的ControlBar.js。请确保从中获取最新的代码
setFastSwitchEnabled
已被删除。
现在，您需要执行以下操作来手动设置质量
在播放器上调用getSettings（）以获取设置
设置settings.streaming.abr.autoSwitchBitrate=false
用户player.setQuality（）从比特率列表设置质量
必须来这里了解如何从v2迁移