182 lines
4.3 KiB
HTML
182 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<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: 100%;
|
|
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;
|
|
}
|
|
/* 中间的播放箭头 */
|
|
.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: 240px!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%"
|
|
height="100%" >
|
|
<video
|
|
id="videojs-flvjs-player"
|
|
class="video-js vjs-default-skin vjs-big-play-centered"
|
|
controls
|
|
preload="auto"
|
|
autoplay=true
|
|
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 player = 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' controls preload='auto' autoplay=true width='100%' height='100%' data-setup='{}'><source src="+ flvUrl +" 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: flvUrl,
|
|
type: 'video/x-flv'
|
|
}],
|
|
controls: true,
|
|
preload: "none"
|
|
},
|
|
function onPlayerReady() {
|
|
|
|
player.on('error',function(){
|
|
console.log('first source load fail')
|
|
player.src({
|
|
src: flvUrl,
|
|
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>
|