xgplayer icon indicating copy to clipboard operation
xgplayer copied to clipboard

手机上,西瓜视频播放器,安装了xgplayer-mp4,播放mp4文件,非常卡,PC chrome浏览器比较正常。

Open 1527430 opened this issue 7 months ago • 5 comments

pc chrome浏览器,模拟手机,安装xgplayer-mp4插件后,播放速度比较正常,有206请求。 可是手机上不正常,非常慢。手机上也没法调试。

此外,官网的范例代码太简单了,建议多出一些vue上的例子和现成可用的模板。网上又找不到成熟的代码,弄得都不知道怎么使用,经常因为一点点的参数问题导致运行不正常。

您使用的西瓜播放器版本是多少? What version of xgplayer are you using? 3.0.22

您使用的操作系统和浏览器分别是? What OS and browser are you using?

chrome mobile 如何复现问题? How to reproduce the problem? 开发环境,手机上。

您期望的播放器正常行为是? What did you expect to happen? 手机浏览器里也能流畅播放。

实际播放器的表现是? What actually happened? 严重卡,播不出来。

可填写您所在的公司和相关产品业务,方便我们提供更好的技术支持 You can write your company and product which uses xgplayer, for helping us provide better technical support.

1527430 avatar May 14 '25 03:05 1527430

@1527430 是iOS吗?

gemxx avatar May 14 '25 05:05 gemxx

pc 和 android。 vue3+ uniapp,pc上, 使用了Mp4Plugin 倒出错误了。不用Mp4Plugin,使用 document .createElement("video") .canPlayType("video/mp4") 这段代码,然后new Player声明一个播放器,播放正常,可是config中加上Mp4Plugin 就出错误了。

而android的手机上,怎么也没调出来。 搞不懂。 网上公开资料太少了,官方提供的又太简单了。

1527430 avatar May 14 '25 13:05 1527430

环境 pc (使用chrome模拟手机浏览器,开发测试用)和 android。 vue3+ uniapp

核心代码是下边这段。
声明,引入: import "xgplayer/dist/index.min.css"; import Player, { Events } from "xgplayer"; import Mp4Plugin from "xgplayer-mp4";

挂载播放器。 mounted() { this.initPlayer(); }, ...

初始化播放器。 initPlayer(){ // 判断是否支持 HLS 播放器 if ( document .createElement("video") .canPlayType("video/mp4") ) { console.log(" default video/mp4")

            this.player = new Player({
                el: this.$refs.player,
              ...this.config,
            });
          })

}

以上程序,如果不加plugins: [Mp4Plugin],就是说只用播放器,不用Mp4Plugin ,那么PC上正常运行,而手机上不正常。 如果加上plugins: [Mp4Plugin],那么PC和手机都不正常了,都不能播放了。 期望中自然是加上plugins: [Mp4Plugin]以后,PC和手机都能正常运行。

真不知道怎么使用,折腾两天了。请赐教。

1527430 avatar May 14 '25 14:05 1527430

以下代码,之前是使用m3u8的,以下代码正常运行,走进了HlsPlugin.isSupported()这个分支,成功地加载了plugins: [HlsPlugin],,手机和PC都可以。 可是m3u8要提前切分,文件太多了,硬盘压力太大。所以想优化改为mp4 range的播放方式。现在遇到了无法使用mp4插件的问题,烦请作者多指教。

非常感谢。


  if (
    document
      .createElement('video')
      .canPlayType('application/vnd.apple.mpegurl')
  ) {
    console.log('直接支持HLS')
    this.player = new Player({
      el: this.$refs.player,
      ...this.config,
    })
  } else if (HlsPlugin.isSupported()) {
    console.log('插件')
    this.player = new Player({
      el: this.$refs.player,
      isLive: false,
      plugins: [HlsPlugin],
      hls: {
        retryCount: 3, // 重试 3 次,默认值
        retryDelay: 1000, // 每次重试间隔 1 秒,默认值
        loadTimeout: 10000, // 请求超时时间为 10 秒,默认值
        fetchOptions: {
          mode: 'cors',
        },
      },
      ...this.config,
    })
  }

1527430 avatar May 14 '25 14:05 1527430

我又测试了一下,不使用uniapp,单独使用vue3,是可以加载Mp4Plugin,而在uniapp框架中,就不行,怎么也加载不进去,但是m3u8的HlsPlugin可以加载。

是不是Mp4Plugin不支持uniapp呢?

1527430 avatar May 15 '25 01:05 1527430

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 Aug 14 '25 10:08 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 Sep 15 '25 10:09 github-actions[bot]

这个问题解决呢?为什么要关闭呢?

1527430 avatar Sep 20 '25 22:09 1527430