‘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