Алексей Манаев
182 lines
5.3 KiB
HTML
182 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="width: 100%; height: 100%">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
|
|
<script language="JavaScript" src="./distribution/vokaPlayer.global.js"></script>
|
|
</head>
|
|
<body style="width: 100%; height: 100%">
|
|
<h1>Hello world</h1>
|
|
<div id="my-video" style="width: 100%; height: 100%"></div>
|
|
<button onclick="controlBarShow()" type="button">SHOW CONTROL BAR</button>
|
|
<button onclick="controlBarHide()" type="button">HIDE CONTROL BAR</button>
|
|
<button onclick="changeQualityAuto()" type="button">AUTO QUALITY</button>
|
|
<button onclick="changeQualityLowest()" type="button">LOWEST QUALITY</button>
|
|
<button onclick="changeQualityBest()" type="button">BEST QUALITY</button>
|
|
<button onclick="setEngAudioTrack()" type="button">ENGLISH AUDIO</button>
|
|
<button onclick="setDubAudioTrack()" type="button">DUBBING AUDIO</button>
|
|
<button onclick="disableSubs()" type="button">DISABLE SUBS</button>
|
|
<button onclick="setDeSubs()" type="button">DEUTCH SUBS</button>
|
|
<button onclick="setEnSubs()" type="button">ENGLISH SUBS</button>
|
|
<h2>Logs</h2>
|
|
<div id="logs" class="logs"></div>
|
|
<script language="JavaScript">
|
|
var player = spbtvplayer('my-video', {
|
|
log: true,
|
|
features: {
|
|
api: true,
|
|
drm: false,
|
|
metrics: true
|
|
},
|
|
apiConfig: {
|
|
channelId: 'dash-widevine-vod',
|
|
urlGetParams: 'minheight=400',
|
|
clientId: null,
|
|
movieId: null,
|
|
episodeId: null,
|
|
newsId: null,
|
|
// apiHost: 'localhost:8080',
|
|
},
|
|
uiConfig: {
|
|
initAsLive: true
|
|
},
|
|
globalOpts: {
|
|
uiLanguage: 'ru'
|
|
},
|
|
streamOpts: {
|
|
autoplay: true
|
|
},
|
|
controls: {
|
|
externalSubtitles: {
|
|
url: "https://raw.githubusercontent.com/videojs/video.js/c7298d40a4632a6e9dfcd5a2f5cc3bbe92a78744/docs/examples/elephantsdream/captions.ru.vtt",
|
|
lang: 'ru'
|
|
},
|
|
zoomButton: {
|
|
isVisible: true,
|
|
enable: true,
|
|
},
|
|
editing: {
|
|
enable: true,
|
|
},
|
|
},
|
|
});
|
|
player.afterInitialize(() => {
|
|
console.log("afterInitialize")
|
|
player.setControlbarVisibility(false)
|
|
})
|
|
|
|
player.addEventListener('play', onPlay, window)
|
|
player.addEventListener('pause', onPause, window)
|
|
player.addEventListener('canplay', onCanPlay, window)
|
|
player.addEventListener('controlbarShow', onControlsShow, window)
|
|
player.addEventListener('controlbarHide', oncontrolsHide, window)
|
|
|
|
function onPlay() { console.log("on PLAY") }
|
|
|
|
function onPause() { console.log("on PAUSE") }
|
|
|
|
function onCanPlay() { console.log("on CANPLAY") }
|
|
|
|
function onControlsShow() { console.log("on onControlsShow") }
|
|
|
|
function oncontrolsHide() { console.log("on oncontrolsHide") }
|
|
|
|
//
|
|
function controlBarHide() {
|
|
player.setControlbarVisibility(false)
|
|
}
|
|
|
|
function controlBarShow() {
|
|
player.setControlbarVisibility(true)
|
|
}
|
|
|
|
function changeQualityAuto() {
|
|
player.setSelectedVideoQuality(-1)
|
|
}
|
|
|
|
function changeQualityLowest() {
|
|
player.setSelectedVideoQuality(0)
|
|
}
|
|
|
|
function changeQualityBest() {
|
|
var quality = player.getVideoQualityList()
|
|
player.setSelectedVideoQuality(quality.length - 1)
|
|
}
|
|
|
|
function setDubAudioTrack() {
|
|
player.setCurrentAudioTrack(1)
|
|
}
|
|
|
|
function setEngAudioTrack() {
|
|
player.setCurrentAudioTrack(0)
|
|
}
|
|
|
|
function disableSubs() {
|
|
player.setCurrentSubtitlesTrack(-1)
|
|
}
|
|
|
|
function setDeSubs() {
|
|
player.setCurrentSubtitlesTrack(0)
|
|
}
|
|
|
|
function setEnSubs() {
|
|
player.setCurrentSubtitlesTrack(1)
|
|
}
|
|
|
|
const fireEvents = [
|
|
'play',
|
|
'pause',
|
|
'canplay',
|
|
'ended',
|
|
// 'timeupdate',
|
|
'error',
|
|
'volumechange',
|
|
'controlbarShow',
|
|
'controlbarHide',
|
|
'qualityChange',
|
|
'sourceAttached',
|
|
'zoomButtonChange',
|
|
'trackChange',
|
|
'bufferLengthUpdate',
|
|
'zoomModeChange',
|
|
'toolboxStartSel',
|
|
'toolboxEndSel',
|
|
'toolboxProcessSel',
|
|
'destroyed',
|
|
'bufferingUpdate',
|
|
'timeshiftUpdate',
|
|
]
|
|
|
|
function currentTime() {
|
|
const d = new Date()
|
|
const h = `${d.getHours()}`.padStart(2, '0')
|
|
const m = `${d.getMinutes()}`.padStart(2, '0')
|
|
const s = `${d.getSeconds()}`.padStart(2, '0')
|
|
return h + ":" + m + ":" + s
|
|
}
|
|
|
|
function addLog (message) {
|
|
const element = document.createElement('div')
|
|
element.classList.add('log-item')
|
|
element.innerHTML = '<b class="current-time">' + currentTime() + '</b> ' + message;
|
|
document.querySelector("#logs").prepend(element)
|
|
}
|
|
|
|
fireEvents.forEach(event => {
|
|
player.addEventListener(event, (payload) => {
|
|
addLog (`<i>${event}</i> : ${JSON.stringify(payload)}`)
|
|
})
|
|
})
|
|
</script>
|
|
<style>
|
|
.logs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 600px;
|
|
border: 1px solid gray;
|
|
overflow: auto;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |