tencentyun / TWebLive

82 stars 34 forks source link

Vue TWebLive 页面空白,也没报错 #31

Closed Owater closed 3 years ago

Owater commented 3 years ago
<template>
  <div id="app">
    <div id="playerView" style="width:100%; height: auto;"></div>
  </div>
</template>

省略....

created() {
    this.player = this.TWebLive.createPlayer()
    this.player.setCustomConfig({
      autoplay: true,
      // poster: { style: 'cover', src: poster },
      pausePosterEnabled: false,
      wording: {
        1: '您观看的直播已结束哦~ ',
        2: '您观看的直播已结束哦~ ',
        4: '您观看的直播已结束哦~ ',
        13: '您观看的直播已结束',
        2032: '请求视频失败,请检查网络',
        2048: '请求m3u8文件失败,可能是网络错误或者跨域问题'
      }
    })
    this.player.setRenderView({ elementID: 'playerView' })
  },
  mounted() {
    this.startPlay()
  },
  methods: {
    startPlay() {
      let url = 'http://xxxxxx/live/test.flv'
      this.player.startPlay(url).then(() => {
        console.log('player | startPlay | ok')
      }).catch((error) => {
        console.error('player | startPlay | failed', error)
      })
    }
  }

main.js

import TWebLive from 'tweblive'
Vue.prototype.TWebLive = TWebLive

依赖版本

"dependencies": {
    "tim-js-sdk": "^2.9.1",
    "trtc-js-sdk": "^4.8.4",
    "tweblive": "^1.1.1",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

效果如下:

请问这是你们SDK有问题吗?还是版本问题??

Owater commented 3 years ago

已解决

startPlay() {
      let url = 'http://xxxxxx/live/test.flv'
      this.player.startPlay(url).then(() => {
        console.log('player | startPlay | ok')
      }).catch((error) => {
        console.error('player | startPlay | failed', error)
      })
    }

url 配置格式不正确,需要配置flv 和 m3u8,两个都要

let url = 'https://'
  + 'flv=http://xxxxxx/live/test.flv' + '&' // 请替换成实际可用的播放地址
  + 'hls=http://xxxxxx/live/test.m3u8' // 请替换成实际可用的播放地址