bytedance / xgplayer

A HTML5 video player with a parser that saves traffic
https://h5player.bytedance.com/
MIT License
8.36k stars 871 forks source link

初始化多个实例,始终有一个视频自动播放失败 #961

Closed x011223 closed 1 year ago

x011223 commented 1 year ago

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

    "xgplayer": "^2.31.4",
    "xgplayer-flv.js": "^2.3.0",
    "xgplayer-hls.js": "^2.6.1"

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

mac 13.2.1 / chrome 114.0.5735.90

如何复现问题? How to reproduce the problem?

使用以下代码 同时初始化多个(这边是3个)播放器,只有第一个大概率偶现自动播放失败,后面的2个自动播放成功

    const player = new XGFlvPlayer({
      cors: true,
      //  以下3个为组件外部传入
      id,
      url,
      autoplay,
      width: '100%',
      height: '100%',
      lang: 'zh-cn',
      closeVideoClick: true,
      closeVideoPreventDefault: true,
      closeVideoStopPropagation: true,
      closeVideoDblclick: true,
      controls,
      volume: 0,
      autoplayMuted: false,
    });
    if (autoplay) {

      player.play();
    }

以上代码 调用 player.play() 时 报错 DOMException: play() failed because the user didn't interact with the document first.

查阅资料后怀疑是因为 video 标签的 muted 属性未设置,参考 链接

MDN video

image

image

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

所有的播放器可以正确的自动播放

实际播放器的表现是? What actually happened?

初始化的3个播放器之中,2个自动播放成功,第1个失败。

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

gemxx commented 1 year ago

关于自动播放问题,可以参考下chrome的开发者文章,以及xgplayer在自动播放上的处理策略:https://h5player.bytedance.com/guide/extends/aautoplay.html