‘daijinzheng@xingtongworld.com’
3 years ago
3 changed files with 187 additions and 37 deletions
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<v-scale-screen width="1920" height="1080"> |
||||
|
<div id="ty"> |
||||
|
|
||||
|
<div class="main"> |
||||
|
<div class="center"> |
||||
|
<div class="item"> |
||||
|
<!-- <Video :src="src1" :poster="poster" /> --> |
||||
|
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
||||
|
<video class="videosmall" ref="videosmallone" preload="auto" muted autoplay type="rtmp/flv"> |
||||
|
<source src="" /> |
||||
|
</video> |
||||
|
|
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<!-- <Video :src="src2" :poster="poster" /> --> |
||||
|
</div> |
||||
|
<div class="item"> |
||||
|
<!-- <Video :src="src3" :poster="poster" /> --> |
||||
|
</div> |
||||
|
<!-- <div class="item"></div> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</v-scale-screen> |
||||
|
</template> |
||||
|
<script> |
||||
|
// 引入echarts |
||||
|
// import * as echarts from "echarts"; |
||||
|
|
||||
|
import flvjs from "flv.js"; |
||||
|
|
||||
|
// 引入api |
||||
|
// import * as homeApi from '@/api/home' |
||||
|
|
||||
|
// import Video from '../../components/btgym/Video.vue' |
||||
|
export default { |
||||
|
// components: { |
||||
|
// Video |
||||
|
// }, |
||||
|
data() { |
||||
|
return { |
||||
|
player: null, |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
|
||||
|
|
||||
|
// this.getVideo() |
||||
|
|
||||
|
// var videoElement1 = document.getElementById('myFlvVideo'); |
||||
|
// this.$nextTick(() => { |
||||
|
// this.createVideo() |
||||
|
// }) |
||||
|
// this.createVideo() |
||||
|
this.init('rtsp://192.168.66.13:554/openUrl/MXdnCG4') |
||||
|
}, |
||||
|
methods: { |
||||
|
// createVideo() { |
||||
|
// if (flvjs.isSupported()) { |
||||
|
// var videoElement = document.getElementById('myFlvVideo') |
||||
|
// console.log(videoElement); |
||||
|
// this.flvPlayer = flvjs.createPlayer( |
||||
|
// { |
||||
|
// type: 'flv', |
||||
|
// isLive: true, |
||||
|
// hasAudio: false, |
||||
|
// url: |
||||
|
// 'rtsp://192.168.66.13:554/openUrl/MXdnCG4' |
||||
|
// }, |
||||
|
|
||||
|
// { |
||||
|
// cors: true, // 是否跨域 |
||||
|
// enableWorker: true, // 是否多线程工作 |
||||
|
// enableStashBuffer: false, // 是否启用缓存 |
||||
|
// stashInitialSize: 128, // 缓存大小(kb) 默认384kb |
||||
|
// autoCleanupSourceBuffer: true // 是否自动清理缓存 |
||||
|
// } |
||||
|
// ) |
||||
|
// this.flvPlayer.attachMediaElement(videoElement) |
||||
|
// this.flvPlayer.load() |
||||
|
// // this.flvPlayer.play() |
||||
|
// // 报错重连 |
||||
|
// // this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => { |
||||
|
// // console.log('errorType:', errType) |
||||
|
// // console.log('errorDetail:', errDetail) |
||||
|
// // if (this.flvPlayer) { |
||||
|
// // this.destoryVideo() |
||||
|
// // this.createVideo() |
||||
|
// // } |
||||
|
// // }) |
||||
|
// } |
||||
|
// }, |
||||
|
|
||||
|
init(val) { //这个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: val, //你的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); |
||||
|
}, |
||||
|
|
||||
|
// destoryVideo() { |
||||
|
// this.flvPlayer.pause() |
||||
|
// this.flvPlayer.unload() |
||||
|
// this.flvPlayer.detachMediaElement() |
||||
|
// this.flvPlayer.destroy() |
||||
|
// this.flvPlayer = null |
||||
|
// } |
||||
|
|
||||
|
}, |
||||
|
beforeUnmount() { |
||||
|
if (this.player) { |
||||
|
this.player.pause(); |
||||
|
this.player.unload(); |
||||
|
this.player.detachMediaElement(); |
||||
|
this.player.destroy(); |
||||
|
this.player = null; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// }, |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue