uni-app中使用video.js

npm i video.js

script

<script>	
import videojs from "video.js"
import 'video.js/dist/video-js.min.css'
export default {
		data() {
			return {
				videoPlayer: null,
				video_data: {},
				liveId: '',
			}
		},
		onLoad(e) {
			uni.showLoading({
				title: '加载中'
			})
			console.log('e------>');
			console.log(e)
			this.liveId = e.liveId;
		},
		async onShow() {
			let res = await this.$datas('zhiboDetail', {
				liveId: this.liveId
			})
			this.video_data = res.data;
			console.log("直播详情的数据")
			console.log(this.video_data);
			this.bgurl = this.video_data.backgroundImage;
			uni.hideLoading()
			// #ifdef H5
			this.$nextTick(() => {
				var video = document.createElement('video');
				var source = document.createElement('source');
				source.src = this.video_data.videoUrl;
				video.appendChild(source);
				video.id = 'video';
				video.style = 'width: 100%; height: 250px;';
				video.controls = true;
				video.poster = this.video_data.videoCoverUrl;
				video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
				video.setAttribute('webkit-playsinline',
					true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
				video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
				this.$refs.video.$el.appendChild(video);
				this.videoPlayer = videojs('video');
			})
			// #endif
		},
		beforeDestroy() {
			if (this.videoPlayer !== null) {
				this.videoPlayer.dispose() // dispose()会直接删除Dom元素
			}
		},
		onHide() {
			if (this.videoPlayer !== null) {
				this.videoPlayer.dispose() // dispose()会直接删除Dom元素
			}
		},
	}
</script>

template

<view class="video-js" ref="video"></view>