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>

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值