aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/dashjs/ControlBar.js690
-rw-r--r--assets/dashjs/controlbar.css268
-rw-r--r--assets/dashjs/icomoon.ttfbin0 -> 4688 bytes
3 files changed, 958 insertions, 0 deletions
diff --git a/assets/dashjs/ControlBar.js b/assets/dashjs/ControlBar.js
new file mode 100644
index 0000000..ee52fc6
--- /dev/null
+++ b/assets/dashjs/ControlBar.js
@@ -0,0 +1,690 @@
+/**
+ * The copyright in this software is being made available under the BSD License,
+ * included below. This software may be subject to other third party and contributor
+ * rights, including patent rights, and no such rights are granted under this license.
+ *
+ * Copyright (c) 2013, Dash Industry Forum.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without modification,
+ * are permitted provided that the following conditions are met:
+ * * Redistributions of source code must retain the above copyright notice, this
+ * list of conditions and the following disclaimer.
+ * * Redistributions in binary form must reproduce the above copyright notice,
+ * this list of conditions and the following disclaimer in the documentation and/or
+ * other materials provided with the distribution.
+ * * Neither the name of Dash Industry Forum nor the names of its
+ * contributors may be used to endorse or promote products derived from this software
+ * without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS AS IS AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+ * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
+ * IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT,
+ * INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
+ * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+ * WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+ * POSSIBILITY OF SUCH DAMAGE.
+ */
+var ControlBar = function (dashjsMediaPlayer) {
+
+ var player = dashjsMediaPlayer,
+ video,
+ videoContainer,
+ captionMenu = null,
+ bitrateListMenu = null,
+ trackSwitchMenu = null,
+ menuHandlersList = [],
+ lastVolumeLevel = NaN,
+ seeking = false,
+ videoControllerVisibleTimeout = 0,
+ videoController = document.getElementById("videoController"),
+ playPauseBtn = document.getElementById("playPauseBtn"),
+ bitrateListBtn = document.getElementById("bitrateListBtn"),
+ captionBtn = document.getElementById("captionBtn"),
+ trackSwitchBtn = document.getElementById("trackSwitchBtn"),
+ seekbar = document.getElementById("seekbar"),
+ muteBtn = document.getElementById("muteBtn"),
+ volumebar = document.getElementById("volumebar"),
+ fullscreenBtn = document.getElementById("fullscreenBtn"),
+ timeDisplay = document.getElementById("videoTime"),
+ durationDisplay = document.getElementById("videoDuration"),
+
+//************************************************************************************
+// PLAYBACK
+//************************************************************************************
+
+ togglePlayPauseBtnState = function () {
+ var span = document.getElementById('iconPlayPause');
+ if (player.isPaused()) {
+ span.classList.remove('icon-pause')
+ span.classList.add('icon-play');
+ } else {
+ span.classList.remove('icon-play');
+ span.classList.add('icon-pause');
+ }
+ },
+
+ onPlayPauseClick = function (e) {
+ togglePlayPauseBtnState.call(this);
+ player.isPaused() ? player.play() : player.pause();
+ },
+
+ onPlaybackPaused = function (e) {
+ togglePlayPauseBtnState();
+ },
+
+ onPlayStart = function (e) {
+ setTime(player.time());
+ updateDuration();
+ togglePlayPauseBtnState();
+ },
+
+ onPlayTimeUpdate = function (e) {
+ updateDuration();
+ if (!seeking) {
+ setTime(player.time());
+ seekbar.value = player.time();
+ }
+ },
+
+//************************************************************************************
+// VOLUME
+//************************************************************************************
+
+ toggleMuteBtnState = function () {
+ var span = document.getElementById('iconMute');
+ if (player.isMuted()) {
+ span.classList.remove('icon-mute-off');
+ span.classList.add('icon-mute-on');
+ } else {
+ span.classList.remove('icon-mute-on')
+ span.classList.add('icon-mute-off');
+ }
+ },
+
+ onMuteClick = function (e) {
+ if (player.isMuted() && !isNaN(lastVolumeLevel)) {
+ setVolume(lastVolumeLevel);
+ } else {
+ lastVolumeLevel = parseFloat(volumebar.value);
+ setVolume(0);
+ }
+ player.setMute(player.getVolume() === 0);
+ toggleMuteBtnState();
+ },
+
+ setVolume = function (value) {
+ if (typeof value === "number") {
+ volumebar.value = value;
+ }
+ player.setVolume(volumebar.value);
+ player.setMute(player.getVolume() === 0);
+ if (isNaN(lastVolumeLevel)) {
+ lastVolumeLevel = player.getVolume();
+ }
+ toggleMuteBtnState();
+ },
+
+//************************************************************************************
+// SEEKING
+// ************************************************************************************
+
+ onSeekBarChange = function (e) {
+ player.seek(parseFloat(seekbar.value));
+ },
+
+ onSeeking = function (e) {
+ //TODO Add call to seek in trick-mode once implemented. Preview Frames.
+ seeking = true;
+ setTime(parseFloat(seekbar.value));
+ },
+
+ onSeeked = function (e) {
+ seeking = false;
+ },
+
+//************************************************************************************
+// TIME/DURATION
+//************************************************************************************
+
+ setDuration = function (value) {
+ if (!isNaN(value)) {
+ durationDisplay.textContent = player.convertToTimeCode(value);
+ }
+ },
+
+ setTime = function (value) {
+ if (!isNaN(value)) {
+ timeDisplay.textContent = player.convertToTimeCode(value);
+ }
+ },
+
+ updateDuration = function () {
+ var duration = player.duration();
+ if (duration !== parseFloat(seekbar.max)) { //check if duration changes for live streams..
+ setDuration(duration);
+ seekbar.max = duration;
+ }
+ },
+
+//************************************************************************************
+// FULLSCREEN
+//************************************************************************************
+
+ onFullScreenChange = function (e) {
+ if (isFullscreen()) {
+ enterFullscreen();
+ var icon = fullscreenBtn.querySelector(".icon-fullscreen-enter")
+ icon.classList.remove("icon-fullscreen-enter");
+ icon.classList.add("icon-fullscreen-exit");
+ } else {
+ exitFullscreen();
+ var icon = fullscreenBtn.querySelector(".icon-fullscreen-exit")
+ icon.classList.remove("icon-fullscreen-exit");
+ icon.classList.add("icon-fullscreen-enter");
+ }
+ },
+
+ isFullscreen = function () {
+ return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreen || document.webkitIsFullScreen;
+ },
+
+ enterFullscreen = function () {
+ var element = videoContainer || video;
+
+ if (element.requestFullscreen) {
+ element.requestFullscreen();
+ } else if (element.msRequestFullscreen) {
+ element.msRequestFullscreen();
+ } else if (element.mozRequestFullScreen) {
+ element.mozRequestFullScreen();
+ } else {
+ element.webkitRequestFullScreen();
+ }
+ videoController.classList.add('video-controller-fullscreen');
+ window.addEventListener("mousemove", onFullScreenMouseMove);
+ onFullScreenMouseMove();
+ },
+
+ onFullScreenMouseMove = function () {
+ clearFullscreenState();
+ videoControllerVisibleTimeout = setTimeout(function () {
+ videoController.classList.add("hide");
+ }, 4000);
+ },
+
+ clearFullscreenState = function () {
+ clearTimeout(videoControllerVisibleTimeout);
+ videoController.classList.remove("hide");
+ },
+
+ exitFullscreen = function () {
+ window.removeEventListener("mousemove", onFullScreenMouseMove);
+ clearFullscreenState();
+
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) {
+ document.mozCancelFullScreen();
+ } else if (document.msExitFullscreen) {
+ document.msExitFullscreen();
+ } else {
+ document.webkitCancelFullScreen();
+ }
+ videoController.classList.remove('video-controller-fullscreen');
+ },
+
+ onFullscreenClick = function (e) {
+ if (!isFullscreen()) {
+ enterFullscreen();
+ } else {
+ exitFullscreen();
+ }
+ if (captionMenu) {
+ captionMenu.classList.add("hide");
+ }
+ if (bitrateListMenu) {
+ bitrateListMenu.classList.add("hide");
+ }
+ if (trackSwitchMenu) {
+ trackSwitchMenu.classList.add("hide");
+ }
+ },
+
+//************************************************************************************
+// Audio Video MENU
+//************************************************************************************
+
+ onTracksAdded = function (e) {
+ // Subtitles/Captions Menu //XXX we need to add two layers for captions & subtitles if present.
+ if (!captionMenu) {
+ var contentFunc = function (element, index) {
+ return isNaN(index) ? "OFF" : element.lang + " : " + element.kind;
+ }
+ captionMenu = createMenu({menuType: 'caption', arr: e.tracks}, contentFunc);
+
+ var func = function () {
+ onMenuClick(captionMenu, captionBtn);
+ }
+ menuHandlersList.push(func);
+ captionBtn.addEventListener("click", func);
+ captionBtn.classList.remove("hide");
+ }
+ },
+
+ onStreamInitialized = function (e) {
+
+ var contentFunc;
+ //Bitrate Menu
+ if (bitrateListBtn) {
+ destroyBitrateMenu();
+
+ var availableBitrates = {menuType: 'bitrate'};
+ availableBitrates.audio = player.getBitrateInfoListFor("audio") || [];
+ availableBitrates.video = player.getBitrateInfoListFor("video") || [];
+
+ if (availableBitrates.audio.length > 1 || availableBitrates.video.length > 1) {
+
+ contentFunc = function (element, index) {
+ return isNaN(index) ? " Auto Switch" : Math.floor(element.bitrate / 1000) + " kbps";
+ }
+ bitrateListMenu = createMenu(availableBitrates, contentFunc);
+ var func = function () {
+ onMenuClick(bitrateListMenu, bitrateListBtn);
+ };
+ menuHandlersList.push(func);
+ bitrateListBtn.addEventListener("click", func);
+ bitrateListBtn.classList.remove("hide");
+
+ } else {
+ bitrateListBtn.classList.add("hide");
+ }
+ }
+
+ //Track Switch Menu
+ if (!trackSwitchMenu && trackSwitchBtn) {
+ var availableTracks = {menuType: "track"};
+ availableTracks.audio = player.getTracksFor("audio");
+ availableTracks.video = player.getTracksFor("video"); // these return empty arrays so no need to cehck for null
+
+ if (availableTracks.audio.length > 1 || availableTracks.video.length > 1) {
+ contentFunc = function (element) {
+ return 'Language: ' + element.lang + ' - Role: ' + element.roles[0];
+ }
+ trackSwitchMenu = createMenu(availableTracks, contentFunc);
+ var func = function () {
+ onMenuClick(trackSwitchMenu, trackSwitchBtn);
+ };
+ menuHandlersList.push(func);
+ trackSwitchBtn.addEventListener("click", func);
+ trackSwitchBtn.classList.remove("hide");
+ }
+ }
+
+ },
+
+ createMenu = function (info, contentFunc) {
+
+ var menuType = info.menuType;
+ var el = document.createElement("div");
+ el.id = menuType + "Menu";
+ el.classList.add("menu");
+ el.classList.add("hide");
+ el.classList.add("unselectable");
+ el.classList.add("menu-item-unselected");
+ videoController.appendChild(el);
+
+ switch (menuType) {
+ case 'caption' :
+ el.appendChild(document.createElement("ul"));
+ el = createMenuContent(el, getMenuContent(menuType, info.arr, contentFunc), 'caption', menuType + '-list');
+ setMenuItemsState(1, menuType + '-list'); // Should not be harcoded. get initial index or state from dash.js - not available yet in dash.js
+ break;
+ case 'track' :
+ case 'bitrate' :
+ if (info.video.length > 1) {
+ el.appendChild(createMediaTypeMenu("video"));
+ el = createMenuContent(el, getMenuContent(menuType, info.video, contentFunc), 'video', 'video-' + menuType + '-list');
+ setMenuItemsState(getMenuInitialIndex(info.video, menuType, 'video'), 'video-' + menuType + '-list');
+ }
+ if (info.audio.length > 1) {
+ el.appendChild(createMediaTypeMenu("audio"));
+ el = createMenuContent(el, getMenuContent(menuType, info.audio, contentFunc), 'audio', 'audio-' + menuType + '-list');
+ setMenuItemsState(getMenuInitialIndex(info.audio, menuType, 'audio'), 'audio-' + menuType + '-list');
+ }
+ break;
+ }
+
+ window.addEventListener("resize", handleMenuPositionOnResize, true);
+ return el;
+ },
+
+ getMenuInitialIndex = function(info, menuType, mediaType) {
+ if (menuType === 'track') {
+
+ var mediaInfo = player.getCurrentTrackFor(mediaType);
+ var idx = 0
+ info.some(function(element, index){
+ if (isTracksEqual(element, mediaInfo)) {
+ idx = index;
+ return true;
+ }
+ })
+ return idx;
+
+ } else if (menuType === "bitrate") {
+ return player.getAutoSwitchQualityFor(mediaType) ? 0 : player.getQualityFor(mediaType);
+ }
+ },
+
+ isTracksEqual = function (t1, t2) {
+ var sameId = t1.id === t2.id;
+ var sameViewpoint = t1.viewpoint === t2.viewpoint;
+ var sameLang = t1.lang === t2.lang;
+ var sameRoles = t1.roles.toString() === t2.roles.toString();
+ var sameAccessibility = t1.accessibility.toString() === t2.accessibility.toString();
+ var sameAudioChannelConfiguration = t1.audioChannelConfiguration.toString() === t2.audioChannelConfiguration.toString();
+
+ return (sameId && sameViewpoint && sameLang && sameRoles && sameAccessibility && sameAudioChannelConfiguration);
+ },
+
+ getMenuContent = function (type, arr, contentFunc) {
+
+ var content = [];
+ arr.forEach(function (element, index) {
+ content.push(contentFunc(element, index));
+ })
+ if (type !== 'track') {
+ content.unshift(contentFunc(null, NaN));
+ }
+ return content;
+ },
+
+ createMediaTypeMenu = function (type) {
+
+ var div = document.createElement("div");
+ var title = document.createElement("div");
+ var content = document.createElement("ul");
+
+ div.id = type;
+
+ title.textContent = type === 'video' ? 'Video' : 'Audio';
+ title.classList.add('menu-sub-menu-title');
+
+ content.id = type + "Content";
+ content.classList.add(type + "-menu-content");
+
+ div.appendChild(title);
+ div.appendChild(content);
+
+ return div;
+ },
+
+ createMenuContent = function (menu, arr, mediaType, name) {
+
+ for (var i = 0; i < arr.length; i++) {
+
+ var item = document.createElement("li");
+ item.id = name + "Item_" + i;
+ item.index = i;
+ item.mediaType = mediaType;
+ item.name = name;
+ item.selected = false;
+ item.textContent = arr[i];
+
+ item.onmouseover = function (e) {
+ if (this.selected !== true) {
+ this.classList.add("menu-item-over");
+ }
+ };
+ item.onmouseout = function (e) {
+ this.classList.remove("menu-item-over");
+ };
+ item.onclick = setMenuItemsState.bind(item);
+
+ var el;
+ if (mediaType === 'caption') {
+ el = menu.querySelector("ul");
+ } else {
+ el = menu.querySelector('.' + mediaType + "-menu-content");
+ }
+
+ el.appendChild(item);
+ }
+
+ return menu;
+ },
+
+
+ onMenuClick = function (menu, btn) {
+
+ if (menu.classList.contains("hide")) {
+ menu.classList.remove("hide");
+ menu.onmouseleave = function (e) {
+ this.classList.add("hide");
+ };
+ } else {
+ menu.classList.add("hide");
+ }
+ menu.style.position = isFullscreen() ? "fixed" : "absolute";
+ positionMenu(menu, btn);
+ },
+
+
+ setMenuItemsState = function (value, type) {
+
+ var self = typeof value === 'number' ? document.getElementById(type + "Item_" + value) : this,
+ nodes = self.parentElement.children;
+
+ for (var i = 0; i < nodes.length; i++) {
+ nodes[i].selected = false;
+ nodes[i].classList.remove("menu-item-selected");
+ nodes[i].classList.add("menu-item-unselected");
+ }
+ self.selected = true;
+ self.classList.remove("menu-item-over");
+ self.classList.remove("menu-item-unselected");
+ self.classList.add("menu-item-selected");
+
+
+ if (type === undefined) { // User clicked so type is part of item binding.
+ switch (self.name) {
+ case 'video-bitrate-list':
+ case 'audio-bitrate-list':
+ if (self.index > 0) {
+ if (player.getAutoSwitchQualityFor(self.mediaType)) {
+ player.setAutoSwitchQualityFor(self.mediaType, false);
+ }
+ player.setQualityFor(self.mediaType, self.index - 1);
+ } else {
+ player.setAutoSwitchQualityFor(self.mediaType, true);
+ }
+ break;
+ case 'caption-list' :
+ player.setTextTrack(self.index - 1);
+ break
+ case 'video-track-list' :
+ case 'audio-track-list' :
+ player.setCurrentTrack(player.getTracksFor(self.mediaType)[self.index]);
+ break;
+ }
+ }
+ },
+
+ handleMenuPositionOnResize = function (e) {
+ if (captionMenu) {
+ positionMenu(captionMenu, captionBtn);
+ }
+ if (bitrateListMenu) {
+ positionMenu(bitrateListMenu, bitrateListBtn);
+ }
+ if (trackSwitchMenu) {
+ positionMenu(trackSwitchMenu, trackSwitchBtn);
+ }
+ },
+
+ positionMenu = function (menu, btn) {
+ var menu_y = videoController.offsetTop - menu.offsetHeight;
+ menu.style.top = menu_y + "px";
+ menu.style.left = btn.offsetLeft + "px";
+ },
+
+ destroyBitrateMenu = function () {
+ if (bitrateListMenu) {
+ menuHandlersList.forEach(function (item) {
+ bitrateListBtn.removeEventListener("click", item);
+ })
+ videoController.removeChild(bitrateListMenu);
+ bitrateListMenu = null;
+ }
+ },
+
+//************************************************************************************
+//IE FIX
+//************************************************************************************
+
+ coerceIEInputAndChangeEvents = function (slider, addChange) {
+ var fireChange = function (e) {
+ var changeEvent = document.createEvent('Event');
+ changeEvent.initEvent('change', true, true);
+ changeEvent.forceChange = true;
+ slider.dispatchEvent(changeEvent);
+ };
+
+ this.addEventListener('change', function (e) {
+ var inputEvent;
+ if (!e.forceChange && e.target.getAttribute('type') === 'range') {
+ e.stopPropagation();
+ inputEvent = document.createEvent('Event');
+ inputEvent.initEvent('input', true, true);
+ e.target.dispatchEvent(inputEvent);
+ if (addChange) {
+ e.target.removeEventListener('mouseup', fireChange);//TODO can not clean up this event on destroy. refactor needed!
+ e.target.addEventListener('mouseup', fireChange);
+ }
+ }
+
+ }, true);
+ },
+
+ isIE = function () {
+ return !!navigator.userAgent.match(/Trident.*rv[ :]*11\./)
+ };
+
+
+//************************************************************************************
+// PUBLIC API
+//************************************************************************************
+
+ return {
+ setVolume: setVolume,
+ setDuration: setDuration,
+ setTime: setTime,
+
+ initialize: function () {
+
+ if (!player) {
+ throw new Error("Please pass an instance of MediaPlayer.js when instantiating the ControlBar Object");
+ }
+ video = player.getVideoElement();
+ if (!video) {
+ throw new Error("Please call initialize after you have called attachView on MediaPlayer.js");
+ }
+
+ video.controls = false;
+ videoContainer = player.getVideoContainer();
+ captionBtn.classList.add("hide");
+ if (trackSwitchBtn) {
+ trackSwitchBtn.classList.add("hide");
+ }
+
+ player.on(dashjs.MediaPlayer.events.PLAYBACK_STARTED, onPlayStart, this);
+ player.on(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, onPlaybackPaused, this);
+ player.on(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, onPlayTimeUpdate, this);
+ player.on(dashjs.MediaPlayer.events.PLAYBACK_SEEKED, onSeeked, this);
+ player.on(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, onTracksAdded, this);
+ player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, onStreamInitialized, this);
+
+ playPauseBtn.addEventListener("click", onPlayPauseClick);
+ muteBtn.addEventListener("click", onMuteClick);
+ fullscreenBtn.addEventListener("click", onFullscreenClick);
+ seekbar.addEventListener("change", onSeekBarChange, true);
+ seekbar.addEventListener("input", onSeeking, true);
+ volumebar.addEventListener("input", setVolume, true);
+ document.addEventListener("fullscreenchange", onFullScreenChange, false);
+ document.addEventListener("MSFullscreenChange", onFullScreenChange, false);
+ document.addEventListener("mozfullscreenchange", onFullScreenChange, false);
+ document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
+
+ //IE 11 Input Fix.
+ if (isIE()) {
+ coerceIEInputAndChangeEvents(seekbar, true);
+ coerceIEInputAndChangeEvents(volumebar, false);
+ }
+ },
+
+ show: function () {
+ videoController.classList.remove("hide");
+ },
+
+ hide: function () {
+ videoController.classList.add("hide");
+ },
+
+ disable: function () {
+ videoController.classList.add("disable");
+ },
+
+ enable: function () {
+ videoController.classList.remove("disable");
+ },
+
+ reset: function () {
+ window.removeEventListener("resize", handleMenuPositionOnResize);
+ destroyBitrateMenu();
+ menuHandlersList.forEach(function (item) {
+ if (trackSwitchBtn) trackSwitchBtn.removeEventListener("click", item);
+ if (captionBtn) captionBtn.removeEventListener("click", item);
+ })
+ if (captionMenu) {
+ videoController.removeChild(captionMenu);
+ captionMenu = null;
+ captionBtn.classList.add("hide");
+ }
+ if (trackSwitchMenu) {
+ videoController.removeChild(trackSwitchMenu);
+ trackSwitchMenu = null;
+ trackSwitchBtn.classList.add("hide");
+ }
+ menuHandlersList = [];
+ seeking = false;
+ },
+
+ destroy: function () {
+
+ reset();
+
+ playPauseBtn.removeEventListener("click", onPlayPauseClick);
+ muteBtn.removeEventListener("click", onMuteClick);
+ fullscreenBtn.removeEventListener("click", onFullscreenClick);
+ seekbar.removeEventListener("change", onSeekBarChange);
+ seekbar.removeEventListener("input", onSeeking);
+ volumebar.removeEventListener("input", setVolume);
+
+ player.off(dashjs.MediaPlayer.events.PLAYBACK_STARTED, onPlayStart, this);
+ player.off(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, onPlaybackPaused, this);
+ player.off(dashjs.MediaPlayer.events.PLAYBACK_TIME_UPDATED, onPlayTimeUpdate, this);
+ player.off(dashjs.MediaPlayer.events.PLAYBACK_SEEKED, onSeeked, this);
+ player.off(dashjs.MediaPlayer.events.TEXT_TRACKS_ADDED, onTracksAdded, this);
+ player.off(dashjs.MediaPlayer.events.STREAM_INITIALIZED, onStreamInitialized, this);
+
+ document.removeEventListener("fullscreenchange", onFullScreenChange);
+ document.removeEventListener("MSFullscreenChange", onFullScreenChange);
+ document.removeEventListener("mozfullscreenchange", onFullScreenChange);
+ document.removeEventListener("webkitfullscreenchange", onFullScreenChange);
+ }
+ }
+}
diff --git a/assets/dashjs/controlbar.css b/assets/dashjs/controlbar.css
new file mode 100644
index 0000000..080d93d
--- /dev/null
+++ b/assets/dashjs/controlbar.css
@@ -0,0 +1,268 @@
+/**************************************************/
+/*Control bar*/
+/**************************************************/
+.hide{
+ display: none;
+}
+
+.disable {
+ pointer-events:none;
+}
+
+.unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+:-webkit-full-screen {
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top:0;
+ z-index: -100;
+ background: none;
+}
+
+:-ms-fullscreen {
+ width: auto;
+ height: auto;
+ margin: auto;
+}
+
+.time-display,
+.duration-display{
+ padding:11px;
+ color: white;
+ font-weight: normal;
+ font-size: .9em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.time-display{
+ float:left;
+}
+
+.duration-display{
+ float: right;
+}
+
+.btn-play-pause{
+ float: left;
+ padding:9px 10px;
+ cursor: pointer;
+}
+
+.control-icon-layout
+ {
+ float: right;
+ padding:9px 10px;
+ cursor: pointer;
+}
+
+.btn-fullscreen {
+ margin-right: 10px;
+}
+
+.volumebar {
+ float: right;
+ width: 70px;
+}
+
+.video-controller {
+ min-height:35px;
+ z-index: 2147483646;
+}
+
+.video-controller-fullscreen {
+ position: fixed;
+ z-index:2147483647;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+}
+
+.menu,
+.video-controller {
+ background-color: black;
+}
+
+.menu-item-unselected,
+.menu-item-selected{
+ font-weight: normal;
+ font-size: .9em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.menu-item-unselected {
+ color: white;
+}
+
+.menu-item-over,
+.menu-item-selected {
+ background-color: white;
+ color: black;
+}
+
+.menu-sub-menu-title {
+ background-color: #191919;
+ padding-left: 2px;
+ font-weight: bold;
+ font-size: 1.0em;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+}
+
+.menu-item-selected {
+ opacity: .7;
+}
+
+.menu ul{
+ list-style-type: none;
+ padding:0;
+ margin:0;
+}
+
+.menu li{
+ padding:0 10px;
+ cursor: pointer;
+}
+
+.menu {
+ position: absolute;
+}
+
+@font-face {
+ font-family: 'icomoon';
+ src: url("icomoon.ttf") format("truetype");
+ font-weight: normal;
+ font-style: normal;
+}
+
+.icon-play,
+.icon-pause,
+.icon-caption,
+.icon-mute-off,
+.icon-mute-on,
+.icon-fullscreen-enter,
+.icon-fullscreen-exit,
+.icon-tracks,
+.icon-bitrate {
+ font-family: 'icomoon';
+ font-size: 20px;
+ color: white;
+ text-shadow: none;
+ -webkit-font-smoothing: antialiased;
+}
+
+.icon-fullscreen-enter:before {
+ content: "\e90b";
+}
+.icon-fullscreen-exit:before {
+ content: "\e90c";
+}
+.icon-play:before {
+ content: "\e910";
+}
+.icon-pause:before {
+ content: "\e911";
+}
+.icon-mute-on:before {
+ content: "\e909";
+}
+.icon-mute-off:before {
+ content: "\e918";
+}
+.icon-caption:before {
+ content: "\e901";
+}
+.icon-bitrate:before {
+ content: "\e905";
+}
+.icon-tracks:before {
+ content: "\e90a";
+}
+
+.seekContainer {
+ overflow: auto;
+ padding-right: 10px;
+ overflow-y: hidden;
+ overflow-x: hidden;
+}
+
+.seekbar {
+ position: relative;
+ width: 100%;
+}
+
+input[type="range"] {
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+ height: 14px;
+ border: none;
+ margin:12px 5px;
+ padding: 1px 2px;
+ border-radius: 5px;
+ background: #232528;
+ box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
+ -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
+ outline: none; /* no focus outline */
+}
+
+input[type=range]::-moz-focus-outer {
+ border: 0;
+}
+
+input[type="range"]::-moz-range-track {
+ border: inherit;
+ background: transparent;
+}
+
+input[type="range"]::-ms-track {
+ border: inherit;
+ color: transparent; /* don't drawn vertical reference line */
+ background: transparent;
+}
+
+input[type="range"]::-ms-fill-lower,
+input[type="range"]::-ms-fill-upper {
+ background: transparent;
+}
+
+input[type="range"]::-ms-tooltip {
+ display: none;
+}
+
+/* thumb */
+input[type="range"]::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 15px;
+ height: 8px;
+ border: none;
+ border-radius: 2px;
+ background-color:rgb(0, 150, 215);
+}
+input[type="range"]::-moz-range-thumb {
+ width: 15px;
+ height: 8px;
+ border: none;
+ border-radius: 2px;
+ background-color:rgb(0, 150, 215);
+}
+
+input[type="range"]::-ms-thumb {
+ width: 15px;
+ height: 8px;
+ border: none;
+ border-radius: 2px;
+ background-color:rgb(0, 150, 215);
+}
+
+div#videoController input[type="range"]{
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+} \ No newline at end of file
diff --git a/assets/dashjs/icomoon.ttf b/assets/dashjs/icomoon.ttf
new file mode 100644
index 0000000..e31162f
--- /dev/null
+++ b/assets/dashjs/icomoon.ttf
Binary files differ
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 10:31:16 +0000