171 lines
4.7 KiB
Vue
171 lines
4.7 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true" :themeType="'#3A7BFF'">
|
||
<view class="headerName">
|
||
视频回放
|
||
</view>
|
||
</headers>
|
||
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="url" controls autoplay></video> -->
|
||
<!-- 外网IP地址访问视频监控 -->
|
||
<!-- <video class="videoBox" id="myVideo" :custom-cache="false" :src="'rtsp://42.180.188.17:'+url.substring(20)" controls autoplay></video> -->
|
||
<video class="videoBox" id="myVideo" ></video>
|
||
<!-- :custom-cache="false" :src="url" controls autoplay -->
|
||
<view class="videoName">
|
||
<text>{{passData.videoName}}</text>
|
||
<text>{{passData.beginTime}}<br />至<br />{{passData.endTime}}</text>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from '../../components/headers/headers.vue';
|
||
import videojs from 'video.js';
|
||
import 'video.js/dist/video-js.min.css';
|
||
// import 'videojs-contrib-hls';
|
||
import 'videojs-flvjs-es6';
|
||
import 'videojs-flash';
|
||
// import SWF_URL from 'videojs-swf/dist/video-js.swf';
|
||
export default {
|
||
components:{headers},
|
||
data() {
|
||
return {
|
||
url:'',//rtsp://admin:jxj12345@192.168.0.64:554/h264/ch1/main/av_stream
|
||
streamType: 1, //1是子码流 2是主码流
|
||
passData: {},
|
||
streamType: 'RTSP',
|
||
player: null
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
//videoType 1萤石云，2乐橙，3ISC，4大华，5宇视，6国标
|
||
// this.url = options.url
|
||
if(options.obj){
|
||
this.passData = JSON.parse(options.obj)
|
||
}
|
||
console.log(this.passData,777888)
|
||
this.loadData()
|
||
},
|
||
beforeDestroy () {
|
||
this.disposePlayer()
|
||
},
|
||
methods:{
|
||
// 初始化播放器
|
||
initPlayer () {
|
||
this.$nextTick(() => {
|
||
let playerOption = {
|
||
preload: 'auto', // 预加载
|
||
autoplay: true, // 自动播放
|
||
controls: true,
|
||
techOrder: ['html5', 'flvjs', 'flash'], // 这里的顺序一定要 'flvjs' 在 'flash' 前面，要不然 flv 格式的就无法播放了
|
||
// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误，只保留 'flash' 就不报错了
|
||
// 报错 The "flash" tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本，然后修改video.js的版本就可以了
|
||
flash: {
|
||
hls: { withCredentials: false },
|
||
// swf: SWF_URL // 引入静态文件swf
|
||
},
|
||
flvjs: {
|
||
mediaDataSource: {
|
||
cors: true,
|
||
withCredentials: false,
|
||
},
|
||
},
|
||
sources: [
|
||
{
|
||
src: this.url,
|
||
type: this.getType(this.streamType)
|
||
}
|
||
],
|
||
}
|
||
// uni.createSelectorQuery().in(this).select('#myVideo').boundingClientRect(result => {
|
||
// if (result) {
|
||
// this.viewHeight = result.height * 2
|
||
// } else {
|
||
// this.viewHeight = 0
|
||
// }
|
||
// }).exec();
|
||
console.log(this.$el.querySelector('#myVideo'), uni.createSelectorQuery().in(this).select('#myVideo'))
|
||
this.player = videojs(this.$el.querySelector('#myVideo'), playerOption, function onPlayerReady () {
|
||
console.log('onPlayerReady', this)
|
||
})
|
||
})
|
||
},
|
||
//获取项目视频
|
||
loadData() {
|
||
var that = this
|
||
let requestData = {
|
||
projectSn: that.passData.projectSn,
|
||
serialNumber: that.passData.serialNumber
|
||
}
|
||
if(that.passData.beginTime && that.passData.endTime){
|
||
requestData.beginTime = that.passData.beginTime
|
||
requestData.endTime = that.passData.endTime
|
||
}
|
||
that.sendRequest({
|
||
url: "xmgl/videoItem/callPostPlaybackURLsV2",
|
||
data: requestData,
|
||
method: "POST",
|
||
success(res) {
|
||
console.log('找封面', res)
|
||
that.url = res.result.url
|
||
if(that.url.indexOf("10.168.1.100") != -1){
|
||
that.url = that.url.replace("10.168.1.100", "42.180.188.17")
|
||
console.log(that.url,888999)
|
||
}
|
||
that.initPlayer()
|
||
}
|
||
})
|
||
},
|
||
// 销毁播放器
|
||
disposePlayer () {
|
||
if (this.player) {
|
||
this.player.dispose()
|
||
}
|
||
},
|
||
getType (type) {
|
||
let playerType = ''
|
||
switch (type) {
|
||
case 'FLV':
|
||
playerType = 'video/x-flv'
|
||
break
|
||
case 'HLS':
|
||
playerType = 'application/x-mpegURL'
|
||
break
|
||
case 'RTMP':
|
||
playerType = 'rtmp/flv'
|
||
break
|
||
case 'RTSP':
|
||
playerType = 'video/mp4'
|
||
break
|
||
}
|
||
return playerType
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fullHeight{
|
||
background-color: #F4F5FD;
|
||
}
|
||
.videoBox{
|
||
width: 100%;
|
||
}
|
||
.videoName{
|
||
margin: 20rpx 30rpx;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 32rpx;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 600;
|
||
text:nth-child(1){
|
||
color: #000000;
|
||
}
|
||
text:nth-child(2){
|
||
color: #6F6F6F;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
</style>
|