yicangzongtai_app_240321/pages/government/live.vue

<template>
    <view>
		<navbar :config="config" backColor="#999999"></navbar>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <video id="myVideo" is-live :src="info.liveJumpUrl" style="width: 100%;" autoplay
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls @fullscreenchange="fullscreenchange"></video>
            </view>
			<view class="liveTitleBox">{{info.liveTitle}}</view>
            <!-- #ifndef MP-ALIPAY -->
           <!-- <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view> -->
            <!-- #endif -->
        </view>
    </view>
</template>

<script>
	export default {
	    data() {
	        return {
	            config: {
	            	back: false,
	            	title: '身边景',
	            	color: '#1A1A1A',
	            	// backgroundColor: [1, '#fff'],
	            	backgroundColor: '#fff',
	            	statusBarFontColor: '#fff'
	            },
				info:{},
	            danmuList: [
					// {
	    //                 text: '第 1s 出现的弹幕',
	    //                 color: '#ff0000',
	    //                 time: 1
	    //             },
	    //             {
	    //                 text: '第 3s 出现的弹幕',
	    //                 color: '#ff00ff',
	    //                 time: 3
	    //             }
	            ],
	            danmuValue: ''
	        }
	    },
		onLoad(options) {
			if(options.liveId){
				this.getLiveInfo(options.liveId)
			}
		},
	    onReady: function(res) {
	        // #ifndef MP-ALIPAY
	        this.videoContext = uni.createVideoContext('myVideo')
			// this.videoContext.requestFullScreen();
	        // #endif
	    },
	    methods: {
			getLiveInfo(liveId){
					this.$yghttp.get(`/live/liveInfo/info/${liveId}`).then(res => {
						this.info = res.data;
					})
			},
	        sendDanmu: function() {
	            this.videoContext.sendDanmu({
	                text: this.danmuValue,
	                color: this.getRandomColor()
	            });
	            this.danmuValue = '';
	        },
	        videoErrorCallback: function(e) {
	            // uni.showModal({
	            //     content: e.target.errMsg,
	            //     showCancel: false
	            // })
	        },
			fullscreenchange(e){
				if(e.detail.direction=='vertical'){
					// uni.navigateBack()
				}
			},
	        getRandomColor: function() {
	            const rgb = []
	            for (let i = 0; i < 3; ++i) {
	                let color = Math.floor(Math.random() * 256).toString(16)
	                color = color.length == 1 ? '0' + color : color
	                rgb.push(color)
	            }
	            return '#' + rgb.join('')
	        }
	    }
	}
</script>
<style lang="scss">
.liveTitleBox{
	text-align: center;
	margin-top: 20rpx;
	font-size:32rpx;
}
</style>