<script>
import videojs from ""
import '/dist/'
export default {
data() {
return {
videoPlayer: null,
video_data: {},
liveId: '',
}
},
onLoad(e) {
uni.showLoading({
title: 'loading'
})
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("Live broadcast details data")
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 WeChat browser supports playback in small window
video.setAttribute('webkit-playsinline',
true) //This property is an attribute set in iOS 10 that allows video to be played in small windows, that is, it is not a video tag that plays on the full screen.
video.setAttribute('x5-video-player-type', 'h5') //Android declares that the same layer of H5 players can be used. You can add something to the video
this.$refs.video.$el.appendChild(video);
this.videoPlayer = videojs('video');
})
// #endif
},
beforeDestroy() {
if (this.videoPlayer !== null) {
this.videoPlayer.dispose() // dispose() will directly delete the Dom element
}
},
onHide() {
if (this.videoPlayer !== null) {
this.videoPlayer.dispose() // dispose() will directly delete the Dom element
}
},
}
</script>