206 lines
5.2 KiB
HTML
206 lines
5.2 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>H5STREAM VIDEO</title>
|
||
|
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||
|
|
<script src="js/jquery-3.1.1.js"></script>
|
||
|
|
<script src="js/bootstrap.js"></script>
|
||
|
|
<script src="js/adapter.js"></script>
|
||
|
|
<script src="js/platform.js"></script>
|
||
|
|
<script src="js/h5splayer.js"></script>
|
||
|
|
<script src="js/h5splayerhelper.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="css/h5splayer.css" />
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
@font-face
|
||
|
|
{
|
||
|
|
font-family: myRegular;
|
||
|
|
src: url('../../../alibabaFont/FZPingXYSJW.TTF');
|
||
|
|
}
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
font-family:myRegular ;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
body:hover .videoBox{
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.videoBox{
|
||
|
|
width:80px;
|
||
|
|
position: absolute;
|
||
|
|
line-height:30px;
|
||
|
|
height:30px;
|
||
|
|
bottom:0;
|
||
|
|
right:0;
|
||
|
|
color:#fff;
|
||
|
|
display: none;
|
||
|
|
font-size:12px;
|
||
|
|
z-index:9999999999 !important;
|
||
|
|
}
|
||
|
|
.videoBox>img{
|
||
|
|
float:right;
|
||
|
|
width:20px;
|
||
|
|
height:20px;
|
||
|
|
background: rgb(23,69,173);
|
||
|
|
padding:5px;
|
||
|
|
margin-right:5px;
|
||
|
|
border-radius: 2px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="h5videodiv1">
|
||
|
|
<video class="h5video1" id="h5sVideo1" autoplay webkit-playsinline playsinline></video>
|
||
|
|
<div class="playpause" id="playpause1"></div>
|
||
|
|
<div class="videoBox" >
|
||
|
|
<img src="./img/videoFullscreen.png" alt="" class="fullpage" state="close">
|
||
|
|
<img src="./img/exit.png" alt="" class="exit">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var timer;
|
||
|
|
var strToken;
|
||
|
|
strToken = GetURLParameter("token");
|
||
|
|
var strStream;
|
||
|
|
strStream = GetURLParameter("stream");
|
||
|
|
var strSession;
|
||
|
|
strSession = GetURLParameter("session");
|
||
|
|
|
||
|
|
|
||
|
|
var exitType=GetURLParameter("exitType");
|
||
|
|
if(exitType == "none"){
|
||
|
|
$(".exit").css("display","none");
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var conf1 = {
|
||
|
|
videoid: 'h5sVideo1',
|
||
|
|
protocol: window.location.protocol, //'http:' or 'https:'
|
||
|
|
// host: window.location.host, //'localhost:8080'
|
||
|
|
// host: '101.89.199.154:8080',
|
||
|
|
// token:'34020000001320010205',
|
||
|
|
// session:"976bc6a2-d1b2-4738-8d34-1b1084262dd2",
|
||
|
|
host:'43.15.198.61:18085',
|
||
|
|
token: strToken,
|
||
|
|
session: strSession, //session got from login
|
||
|
|
rootpath: '/', // '/'
|
||
|
|
streamcheck: 'true', //'true' or 'false' enable/disable check stream and reconnect, default is true, only valid for WS
|
||
|
|
hlsver: 'v1', //v1 is for ts, v2 is for fmp4
|
||
|
|
consolelog: 'true' // 'true' or 'false' enable/disable console.log
|
||
|
|
};
|
||
|
|
|
||
|
|
var v1 = new H5sPlayerWS(conf1);
|
||
|
|
if (GetURLParameter("autoplay") != undefined) {
|
||
|
|
$('#h5sVideo1').prop("muted", true);
|
||
|
|
function autoplayFunction() {
|
||
|
|
timer = setTimeout(function () {
|
||
|
|
$('#h5sVideo1').parent().click()
|
||
|
|
$('#playpause1').fadeOut();
|
||
|
|
}, 0);
|
||
|
|
return timer;
|
||
|
|
}
|
||
|
|
autoplayFunction();
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#h5sVideo1').get(0).onplay = function () {
|
||
|
|
console.log("The video has started to play");
|
||
|
|
};
|
||
|
|
|
||
|
|
$('#h5sVideo1').parent().click(function () {
|
||
|
|
if ($(this).children(".h5video1").get(0).paused) {
|
||
|
|
//$(this).children(".h5video1").get(0).play();
|
||
|
|
if (v1 != null) {
|
||
|
|
v1.disconnect();
|
||
|
|
delete v1;
|
||
|
|
v1 = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
v1 = new H5sPlayerWS(conf1);
|
||
|
|
v1.connect();
|
||
|
|
|
||
|
|
$(this).children(".playpause").fadeOut();
|
||
|
|
} else {//点击页面暂停的
|
||
|
|
// v1.disconnect();
|
||
|
|
// delete v1;
|
||
|
|
// v1 = null;
|
||
|
|
// $(this).children(".h5video1").get(0).pause();
|
||
|
|
// $(this).children(".playpause").fadeIn();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$(".exit").on('click',function(){
|
||
|
|
closeVideoData()
|
||
|
|
})
|
||
|
|
|
||
|
|
//页面销毁触发
|
||
|
|
window.onbeforeunload=function(){
|
||
|
|
closeVideoData();
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeVideoData(){
|
||
|
|
var param = {
|
||
|
|
"sender":"children",
|
||
|
|
"receiver":"parent",
|
||
|
|
"deviceid":strToken,
|
||
|
|
"cmd":"closePage"
|
||
|
|
};
|
||
|
|
window.parent.postMessage(param,'*');
|
||
|
|
window.close();
|
||
|
|
}
|
||
|
|
|
||
|
|
$(".fullpage").on('click',function(){
|
||
|
|
var state=$(this).attr("state");
|
||
|
|
if(state=="close"){
|
||
|
|
fullScreen();
|
||
|
|
$(this).attr("state","open");
|
||
|
|
}else{
|
||
|
|
exitFullscreen();
|
||
|
|
$(this).attr("state","close");
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
//全屏
|
||
|
|
function fullScreen() {
|
||
|
|
var element = document.documentElement;
|
||
|
|
if (element.requestFullscreen) {
|
||
|
|
element.requestFullscreen();
|
||
|
|
} else if (element.msRequestFullscreen) {
|
||
|
|
element.msRequestFullscreen();
|
||
|
|
} else if (element.mozRequestFullScreen) {
|
||
|
|
element.mozRequestFullScreen();
|
||
|
|
} else if (element.webkitRequestFullscreen) {
|
||
|
|
element.webkitRequestFullscreen();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//退出全屏
|
||
|
|
function exitFullscreen() {
|
||
|
|
if (document.exitFullscreen) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
} else if (document.msExitFullscreen) {
|
||
|
|
document.msExitFullscreen();
|
||
|
|
} else if (document.mozCancelFullScreen) {
|
||
|
|
document.mozCancelFullScreen();
|
||
|
|
} else if (document.webkitExitFullscreen) {
|
||
|
|
document.webkitExitFullscreen();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|