xgplayer icon indicating copy to clipboard operation
xgplayer copied to clipboard

手动切换URL的时候报错

Open maicWorkGithub opened this issue 3 years ago • 3 comments

您使用的西瓜播放器版本是多少? What version of xglayer are you using? xgplayer: 2.19.1 xgplayer-flv: 2.4.17

您使用的操作系统和浏览器分别是? What OS and browser are you using? chrome: 89 windows 10 20H2

如何复现问题? What did you do?

<template>
  <div style="display: inline-block" id="flv-player-container"></div>
</template>

<script>
import 'xgplayer'
import FlvPlayer from 'xgplayer-flv'
export default {
  name: 'FlvPlayer',
  props: {
    url: {
      type: String,
      required: true
    },
    poster: {
      type: String
    },
    isLive: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 640
    },
    height: {
      type: Number,
      default: 360
    },
  },
  watch: {
    url (newUrl) {
      this.player && (this.player.src = newUrl)
    }
  },
  mounted () {
    this.player = new FlvPlayer({
      width: this.width,
      height: this.height,
      id: 'flv-player-container',
      // ignores: ['reload', 'play','replay', 'start'],
      url: this.url,
      poster: this.poster,
      isLive: this.isLive,
      preloadTime: 30,
      minCachedTime: 5,
      cors: true
    })
    this.player.on('error', (error) => {
      console.error('FlvPlayer error', error)
      this.player.reload()
    })
  },
  methods: {
    play () {
      this.player.play()
    },
    pause() {
      this.player && this.player.pause()
    }
  },
  beforeDestroy () {
    this.player && this.player.destroy()
  }
}
</script>

<style lang="less">
//#flv-player-container {
//  .xgplayer-enter, .xgplayer-start, .xgplayer-replay  {
//    display: none;
//  }
//}

</style>
<template>
  <div id="app">
    <player is-live ref="player" :url="url"/>
    <button @click="click">aaa</button>
  </div>
</template>

<script>
import Player from './FlvPlayer'
export default {
  name: 'App',
  components: {
    TrackBroadcastConfig,
    Player,
    Test
  },
  data () {
    return {
      url: ''
    }
  },
  methods: {
    click () {
      this.url = '//sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv'
    }
  }
}
</script>

您期望的播放器正常行为是? What did you expect to happen?

1,能正常播放视频 2,如果使用你们 npm node_modules 里的 d.ts 声明文件里的 IPlayerOptions 配置的 ignores选项,应该能隐藏相关按钮

实际播放器的表现是? What actually happened? 1,播放器不能正常播放,报错:

// stack trace
Uncaught (in promise) TypeError: Cannot read property 'resetContext' of undefined
    at J.<anonymous> (index.min.js:1)
    at ee (index.min.js:1)
    at J../node_modules/xgplayer-flv/dist/index.min.js.J.emit (index.min.js:1)
    at i.value (index.min.js:1)
    at i.value (index.min.js:1)
    at i.value (index.min.js:1)
    at ee (index.min.js:1)
    at J../node_modules/xgplayer-flv/dist/index.min.js.J.emit (index.min.js:1)
    at i.value (index.min.js:1)
    at i.value (index.min.js:1)
// code: 
{
    key: "initFlvBackupEvents",
    value: function(e, t) {
        var n = this
          , r = 3;
        e.on(xe.REMUX_EVENTS.MEDIA_SEGMENT, (function() {
            0 === (r -= 1) && (n.flv = e,
            n.mse.resetContext(t),
            n.context.destroy(),
            n.context = t,
            n.paused && yi(i.prototype.__proto__ || Object.getPrototypeOf(i.prototype), "play", n).call(n))
        }
        )),
        e.once(xe.LOADER_EVENTS.LOADER_COMPLETE, (function() {
            if (n.paused)
                n.emit("ended");
            else if (n.video) {
                var e = n.getBufferedRange()[1] - n.currentTime;
                setTimeout((function() {
                    n.emit("ended")
                }
                ), 1e3 * e)
            }
        }
        )),
        e.once(xe.LOADER_EVENTS.LOADER_ERROR, (function() {
            t.destroy()
        }
        ))
    }

2,如果使用了 ignores 选项,页面乱了: image

maicWorkGithub avatar Apr 16 '21 03:04 maicWorkGithub

我也遇到同样的问题!解决了吗?

hello-lls avatar May 22 '21 03:05 hello-lls

我也遇到同样的问题!解决了吗?

没有,现在只能手动销毁然后重新初始化

maicWorkGithub avatar May 24 '21 01:05 maicWorkGithub

我也遇到同样的问题!解决了吗?

没有,现在只能手动销毁然后重新初始化

我通过 player.start(newUrl); player.src= newUrl; 可以切换

dinglino1 avatar Nov 23 '21 09:11 dinglino1

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days.

github-actions[bot] avatar Feb 20 '23 01:02 github-actions[bot]

This issue has been automatically closed after a period of inactivity. If it is still present in the latest release, please create a new issue with up-to-date information. Thank you!

github-actions[bot] avatar Mar 22 '23 02:03 github-actions[bot]