343 lines
11 KiB
JavaScript
343 lines
11 KiB
JavaScript
/*********************************************************
|
|
* LICENSE: GPL-3.0 https://www.gnu.org/licenses/gpl-3.0.txt
|
|
*
|
|
* Author: Numberwolf - ChangYanlong
|
|
* QQ: 531365872
|
|
* QQ Group:925466059
|
|
* Wechat: numberwolf11
|
|
* Discord: numberwolf#8694
|
|
* E-Mail: porschegt23@foxmail.com
|
|
* Github: https://github.com/numberwolf/h265web.js
|
|
*
|
|
* 作者: 小老虎(Numberwolf)(常炎隆)
|
|
* QQ: 531365872
|
|
* QQ群: 531365872
|
|
* 微信: numberwolf11
|
|
* Discord: numberwolf#8694
|
|
* 邮箱: porschegt23@foxmail.com
|
|
* 博客: https://www.jianshu.com/u/9c09c1e00fd1
|
|
* Github: https://github.com/numberwolf/h265web.js
|
|
*
|
|
**********************************************************/
|
|
const SHOW_LOADING = "loading...";
|
|
const SHOW_DONE = "done.";
|
|
|
|
function durationFormatSubVal(val) {
|
|
let valStr = val.toString();
|
|
if (valStr.length < 2) {
|
|
return '0' + valStr;
|
|
}
|
|
return valStr;
|
|
}
|
|
|
|
function durationText(duration) {
|
|
if (duration < 0) {
|
|
return "Play";
|
|
}
|
|
let durationSecInt = Math.round(duration);
|
|
return durationFormatSubVal(Math.floor(durationSecInt / 3600))
|
|
+ ":" + durationFormatSubVal(Math.floor((durationSecInt % 3600) / 60))
|
|
+ ":" + durationFormatSubVal(Math.floor(durationSecInt % 60));
|
|
}
|
|
|
|
const getMsTime = () => {
|
|
return new Date().getTime();
|
|
};
|
|
|
|
|
|
/***************************************************
|
|
*
|
|
*
|
|
*
|
|
* 1. H.265/HEVC MP4/FLV/HLS/TS
|
|
* Demo for create player(MP4/FLV/HLS/TS)
|
|
* 点播/直播播放器创建Demo(MP4/FLV/HLS/TS)
|
|
*
|
|
*
|
|
*
|
|
***************************************************/
|
|
// clear cache count
|
|
function clear() {
|
|
window.STATICE_MEM_playerCount = -1;
|
|
window.STATICE_MEM_playerIndexPtr = 0;
|
|
}
|
|
clear();
|
|
|
|
window.onload = function() {
|
|
//var token = "============>>>>>>>>>>>>>>Author:changyanlong|numberwolf,Github:https://github.com/numberwolf,Email:porschegt23@foxmail.com,QQ:531365872,HomePage:http://xvideo.video,Discord:numberwolf#8694,Beijing,WorkIn:Baidu<<<<<<<<<<<<===========";
|
|
var token = "base64:QXV0aG9yOmNoYW5neWFubG9uZ3xudW1iZXJ3b2xmLEdpdGh1YjpodHRwczovL2dpdGh1Yi5jb20vbnVtYmVyd29sZixFbWFpbDpwb3JzY2hlZ3QyM0Bmb3htYWlsLmNvbSxRUTo1MzEzNjU4NzIsSG9tZVBhZ2U6aHR0cDovL3h2aWRlby52aWRlbyxEaXNjb3JkOm51bWJlcndvbGYjODY5NCx3ZWNoYXI6bnVtYmVyd29sZjExLEJlaWppbmcsV29ya0luOkJhaWR1";
|
|
/******** Test Cases *******/
|
|
var url = document.getElementById("glplayer").getAttribute("src");
|
|
//var url = "res/hls/veilside.m3u8";
|
|
//var url = "res/hls1/test.m3u8";
|
|
//var url = "http://182.61.31.911:8080/live/livestream.flv";
|
|
//var url = "http://127.0.0.1/live/test/hls.m3u8";
|
|
|
|
/******** Websocket FLV/TS ********/
|
|
// var url = "ws://127.0.0.1/live/test.flv";
|
|
// var url = "ws://127.0.0.1/live/test.live.ts";
|
|
|
|
/******** HTTP FLV/TS/HLS ********/
|
|
// var url = "http://127.0.0.1/live/test.flv";
|
|
// var url = "http://127.0.0.1/live/test.live.ts";
|
|
// var url = "http://127.0.0.1/live/test/hls.m3u8";
|
|
var config = {
|
|
player: "glplayer",
|
|
width: 1280,
|
|
height: 720,
|
|
token : token,
|
|
extInfo : {
|
|
coreProbePart : 0.4,
|
|
probeSize : 8192,
|
|
ignoreAudio : 0
|
|
}
|
|
}; // config
|
|
let playerId = config.player;
|
|
let playerObj = window.new265webjs(url, config);
|
|
|
|
let playerDom = document.querySelector('#' + playerId);
|
|
let playerCont = document.querySelector('#player-container');
|
|
let controllerCont = document.querySelector('#controller');
|
|
let progressCont = document.querySelector('#progress-contaniner');
|
|
let progressContW = progressCont.offsetWidth;
|
|
let cachePts = progressCont.querySelector('#cachePts');
|
|
let progressPts = progressCont.querySelector('#progressPts');
|
|
let progressVoice = document.querySelector('#progressVoice');
|
|
let playBar = document.querySelector('#playBar');
|
|
let playBtn = playBar.getElementsByTagName('a')[0];
|
|
let showLabel = document.querySelector('#showLabel');
|
|
let ptsLabel = document.querySelector('#ptsLabel');
|
|
let coverToast = document.querySelector('#coverLayer');
|
|
let coverBtn = document.querySelector('#coverLayerBtn');
|
|
let muteBtn = document.querySelector('#muteBtn');
|
|
// let debugYUVBtn = document.querySelector('#debugYUVBtn');
|
|
// let debugYUVATag = document.querySelector('#debugYUVUrl');
|
|
let fullScreenBtn = document.querySelector('#fullScreenBtn');
|
|
let mediaInfo = null;
|
|
|
|
playBtn.disabled = true;
|
|
// playBar.textContent = '>';
|
|
showLabel.textContent = SHOW_LOADING;
|
|
playerCont.style.width = config.width + 'px';
|
|
playerCont.style.height = config.height + 'px';
|
|
controllerCont.style.width = config.width + 'px';
|
|
|
|
let muteState = false;
|
|
|
|
// controllerCont.style.left = playerContainer.clientLeft;
|
|
// controllerCont.style.bottom = playerContainer.clientBottom;
|
|
// alert(playerContainer.clientLeft);
|
|
|
|
let playAction = () => {
|
|
console.log("is playing:", playerObj.isPlaying());
|
|
if (playerObj.isPlaying()) {
|
|
console.log("bar pause============>");
|
|
// playBar.textContent = '>';
|
|
playBar.setAttribute('class', 'playBtn');
|
|
playerObj.pause();
|
|
} else {
|
|
// playBar.textContent = '||';
|
|
playBar.setAttribute('class', 'pauseBtn');
|
|
playerObj.play();
|
|
}
|
|
};
|
|
|
|
playerCont.onmouseover = function() {
|
|
controllerCont.hidden = false;
|
|
};
|
|
|
|
playerCont.onmouseout = function() {
|
|
controllerCont.hidden = true;
|
|
};
|
|
|
|
playerDom.onmouseup = function() {
|
|
playAction();
|
|
};
|
|
|
|
playBtn.onclick = () => {
|
|
playAction();
|
|
};
|
|
|
|
muteBtn.onclick = () => {
|
|
console.log(playerObj.getVolume());
|
|
if (muteState === true) {
|
|
playerObj.setVoice(1.0);
|
|
progressVoice.value = 100;
|
|
} else {
|
|
playerObj.setVoice(0.0);
|
|
progressVoice.value = 0;
|
|
}
|
|
muteState = !muteState;
|
|
};
|
|
|
|
fullScreenBtn.onclick = () => {
|
|
playerObj.fullScreen();
|
|
// setTimeout(() => {
|
|
// playerObj.closeFullScreen();
|
|
// }, 2000);
|
|
};
|
|
|
|
progressCont.addEventListener('click', (e) => {
|
|
showLabel.textContent = SHOW_LOADING;
|
|
let x = e.pageX - progressCont.getBoundingClientRect().left; // or e.offsetX (less support, though)
|
|
let y = e.pageY - progressCont.getBoundingClientRect().top; // or e.offsetY
|
|
let clickedValue = x * progressCont.max / progressCont.offsetWidth;
|
|
// alert(clickedValue);
|
|
playerObj.seek(clickedValue);
|
|
});
|
|
|
|
progressVoice.addEventListener('click', (e) => {
|
|
let x = e.pageX - progressVoice.getBoundingClientRect().left; // or e.offsetX (less support, though)
|
|
let y = e.pageY - progressVoice.getBoundingClientRect().top; // or e.offsetY
|
|
let clickedValue = x * progressVoice.max / progressVoice.offsetWidth;
|
|
progressVoice.value = clickedValue;
|
|
let volume = clickedValue / 100;
|
|
// alert(volume);
|
|
// console.log(
|
|
// progressVoice.offsetLeft, // 209
|
|
// x, y, // 324 584
|
|
// progressVoice.max, progressVoice.offsetWidth);
|
|
playerObj.setVoice(volume);
|
|
});
|
|
|
|
playerObj.onSeekStart = (pts) => {
|
|
showLabel.textContent = SHOW_LOADING + " seek to:" + parseInt(pts);
|
|
};
|
|
|
|
playerObj.onSeekFinish = () => {
|
|
showLabel.textContent = SHOW_DONE;
|
|
};
|
|
|
|
playerObj.onPlayFinish = () => {
|
|
console.log("============= FINISHED ===============");
|
|
// playBar.textContent = '>';
|
|
playBar.setAttribute('class', 'playBtn');
|
|
// playerObj.release();
|
|
// console.log("=========> release ok");
|
|
};
|
|
|
|
playerObj.onRender = (width, height, imageBufferY, imageBufferB, imageBufferR) => {
|
|
console.log("on render");
|
|
};
|
|
|
|
playerObj.onOpenFullScreen = () => {
|
|
console.log("onOpenFullScreen");
|
|
};
|
|
|
|
playerObj.onCloseFullScreen = () => {
|
|
console.log("onCloseFullScreen");
|
|
};
|
|
|
|
playerObj.onSeekFinish = () => {
|
|
showLabel.textContent = SHOW_DONE;
|
|
};
|
|
|
|
playerObj.onLoadCache = () => {
|
|
showLabel.textContent = "Caching...";
|
|
};
|
|
|
|
playerObj.onLoadCacheFinshed = () => {
|
|
showLabel.textContent = SHOW_DONE;
|
|
};
|
|
|
|
playerObj.onReadyShowDone = () => {
|
|
console.log("onReadyShowDone");
|
|
showLabel.textContent = "Cover Img OK";
|
|
};
|
|
|
|
playerObj.onLoadFinish = () => {
|
|
playerObj.setVoice(1.0);
|
|
mediaInfo = playerObj.mediaInfo();
|
|
console.log("mediaInfo===========>", mediaInfo);
|
|
/*
|
|
meta:
|
|
durationMs: 144400
|
|
fps: 25
|
|
sampleRate: 44100
|
|
size: {
|
|
width: 864,
|
|
height: 480
|
|
},
|
|
audioNone : false
|
|
videoType: "vod"
|
|
*/
|
|
if (mediaInfo.meta.isHEVC === false) {
|
|
console.log("is not HEVC/H.265 media!");
|
|
//coverToast.removeAttribute('hidden');
|
|
//coverBtn.style.width = '100%';
|
|
//coverBtn.style.fontSize = '50px';
|
|
//coverBtn.innerHTML = 'is not HEVC/H.265 media!';
|
|
//return;
|
|
}
|
|
//console.log("is HEVC/H.265 media.");
|
|
|
|
playBtn.disabled = false;
|
|
|
|
if (mediaInfo.meta.audioNone) {
|
|
progressVoice.value = 0;
|
|
progressVoice.style.display = 'none';
|
|
} else {
|
|
playerObj.setVoice(0.5);
|
|
}
|
|
|
|
if (mediaInfo.videoType == "vod") {
|
|
cachePts.max = mediaInfo.meta.durationMs / 1000;
|
|
progressCont.max = mediaInfo.meta.durationMs / 1000;
|
|
ptsLabel.textContent = durationText(0) + '/' + durationText(progressCont.max);
|
|
} else {
|
|
cachePts.hidden = true;
|
|
progressCont.hidden = true;
|
|
ptsLabel.textContent = 'LIVE';
|
|
|
|
if (mediaInfo.meta.audioNone === true) {
|
|
// playBar.textContent = '||';
|
|
playerObj.play();
|
|
} else {
|
|
|
|
coverToast.removeAttribute('hidden');
|
|
coverBtn.onclick = () => {
|
|
// playBar.textContent = '||';
|
|
playAction();
|
|
coverToast.setAttribute('hidden', 'hidden');
|
|
};
|
|
}
|
|
|
|
}
|
|
|
|
showLabel.textContent = SHOW_DONE;
|
|
};
|
|
|
|
playerObj.onCacheProcess = (cPts) => {
|
|
// console.log("onCacheProcess => ", cPts);
|
|
try {
|
|
// cachePts.value = cPts;
|
|
let precent = cPts / progressCont.max;
|
|
let cacheWidth = precent * progressContW;
|
|
// console.log(precent, precent * progressCont.offsetWidth);
|
|
cachePts.style.width = cacheWidth + 'px';
|
|
} catch(err) {
|
|
console.log(err);
|
|
}
|
|
};
|
|
|
|
playerObj.onPlayTime = (videoPTS) => {
|
|
if (mediaInfo.videoType == "vod") {
|
|
// progressPts.value = videoPTS;
|
|
let precent = videoPTS / progressCont.max;
|
|
let progWidth = precent * progressContW;
|
|
// console.log(precent, precent * progressCont.offsetWidth);
|
|
progressPts.style.width = progWidth + 'px';
|
|
|
|
ptsLabel.textContent = durationText(videoPTS) + '/' + durationText(progressCont.max);
|
|
} else {
|
|
// ptsLabel.textContent = durationText(videoPTS) + '/LIVE';
|
|
ptsLabel.textContent = '/LIVE';
|
|
}
|
|
};
|
|
|
|
playerObj.do();
|
|
return playerObj;
|
|
};
|
|
|
|
|