hlm_pl_mall_h5/pages/member/live/LiveDetail.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  <member-base :show="false">
    <view class="div room-bg">
      <!--  #ifdef  H5 -->
      <view class="div bg-img" id="id_test_video"></view>
      <!--  #endif -->
      <!--  #ifdef  MP-WEIXIN -->
      <live-player class="bg-img" id="id_test_video" :src="liveApplyInfo.live_apply_play_rtmp_url"
        @statechange="videoStatechange">
        
      </live-player>
      <!--  #endif -->
      <main-content v-if="isTest || isPlay" :liveApplyInfo="liveApplyInfo" :onlineInfo="onlineInfo"></main-content>
    </view>
    <uni-popup background-color="#fff" ref="confirm" type="dialog">
      <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content"
        :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
    </uni-popup>
  </member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
  import {
    mapState,
    mapActions
  } from 'vuex'
  import MemberBase from '../MemberBase'
  import mainContent from './child/main-content'
  import {
    loadScript,
    loadCSS
  } from '../../../util/common'
  import {
    getLiveInfo
  } from '../../../api/memberLive'
  export default {
    data() {
      return {
        dialog: {},
        isTest: 0,
        live_apply_id: 0,
        isPlay: false,
        liveApplyInfo: false,
        onlineInfo:false
      }
    },
    computed:{
      fontSize(){
        return getFontSize()
      },
      ...mapState({
        config: state => state.config.config,
      }),
    },
    components: {
      MemberBase,
      mainContent
    },
    onLoad: function(option) {
      this.isTest = option.test ? 1 : 0
      this.fetchConfig({})
      this.live_apply_id = option.live_apply_id
      if (!this.live_apply_id) {
        uni.showToast({
          icon: 'none',
          title: '参数错误'
        })
      }
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      getLiveInfo(this.live_apply_id).then(res => {
        this.liveApplyInfo = res.result.live_apply_info
        this.onlineInfo=res.result.online_info
        // #ifdef MP-WEIXIN
        var player = uni.createLivePlayerContext("id_test_video", this)
        player.play()
        // #endif

        // #ifdef H5
        var _this = this
        if (this.config.video_type == 'aliyun') {
          loadCSS('aliplayer', 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css')
          loadScript('aliplayer', 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js', function() {
            var player = new Aliplayer({
              "id": "id_test_video",
              "source": _this.liveApplyInfo.live_apply_play_url,
              "width": width,
              "height": height,
              "autoplay": true,
              "isLive": true,
              "rePlay": false,
              "playsinline": true,
              "preload": true,
              "controlBarVisibility": "hover",
              "useH5Prism": true
            }, function(player) {
              player.play();
              player.on('play', function() {
                _this.videoPlay()
              });
              player.on('pause', function() {
                _this.videoPause()
              });
              player.on('liveStreamStop', function() {
                _this.videoEnded()
              });
            });
          })
        } else {
          loadScript('TcPlayer', '//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js', function() {
            var player = new TcPlayer('id_test_video', {
              'm3u8_hd': _this.liveApplyInfo.live_apply_play_url, // 请替换成实际可用的播放地址
              // 'autoplay': true, // iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
              'live': true,
              'controls': 'system',
              'systemFullscreen': true,
              'width': width,
              'height': height,
              'x5_player': true,
              'x5_type': 'h5',
              'x5_fullscreen': 'true',
              'listener': function(res) {
                if (res.type == 'play') {
                  _this.videoPlay()
                } else if (res.type == 'pause') {
                  _this.videoPause()
                } else if (res.type == 'error') {
                  _this.videoEnded()
                }
              }
            })
          })
        }
        // #endif
      }).catch(res => {
        if(res.result.live_apply_info){
          this.isTest=1
          this.liveApplyInfo = res.result.live_apply_info
        }
        uni.showToast({
          icon: 'none',
          title: res.message
        })
      })
    },

    methods: {
      closeDialog() {},
      confirmDialog(value) {
        switch (this.dialog.condition) {
          case 1:
            uni.navigateTo({
              url: '/pages/member/live/LiveList'
            })
            break
          }
      },
      videoPlay() {
        this.isPlay = true
      },
      videoPause() {
        this.isPlay = false
      },
      videoEnded(type) {
        console.log(type)
        this.dialog = {
          condition: 1,
          content: '主播已离开，是否要看看其他直播?'
        }
        this.$refs.confirm.open()
      },
      videoStatechange(e) {
        console.log(e)
        switch (e.detail.code) {
          case 2004:
            this.videoPlay()
            break
          case 2006:
          case -2301:
            this.videoEnded()
            break
        }
      },

      ...mapActions({
        fetchConfig: 'fetchConfig'
      }),
    }
  }
</script>
<style lang="scss" scoped>
  .room-bg {
    position: relative;
  }

  .bg-img {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
  }
</style>