1、在项目的 components 文件夹下面创建 video-player/video-player.vue 文件,代码如下:
<template>
<!-- autoplay="false" -->
<view name="videoPlayer" class="flex flex-direction" style="width: 100%;">
<video id="myVideo"
class="response"
:src="videoUrl"
:title="videoTitle"
controls="true"
page-gesture="true"
object-fit="contain"
show-mute-btn="true"
enable-play-gesture="true"
vslide-gesture="true"
@error="videoErrorCallback"
@waiting="videoWaiting"
@loadedmetadata="videoLoadOk"
style="width: 100%;"
></video>
</view>
</template>
<script>
export default {
name: 'videoPlayer',
props: {
title: {
type: String,
default: ''
},
firstPic: {
type: String,
default: ''
},
videoType: {
type: String,
default: ''
},
videoSrc: {
type: String,
default: ''
}
},
data() {
return {
videoUrl: this.videoSrc,
firstImg: this.firstPic,
videoTitle: this.title
};
},
watch: {
videoSrc() {
this.setVideoUrl();
}
},
mounted() {
this.setVideoUrl();
},
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo');
// #endif
},
methods: {
setVideoUrl() {
console.log(this.videoSrc)
// uni.setNavigationBarTitle({
// title: this.title
// });
this.videoUrl = this.videoSrc;
this.firstImg = this.firstPic;
this.videoTitle = this.title;
console.log(this.firstImg + '___' + this.firstPic)
console.log(this.title + '___' + this.videoTitle)
},
videoErrorCallback(e) {
uni.showModal({
content: e.target.errMsg,
showCancel: false
});
},
videoWaiting() {
// uni.showLoading({
// title: '加载中'
// });
},
videoLoadOk() {
// uni.hideLoading();
}
}
};
</script>
<style>
</style>
2、在需要使用到的组件中引入、注册、使用:
// 引入
import VideoPlayer from '../../components/vvideo-player/vvideo-player.vue'
// 注册
components: {
VideoPlayer
}
// 使用
<!-- #ifdef APP-PLUS -->
<video-player title="奥力给" videoSrc="rtsp://admin:xinhangzhiyuan1204@192.168.0.124:554/cam/realmonitor?channel=1&subtype=0&unicast=true">
</video-player>
<!-- #endif -->