20230329
This commit is contained in:
parent
e9d4c00ae9
commit
fde8c6b2f8
File diff suppressed because it is too large
Load Diff
|
|
@ -14,22 +14,24 @@
|
|||
"dayjs": "^1.11.7",
|
||||
"element-resize-detector": "^1.2.4",
|
||||
"element-ui": "^2.15.6",
|
||||
"flv.js": "^1.6.2",
|
||||
"html2canvas": "^1.4.1",
|
||||
"js-cookie": "^3.0.1",
|
||||
"jspdf": "^2.5.1",
|
||||
"moment": "^2.29.4",
|
||||
"mqtt": "^3.0.0",
|
||||
"node-sass": "^8.0.0",
|
||||
"postcss-plugin-px2rem": "^0.8.1",
|
||||
"screenfull": "5.2.0",
|
||||
"v-scale-screen": "^1.0.0",
|
||||
"video.js": "^8.0.4",
|
||||
"vue": "^2.5.2",
|
||||
"vue-awesome-swiper": "^4.1.1",
|
||||
"vue-cropper": "^0.5.8",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue2-scale-box": "^0.1.4",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.0.1",
|
||||
"moment": "^2.29.4"
|
||||
"vuex": "3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
|
|
|||
|
|
@ -51,8 +51,8 @@
|
|||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="1024"
|
||||
height="768"
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
|
@ -65,7 +65,10 @@
|
|||
//var flvUrl = "ws://192.168.3.245/transform/ch1.live.flv";
|
||||
var flvUrl = "http://127.0.0.1:10800/flv/live/stream_3.flv";
|
||||
var player = null;
|
||||
|
||||
window.addEventListener('message',function(messageEvent){
|
||||
console.log("拿到数据",messageEvent.data)
|
||||
// data= messageEvent.data;
|
||||
})
|
||||
function initPlayer(){
|
||||
var videoContainer = document.getElementById("videoContainer");
|
||||
var pObjs = videoContainer.childNodes;
|
||||
|
|
@ -73,7 +76,7 @@ function initPlayer(){
|
|||
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='1024' height='768' data-setup='{}'><source src="+ flvUrl +" type='video/x-flv'></video>";
|
||||
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'],
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
width="100%"
|
||||
height="100%"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
|
@ -118,6 +118,12 @@ videoFlvPlayer.on('timeupdate',function () {
|
|||
}
|
||||
|
||||
});
|
||||
|
||||
// window.addEventListener('message', (e) => {
|
||||
// console.log("拿到数据", e.data);
|
||||
// });
|
||||
window.addEventListener('message',function(messageEvent){
|
||||
console.log("拿到数据",messageEvent.data)
|
||||
// data= messageEvent.data;
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需
|
|||
// 使用momentjs这个日期格式化类库实现日期的格式化功能
|
||||
return moment(input).format(fmtstring);
|
||||
});
|
||||
|
||||
import videojs from "video.js";
|
||||
import "video.js/dist/video-js.css";
|
||||
Vue.prototype.$video = videojs;
|
||||
Vue.prototype.$moment = moment
|
||||
Vue.config.productionTip = false
|
||||
//MQTT订阅
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
:style="{ 'background-image': !boxNone ? `url(${require(`../assets/pic/exitFull.png`)}` : `url(${require(`../assets/pic/fullScreen.png`)}` }">
|
||||
</div> -->
|
||||
<!-- 首页 -->
|
||||
<ModelScreenComponents v-if="indexShow"/>
|
||||
<ModelScreenComponents v-if="indexShow" :environmentData="environmentData"/>
|
||||
<!-- 人员管理 -->
|
||||
<PersonnelComponents v-if="personnelShow"/>
|
||||
<!-- 视频监控 -->
|
||||
|
|
@ -334,7 +334,8 @@ export default {
|
|||
menuType: null,
|
||||
numberList: [5, 5],
|
||||
boxNone: true,
|
||||
topicSends:[]
|
||||
topicSends:[],
|
||||
environmentData:[]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -380,7 +381,7 @@ export default {
|
|||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||||
console.log("环境msg", msg) //msg为转换后的JSON数据
|
||||
|
||||
this.environmentData=msg.data
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -214,7 +214,14 @@
|
|||
v-for="(item,index) in videoList"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.thumbnail" alt="" />
|
||||
<img v-show="iframeShow==false" :src="item.thumbnail" alt="" />
|
||||
<div class="openChange" @click="openChangebtn" v-show="iframeShow==false"> <img src="../assets/pic/play.png" alt=""></div>
|
||||
|
||||
<!-- <Video></Video> -->
|
||||
<iframe ref="iframe" id="iframeid" :src="src" frameborder="O" class="iframe" scrolling="auto" width="100%"
|
||||
height="100%" v-show="iframeShow">
|
||||
</iframe>
|
||||
<!-- <button @click="vueSendMsg">vue向iframe传递信息</button> -->
|
||||
<div class="smallBox">{{item.equipmentName}}</div>
|
||||
</div>
|
||||
<!-- <div style="position: relative" class="videoFat">
|
||||
|
|
@ -349,6 +356,8 @@ import mdScreenPie from "@/components/common/mdScreenPie";
|
|||
import Swiper from "@/components/common/carousel";
|
||||
import Resize from "../utils/Resize.vue";
|
||||
import axios from "axios";
|
||||
import Video from "./video";
|
||||
import { ref, nextTick, onMounted } from 'vue'
|
||||
import {
|
||||
getProjectInfo,
|
||||
getUserMonitorInfo,
|
||||
|
|
@ -360,14 +369,23 @@ import {
|
|||
} from "@/api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
props: {
|
||||
environmentData:{
|
||||
type:Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
mdScreenPie,
|
||||
BarChart,
|
||||
Swiper,
|
||||
Resize,
|
||||
Video
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
iframeShow:false,
|
||||
videoList:[],//视频监控数据
|
||||
jinduList:0, //计算进度条的宽度
|
||||
progress:0, //计算进度条的值
|
||||
|
|
@ -383,6 +401,10 @@ export default {
|
|||
weatherItem: {},
|
||||
tienum: "",
|
||||
showType: true,
|
||||
flvUrl:"http://127.0.0.1:10800/flv/live/stream_3.flv",
|
||||
src:"",
|
||||
iframe:"",
|
||||
player: null,
|
||||
boxList: [
|
||||
{
|
||||
c1: "开工",
|
||||
|
|
@ -426,38 +448,46 @@ export default {
|
|||
src: "@/assets/pic/23.png",
|
||||
},
|
||||
], // 专题数据列表
|
||||
//1633761781274296326 甲烷监测 CVALUE 甲烷1633761781270102018 氧气监测 OVALUE 氧气1633761781282684929 硫化氢监测 SVALUE 硫化氢1633761781286879234 温湿度监测 TVALUE 湿度1633761781274296322 二氧化碳监测 OVALUE 二氧化碳
|
||||
iconPicList: [
|
||||
{
|
||||
// id:'1633761781286879234',
|
||||
id:'',
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
id:'1633761781286879234',
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
id:'1633761781270102018',
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
id:'1633761781274296322',
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
id:'1633761781274296326',
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
id:'1633761781282684929',
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
|
|
@ -535,6 +565,17 @@ export default {
|
|||
boxNone: true,
|
||||
topicSends: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
environmentData: {
|
||||
deep: true,
|
||||
handler (val) {
|
||||
this.$nextTick(() => {
|
||||
this.changeEnvironmentData(val)
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
|
|
@ -544,6 +585,30 @@ export default {
|
|||
this.getTime();
|
||||
},
|
||||
methods: {
|
||||
//获取环境数据
|
||||
changeEnvironmentData(val){
|
||||
console.log("val",val)
|
||||
var environmentDataNew = []
|
||||
environmentDataNew = val.map(item => {
|
||||
console.log("item",Object.keys(item))
|
||||
console.log("item",Object.values(item)[0][0].value)
|
||||
return {
|
||||
id: Object.keys(item)[0],
|
||||
val: Object.values(item)[0][0].value,
|
||||
dataId : Object.values(item)[0][0].dataId,
|
||||
|
||||
}
|
||||
})
|
||||
console.log("environmentDataNew",environmentDataNew)
|
||||
for(var i = 0; i < environmentDataNew.length; i++){
|
||||
for(var j = 0; j < this.iconPicList.length; j++){
|
||||
if(this.iconPicList[j].id==environmentDataNew[i].id){
|
||||
this.iconPicList[j].val = environmentDataNew[i].val
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createMqtt() {
|
||||
this.topicSends = ["/SC/pub/uwb"];
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
|
|
@ -652,9 +717,44 @@ export default {
|
|||
}, 800);
|
||||
}
|
||||
},
|
||||
// sendMessage(){
|
||||
// this.iframe.postMessage({ data:"传给你个值呀"},'*');
|
||||
// },
|
||||
// vue获取iframe传递过来的信息
|
||||
getiframeMsg(event){
|
||||
const res = event.data;
|
||||
console.log(event)
|
||||
if(res.cmd == 'myIframe'){
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
// vue向iframe传递信息
|
||||
vueSendMsg(){
|
||||
this.iframeMethods()
|
||||
// const iframeWindow = this.$refs.iframe.contentWindow;
|
||||
const iframeWindow =document.getElementById('iframeid').contentWindow;
|
||||
iframeWindow.postMessage({
|
||||
cmd:'myVue',
|
||||
params : {
|
||||
info: 'Vue向iframe传递的消息',
|
||||
}
|
||||
},'*')
|
||||
|
||||
},
|
||||
// 触发iframe中的方法
|
||||
iframeMethods(){
|
||||
document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
|
||||
},
|
||||
openChangebtn(){
|
||||
this.iframeShow = true
|
||||
this.vueSendMsg()
|
||||
}
|
||||
},
|
||||
|
||||
// destroyed(){
|
||||
// window.removeEventListener("message",this.sendMessage)
|
||||
// },
|
||||
mounted() {
|
||||
|
||||
//基本情况
|
||||
getProjectInfo().then((res) => {
|
||||
this.introduction = res.data.data[0].introduction;
|
||||
|
|
@ -747,6 +847,14 @@ export default {
|
|||
this.videoList = Object.keys(res.data.data).map((item,index)=>{
|
||||
return {thumbnail:res.data.data[item].thumbnail,equipmentName:res.data.data[item].equipmentName}
|
||||
})
|
||||
// this.$nextTick(function(){
|
||||
// this.src = '../static/flv/demo1.html';
|
||||
// console.log("this.$refs.iframeld",this.$refs.iframeld)
|
||||
// this.iframe = this.$refs.iframeld.contentWindow
|
||||
// window.addEventListener("message",this.sendMessage);
|
||||
// });
|
||||
this.src = '../static/flv/demo1.html';
|
||||
window.addEventListener('message',this.getiframeMsg)
|
||||
})
|
||||
});
|
||||
|
||||
|
|
@ -758,6 +866,7 @@ export default {
|
|||
})();
|
||||
};
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1161,6 +1270,13 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.openChange{
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 45%;
|
||||
left: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -257,44 +257,7 @@ export default {
|
|||
meeting:{}, //站班会记录
|
||||
boxNone: true,
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
@ -387,7 +350,6 @@ export default {
|
|||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
console.log("this.topicSends", this.topicSends);
|
||||
console.log("this.iconPicList", this.iconPicList);
|
||||
},
|
||||
mounted() {
|
||||
this.getUser();
|
||||
|
|
@ -518,7 +480,7 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
.zzc {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -329,44 +329,6 @@ export default {
|
|||
return {
|
||||
dialogShow: false,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
table2Data: [
|
||||
{
|
||||
entName: "开工",
|
||||
|
|
|
|||
|
|
@ -319,44 +319,6 @@ export default {
|
|||
projectInvestment:[],//投资进度
|
||||
dialogShow: false,
|
||||
colorList: ['#00A572', '#007EC1', '#DA9300', '#878787'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
table2Data: [],
|
||||
tableData: [],
|
||||
qyList: [
|
||||
|
|
@ -538,7 +500,7 @@ export default {
|
|||
|
||||
<style scoped lang="less">
|
||||
.zzc{
|
||||
background: rgba(0, 0 ,0, 0.6);
|
||||
background: rgba(0, 0 ,0, 0.4);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
<template>
|
||||
<div class="tunnelvideo">
|
||||
<video
|
||||
class="videosmall"
|
||||
ref="videosmallone"
|
||||
preload="auto"
|
||||
muted
|
||||
autoplay
|
||||
type="rtmp/flv"
|
||||
>
|
||||
<source src="" />
|
||||
</video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import flvjs from "flv.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
player: null,
|
||||
}
|
||||
},
|
||||
|
||||
//3.在销毁的声明周期中 必须要销毁掉播放器的容器！！！！血的教训
|
||||
beforeUnmount() {
|
||||
if(this.player){
|
||||
this.player.pause();
|
||||
this.player.unload();
|
||||
this.player.detachMediaElement();
|
||||
this.player.destroy();
|
||||
this.player = null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
// if (flvjs.isSupported()) {
|
||||
// var videoElement = document.getElementById('videoElement');
|
||||
// this.flvPlayer = flvjs.createPlayer({
|
||||
// type: 'rtsp',
|
||||
// isLive: true,
|
||||
// hasAudio: false,
|
||||
// url: 'rtsp://admin:5Gpmlabs@172.16.1.242:554/cam/realmonitor?channel=1&subtype=0'
|
||||
// });
|
||||
// this.flvPlayer.attachMediaElement(videoElement);
|
||||
// this.flvPlayer.load();
|
||||
// this.flvPlayer.play();
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// play() {
|
||||
// this.flvPlayer.play();
|
||||
// }
|
||||
//2.在方法中
|
||||
init() { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
|
||||
setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
|
||||
var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
|
||||
if (flvjs.isSupported()) {
|
||||
//因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
|
||||
if (this.player !== null) {
|
||||
this.player.pause();
|
||||
this.player.unload();
|
||||
this.player.detachMediaElement();
|
||||
this.player.destroy();
|
||||
this.player = null;
|
||||
}
|
||||
this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
|
||||
{
|
||||
type: "flv",
|
||||
url: 'ws://192.168.0.20:9999/rtsp/1/channel=1&subtype=0/?url=rtsp://admin:dhtest123456@192.168.0.162:554', //你的url地址
|
||||
isLive: true, //数据源是否为直播流
|
||||
hasAudio: false, //数据源是否包含有音频
|
||||
hasVideo: true, //数据源是否包含有视频
|
||||
enableStashBuffer: true, //是否启用缓存区
|
||||
},
|
||||
{
|
||||
enableWorker: false, //不启用分离线程
|
||||
enableStashBuffer: false, //关闭IO隐藏缓冲区
|
||||
autoCleanupSourceBuffer: true, //自动清除缓存
|
||||
lazyLoad: false,
|
||||
}
|
||||
);
|
||||
this.player.attachMediaElement(videoElement); //放到dom中去
|
||||
this.player.load();//准备完成
|
||||
//!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
|
||||
this.player.play();//播放
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// // 播放器存在清除播放器
|
||||
// if (this.player) {
|
||||
// this.player.destroy()
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrapper {
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
margin: 100px 30px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.iframe {
|
||||
width: 1024px;
|
||||
height: 608px;
|
||||
position: absolute;
|
||||
top: -150px;
|
||||
left: -120px;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -198,44 +198,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
|
|
|
|||
|
|
@ -26,9 +26,16 @@
|
|||
class="scFathChild"
|
||||
v-for="(item, i) in videoAllList"
|
||||
:key="i"
|
||||
@click="tzSp(item.equipmentName, item.id)"
|
||||
@click="openChangebtn(item)"
|
||||
>
|
||||
<img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" />
|
||||
<!-- <img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" /> -->
|
||||
<img v-show="item.status==false" :src="item.thumbnail" alt="" style="width: 100%; height: 100%"/>
|
||||
<div class="openChange" @click="tzSp(item.equipmentName, item.id)" v-show="item.status==false">
|
||||
<img src="../assets/pic/play.png" alt="" style="width:100%;height:100%">
|
||||
</div>
|
||||
<iframe ref="iframe" id="iframeid" :src="src" frameborder="O" class="iframe" scrolling="auto" width="100%"
|
||||
height="100%" v-show="item.status">
|
||||
</iframe>
|
||||
<div class="childrenBox">
|
||||
{{ item.equipmentName }}
|
||||
</div>
|
||||
|
|
@ -236,44 +243,6 @@ export default {
|
|||
videoAllList: [], //获取所有监控
|
||||
videoList: [],
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
@ -336,6 +305,8 @@ export default {
|
|||
numberList: [5, 5],
|
||||
rightThreeHeightBox: 0,
|
||||
leftOneBox: 0,
|
||||
src:"",
|
||||
iframeShow:false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -397,6 +368,36 @@ export default {
|
|||
}, 800);
|
||||
}
|
||||
},
|
||||
// vue获取iframe传递过来的信息
|
||||
getiframeMsg(event){
|
||||
const res = event.data;
|
||||
console.log(event)
|
||||
if(res.cmd == 'myIframe'){
|
||||
console.log(res)
|
||||
}
|
||||
},
|
||||
// vue向iframe传递信息
|
||||
vueSendMsg(){
|
||||
this.iframeMethods()
|
||||
// const iframeWindow = this.$refs.iframe.contentWindow;
|
||||
const iframeWindow =document.getElementById('iframeid').contentWindow;
|
||||
iframeWindow.postMessage({
|
||||
cmd:'myVue',
|
||||
params : {
|
||||
info: 'Vue向iframe传递的消息',
|
||||
}
|
||||
},'*')
|
||||
|
||||
},
|
||||
// 触发iframe中的方法
|
||||
iframeMethods(){
|
||||
document.getElementById('iframeid').contentWindow.triggerByVue('通过Vue触发iframe中的方法');
|
||||
},
|
||||
openChangebtn(item){
|
||||
item.status = true
|
||||
// this.iframeShow = true
|
||||
this.vueSendMsg()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.switchDiv();
|
||||
|
|
@ -409,6 +410,7 @@ export default {
|
|||
thumbnail: res.data.data[item].thumbnail,
|
||||
equipmentName: res.data.data[item].equipmentName,
|
||||
id: res.data.data[item].id,
|
||||
status:false
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -422,6 +424,8 @@ export default {
|
|||
id: res.data.data[item].id,
|
||||
};
|
||||
});
|
||||
this.src = '../static/flv/demo1.html';
|
||||
window.addEventListener('message',this.getiframeMsg)
|
||||
});
|
||||
//获取摄像头数量接口
|
||||
getCameraCount().then((res) => {
|
||||
|
|
@ -510,6 +514,13 @@ export default {
|
|||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.openChange{
|
||||
position: absolute;
|
||||
width: 9%;
|
||||
height: 10%;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -158,44 +158,6 @@ export default {
|
|||
end: ''
|
||||
},
|
||||
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
|
|
|
|||
|
|
@ -190,44 +190,6 @@ export default {
|
|||
end: "",
|
||||
},
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch101.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch102.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch103.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch104.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch105.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch106.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch107.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch108.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch109.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch110.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch201.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch202.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch203.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch204.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch205.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.1.200/transform/ch206.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var videoFlvPlayer1 = videojs("video1");
|
||||
var videoFlvPlayer2 = videojs("video2");
|
||||
var videoFlvPlayer3 = videojs("video3");
|
||||
var videoFlvPlayer4 = videojs("video4");
|
||||
var videoFlvPlayer5 = videojs("video5");
|
||||
var videoFlvPlayer6 = videojs("video6");
|
||||
var videoFlvPlayer7 = videojs("video7");
|
||||
var videoFlvPlayer8 = videojs("video8");
|
||||
var videoFlvPlayer9 = videojs("video9");
|
||||
var videoFlvPlayer10 = videojs("video10");
|
||||
var videoFlvPlayer11 = videojs("video10");
|
||||
var videoFlvPlayer12 = videojs("video10");
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch1.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch2.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch3.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.2.245/transform/ch20.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch5.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch6.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch7.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch9.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch18.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch19.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch12.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch13.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:300px">
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch14.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch15.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch16.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
<div style="float:left;width:25%;text-align: center;">
|
||||
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
|
||||
<source src="ws://192.168.3.245/transform/ch17.live.flv" type='video/x-flv' />
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var videoFlvPlayer1 = videojs("video1");
|
||||
var videoFlvPlayer2 = videojs("video2");
|
||||
var videoFlvPlayer3 = videojs("video3");
|
||||
var videoFlvPlayer4 = videojs("video4");
|
||||
var videoFlvPlayer5 = videojs("video5");
|
||||
var videoFlvPlayer6 = videojs("video6");
|
||||
var videoFlvPlayer7 = videojs("video7");
|
||||
var videoFlvPlayer8 = videojs("video8");
|
||||
var videoFlvPlayer9 = videojs("video9");
|
||||
var videoFlvPlayer10 = videojs("video10");
|
||||
var videoFlvPlayer11 = videojs("video10");
|
||||
var videoFlvPlayer12 = videojs("video10");
|
||||
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
<!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>
|
||||
.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;
|
||||
}
|
||||
</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">
|
||||
<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://127.0.0.1:10800/flv/live/stream_3.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>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.159:8080/app/ch1" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
// window.addEventListener('message', (e) => {
|
||||
// console.log("拿到数据", e.data);
|
||||
// });
|
||||
window.addEventListener('message',function(messageEvent){
|
||||
console.log("拿到数据",messageEvent.data)
|
||||
// data= messageEvent.data;
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch3.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.3.245/transform/ch4.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "http://192.168.3.245/transform/ch4.live.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch5.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch7.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
<!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>Document</title>
|
||||
<!-- 1.引入videojs样式文件 -->
|
||||
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
|
||||
|
||||
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
|
||||
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 2.添加video标签 -->
|
||||
<!-- vjs-big-play-centered可使大的播放按钮居中，vjs-fluid可使视频占满容器 -->
|
||||
<video
|
||||
id="my-video"
|
||||
class="video-js vjs-big-play-centered"
|
||||
controls
|
||||
preload="auto"
|
||||
autoplay=true
|
||||
width="640"
|
||||
height="264"
|
||||
|
||||
data-setup="{}"
|
||||
>
|
||||
|
||||
<source src="http://192.168.1.211/live/ch1.live.flv" type='video/x-flv' />
|
||||
<!--source src="http://localhost:10800/hls/stream_1/stream_1_live.m3u8" type='application/x-mpegURL' /-->
|
||||
<!--source src="http://localhost:10800/flv/hls/stream_1.flv" type='video/x-flv' /-->
|
||||
|
||||
<!--source src="http://192.168.1.203:8080/app/ch1" type='video/x-flv' /-->
|
||||
<!--source src="1.mp4" type="video/mp4" /-->
|
||||
</video>
|
||||
|
||||
<!-- 3.引入video.js库文件 -->
|
||||
<script src="video.min.js"></script>
|
||||
<script src="flv.min.js"></script>
|
||||
<script src="videojs-flvjs.min.js"></script>
|
||||
</body>
|
||||
<script>
|
||||
var videoFlvPlayer = videojs('my-video');
|
||||
//console.log(videoFlvPlayer.videoFlvOptions);
|
||||
/*
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
//console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
|
||||
console.log(differTime);
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 10 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 10){
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
$scope.videoPlay({liveUrl: videoFlvOptions.sources[0].src})
|
||||
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
*/
|
||||
var allDiffTime=0;
|
||||
var startTime=new Date().getTime();
|
||||
console.log("now:"+startTime);
|
||||
videoFlvPlayer.on('timeupdate',function () {
|
||||
console.log("正在播放------");
|
||||
|
||||
// 计算表最新推流的时间和现在播放器播放推流的时间
|
||||
let differTime = videoFlvPlayer.buffered().end(0) - videoFlvPlayer.currentTime();
|
||||
console.log(differTime);
|
||||
|
||||
|
||||
// 差值小于1.5s时根据1倍速进行播放
|
||||
if (differTime < 1.5){
|
||||
videoFlvPlayer.playbackRate(1);
|
||||
}
|
||||
// 差值大于1.5s小于10s根据1.2倍速进行播放
|
||||
if (differTime < 5 && differTime > 1.5) {
|
||||
|
||||
videoFlvPlayer.playbackRate(1.2);
|
||||
}
|
||||
|
||||
//console.log(videoFlvPlayer.buffered);
|
||||
// 差值大于10s时进行重新加载直播流
|
||||
if (differTime > 5){
|
||||
|
||||
var endTime=new Date().getTime();
|
||||
allDiffTime=endTime-startTime;
|
||||
console.log("---->"+allDiffTime);
|
||||
console.log("重新刷新流!!");
|
||||
// 注意这里重新加载video是自己封装的方法，需要销毁video并重新创建video
|
||||
//videoFlvPlayer.videoPlay({liveUrl: 'http://192.168.1.203:8080/app/ch1'})
|
||||
videoFlvPlayer.src(
|
||||
{type: "video/x-flv", src: "ws://localhost:10800/ws-flv/hls/stream_1.flv"}
|
||||
);
|
||||
videoFlvPlayer.play();
|
||||
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
!function e(t,r,o){function n(l,f){if(!r[l]){if(!t[l]){var u="function"==typeof require&&require;if(!f&&u)return u(l,!0);if(i)return i(l,!0);var a=new Error("Cannot find module '"+l+"'");throw a.code="MODULE_NOT_FOUND",a}var c=r[l]={exports:{}};t[l][0].call(c.exports,function(e){var r=t[l][1][e];return n(r||e)},c,c.exports,e,t,r,o)}return r[l].exports}for(var i="function"==typeof require&&require,l=0;l<o.length;l++)n(o[l]);return n}({1:[function(e,t,r){(function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(r,"__esModule",{value:!0});var i=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),l=function e(t,r,o){null===t&&(t=Function.prototype);var n=Object.getOwnPropertyDescriptor(t,r);if(void 0===n){var i=Object.getPrototypeOf(t);return null===i?void 0:e(i,r,o)}if("value"in n)return n.value;var l=n.get;if(void 0!==l)return l.call(o)},f="undefined"!=typeof window?window.videojs:void 0!==e?e.videojs:null,u=function(e){return e&&e.__esModule?e:{default:e}}(f),a=u.default.getTech("Html5"),c=u.default.mergeOptions||u.default.util.mergeOptions,s={mediaDataSource:{},config:{}},p=function(e){function r(e,n){return t(this,r),e=c(s,e),o(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e,n))}return n(r,e),i(r,[{key:"setSrc",value:function(e){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy());var t=this.options_.mediaDataSource,r=this.options_.config;t.type=void 0===t.type?"flv":t.type,t.url=e,this.flvPlayer=window.flvjs.createPlayer(t,r),this.flvPlayer.attachMediaElement(this.el_),this.flvPlayer.load()}},{key:"dispose",value:function(){this.flvPlayer&&(this.flvPlayer.detachMediaElement(),this.flvPlayer.destroy()),l(r.prototype.__proto__||Object.getPrototypeOf(r.prototype),"dispose",this).call(this)}}]),r}(a);p.isSupported=function(){return window.flvjs&&window.flvjs.isSupported()},p.formats={"video/flv":"FLV","video/x-flv":"FLV"},p.canPlayType=function(e){return p.isSupported()&&e in p.formats?"maybe":""},p.canPlaySource=function(e,t){return p.canPlayType(e.type)},p.VERSION="0.2.0",u.default.registerTech("Flvjs",p),r.default=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1]);
|
||||
Loading…
Reference in New Issue