188 lines
5.2 KiB
HTML
188 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" style="height: 100%!important;">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>视频播放软件</title>
|
|
<link href="video-js.css" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
width: 97%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video-js .vjs-big-play-button {
|
|
font-size: 2.5em;
|
|
line-height: 2.3em;
|
|
height: 2.5em;
|
|
width: 2.5em;
|
|
-webkit-border-radius: 2.5em;
|
|
-moz-border-radius: 2.5em;
|
|
border-radius: 2.5em;
|
|
background-color: #73859f;
|
|
background-color: rgba(115, 133, 159, .5);
|
|
border-width: 0.15em;
|
|
margin-top: -1.25em;
|
|
margin-left: -1.75em;
|
|
border-radius: 5%;
|
|
}
|
|
|
|
/* 中间的播放箭头 */
|
|
.vjs-big-play-button .vjs-icon-placeholder {
|
|
font-size: 1.63em;
|
|
}
|
|
|
|
/* 加载圆圈 */
|
|
.vjs-loading-spinner {
|
|
font-size: 2.5em;
|
|
width: 2em;
|
|
height: 2em;
|
|
border-radius: 1em;
|
|
margin-top: -1em;
|
|
margin-left: -1.5em;
|
|
}
|
|
|
|
.videojs-flvjs-player-dimensions {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
/* #videojs-flvjs-player{
|
|
width: 100%!important;
|
|
height: 100%!important;
|
|
} */
|
|
|
|
</style>
|
|
|
|
<script src="video.min.js"></script>
|
|
<script src="flv.min.js"></script>
|
|
<script src="videojs-flvjs.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="videoContainer" width="100%" style="height: 100%!important;">
|
|
<video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
|
|
autoplay=true muted="muted" width="100%" height="100%" data-setup="{}">
|
|
|
|
<source src="" type='video/x-flv' />
|
|
</video>
|
|
<!-- <button onclick="iframeSendMsg()">iframe向Vue传消息</button> -->
|
|
</div>
|
|
</body>
|
|
<script>
|
|
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
|
// var flvUrl = "http://175.27.191.156:18080/transform/ch1.live.flv";
|
|
var flvUrl = "";
|
|
var player = null;
|
|
function getQueryString(name) {
|
|
var reg = new RegExp("(^|&)" + name + "=([^'']*)(&|$)", "i");
|
|
// var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
|
var r = window.location.search.substr(1).match(reg);
|
|
if (r != null) return unescape(r[2]); return null;
|
|
}
|
|
// iframe向vue传递信息
|
|
function iframeSendMsg() {
|
|
window.parent.postMessage({
|
|
cmd: 'myIframe',
|
|
params: {
|
|
info: 'iframe向Vue传递的消息',
|
|
}
|
|
}, '*');
|
|
};
|
|
// iframe获取Vue传递过来的信息
|
|
window.addEventListener("message", getVueMsg);
|
|
|
|
function getVueMsg(event) {
|
|
const res = event.data;
|
|
if (res.cmd == 'myVue') {
|
|
console.log(res)
|
|
}
|
|
};
|
|
|
|
function triggerByVue(msg) {
|
|
console.log(msg)
|
|
player.play();
|
|
}
|
|
|
|
function initPlayer() {
|
|
var videoContainer = document.getElementById("videoContainer");
|
|
var pObjs = videoContainer.childNodes;
|
|
for (var i = pObjs.length - 1; i >= 0; i--) {
|
|
videoContainer.removeChild(pObjs[i]);
|
|
}
|
|
|
|
videoContainer.innerHTML =
|
|
"<video id='videojs-flvjs-player' class='video-js vjs-default-skin vjs-big-play-centered' muted='muted' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src=" +
|
|
getQueryString('videoUrl') + " type='video/x-flv'></video>";
|
|
|
|
player = videojs('videojs-flvjs-player', {
|
|
techOrder: ['html5', 'flvjs'],
|
|
flvjs: {
|
|
mediaDataSource: {
|
|
isLive: true,
|
|
cors: true,
|
|
withCredentials: false,
|
|
enableStashBuffer: false,
|
|
autoCleanupSourceBuffer: true,
|
|
autoCleanupMaxBackwardDuration: 12,
|
|
autoCleanupMinBackwardDuration: 60,
|
|
stashInitialSize: 128
|
|
},
|
|
|
|
},
|
|
sources: [{
|
|
src: getQueryString('videoUrl'),
|
|
type: 'video/x-flv'
|
|
}],
|
|
controls: true,
|
|
preload: "none"
|
|
},
|
|
function onPlayerReady() {
|
|
|
|
player.on('error', function () {
|
|
console.log('first source load fail')
|
|
player.src({
|
|
src: getQueryString('videoUrl'),
|
|
type: 'video/x-flv'
|
|
});
|
|
player.ready(function () {
|
|
console.log('player ready')
|
|
player.load();
|
|
player.play();
|
|
});
|
|
});
|
|
player.on('waiting', function () {
|
|
// console.log('stream wainting....');
|
|
window.parent.postMessage({
|
|
cmd: 'myIframe',
|
|
params: {
|
|
info: 'iframe向Vue传递的消息',
|
|
}
|
|
}, '*');
|
|
//player.pause();
|
|
//player.dispose();
|
|
//player = null;
|
|
//initPlayer();
|
|
});
|
|
player.on('ended', function () {
|
|
console.log('stream ended....');
|
|
player.pause();
|
|
player.dispose();
|
|
player = null;
|
|
initPlayer();
|
|
});
|
|
});
|
|
}
|
|
|
|
initPlayer();
|
|
|
|
</script>
|
|
|
|
</html>
|