192 lines
7.9 KiB
HTML
192 lines
7.9 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: false,
|
|
drm: false,
|
|
metrics: true
|
|
},
|
|
apiConfig: {
|
|
channelId: 'hls-998f5396-c9dd-4a1e-82c7-0aec531fc015',
|
|
urlGetParams: null,
|
|
clientId: null,
|
|
movieId: null,
|
|
episodeId: null,
|
|
newsId: null,
|
|
},
|
|
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(true)
|
|
// player.attachSource('https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', { autoplay: 'muted' })
|
|
player.attachSource("https://playertest.longtailvideo.com/adaptive/elephants_dream_v4/index.m3u8", {autoplay: "muted"})
|
|
// player.attachSource("https://storage.googleapis.com/shaka-demo-assets/angel-one-hls/hls.m3u8", {autoplay: true})
|
|
// player.attachSource("https://dash.akamaized.net/dash264/TestCases/10a/1/iis_forest_short_poem_multi_lang_480p_single_adapt_aaclc_sidx.mpd", {autoplay: true})
|
|
// player.attachSource("https://streaming-iptv.voka.tv/eyJvc19uYW1lIjoibWFjIG9zIiwidXNlcl91aWQiOiIzMDE4ZmM2Yi02YmY4LTQ4OGQtOGRhMi02YjZmNWFmMjFjNDQiLCJkYXRhY2VudGVyIjoiaW50IiwiZG9tYWluX25hbWUiOiJzdHJlYW1pbmctaXB0di52b2thLnR2IiwiZHJtIjoic3BidHZjYXMiLCJleHBpcmF0aW9uX2RhdGUiOiIyMDI1LTA5LTA3VDA0OjA1OjI2WiIsImlwX2FkZHJlc3MiOiI4OS4xMTAuMTIyLjE3NSIsInByb2plY3QiOiJ2b2thX3Byb2R1Y3Rpb24iLCJwcm90b2NvbCI6ImhscyIsInNlc3Npb25faWQiOiIxNjU4Nzk0Zi1lNDRhLTRjMzctYmMzZi05YTFiMDc5YTk5YzAiLCJzdHJlYW1fbmFtZSI6IlBUWmNQaHJwTTN6Y0MzQ3RtRlppVEdkYkxuSGpINlBkUiIsInN0cmVhbV9wYXRoIjoiL3ZvZF92NS92ZWxjb20ifQ%3D%3D/MCwCFGxEXtZqOuKJDrL1lQtYVbbtDK4aAhQyj6sfG6I1q3GZ0feSVzzPRSjzbw%3D%3D/vod_v5/velcom/PTZcPhrpM3zcC3CtmFZiTGdbLnHjH6PdR.m3u8?b_app_channel_id=07497ccf-fa3f-473e-a254-9cfdba769ddb&b_app_id=voka_production&b_device_platform=mac%20os&b_device_uid=1d866e05-b0e5-e943-f49c-295ac85c20d7&b_stream_sid=1658794f-e44a-4c37-bc3f-9a1b079a99c0&b_strmr_channel_id=PTZcPhrpM3zcC3CtmFZiTGdbLnHjH6PdR&join_chunks=8", {autoplay: true})
|
|
// player.attachSource("https://streaming-iptv.voka.tv/eyJvc19uYW1lIjoid2Vib3MiLCJ1c2VyX3VpZCI6IjA3YmI4NmYwLTE2NGItNGUzYi04YTg1LTI1ZmNkMDkwYTcwYyIsImRhdGFjZW50ZXIiOiJpbnQiLCJkb21haW5fbmFtZSI6InN0cmVhbWluZy1pcHR2LnZva2EudHYiLCJkcm0iOiJzcGJ0dmNhcyIsImV4cGlyYXRpb25fZGF0ZSI6IjIwMjUtMDktMDdUMTg6NTE6MjBaIiwiaXBfYWRkcmVzcyI6IjE4NS4xMzUuMTUwLjQwIiwicHJvamVjdCI6InZva2FfcHJvZHVjdGlvbiIsInByb3RvY29sIjoiZGFzaCIsInNlc3Npb25faWQiOiJmNzAwYjZiNC05YjM2LTQwOGItYjQwMC1hNWRjNTUwOTAwOTkiLCJzdHJlYW1fbmFtZSI6IlB0UzI3TkRVOEdEcVFaQnQ4VGlZTXBhTUFOMlpRTjZmSCIsInN0cmVhbV9wYXRoIjoiL3ZvZF92NS92ZWxjb20ifQ%3D%3D/MCwCFGUg-eRCCUS8TLoY-ytF6zfQYiH4AhRjhpdoccRw_-G27ppPVN33swBdAw%3D%3D/vod_v5/velcom/PtS27NDU8GDqQZBt8TiYMpaMAN2ZQN6fH.mpd?b_app_channel_id=38488837-7de6-44db-a1bb-848224476f3f&b_app_id=voka_production&b_device_platform=webos&b_device_uid=d9c5-2467-713b-8b9c-b88a&b_stream_sid=f700b6b4-9b36-408b-b400-a5dc55090099&b_strmr_channel_id=PtS27NDU8GDqQZBt8TiYMpaMAN2ZQN6fH", {autoplay: true})
|
|
})
|
|
|
|
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)
|
|
player.addEventListener('timeupdate', (e) => console.log("timeupdate", e), 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',
|
|
'qualitiesParsed',
|
|
'qualityUISet',
|
|
'qualitySet',
|
|
'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>
|