<script>
import videojs from ""
import '/dist/'
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>