收藏
回答

安卓微信分享消息打开后视频播放被阻止,直接使用链接没有问题

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Bug Android 9 荣耀 10 青春版,红米 6A 7.0.10

问题现象:

1. 使用安卓微信打开 demo 链接点击播放可以正常播放

2. 将链接通过发送给朋友的方式发送,打开后播放会被 block 住,重新调用 video play 播放才行

3. 此时将链接拷贝出来发送,打开后也可以正常播放

复现录像:


Demo 地址:

https://goblin-laboratory.github.io/x5/play-when-canplaythrough.htm

Demo 源码地址:

https://github.com/goblin-laboratory/x5/blob/master/play-when-canplaythrough.htm

最后一次编辑于  01-10
回答关注问题邀请回答
收藏

1 个回答

  • xiaosong
    xiaosong
    01-10

    写了个 demo ,使用下面的链接可以复现

    安卓微信直接点击链接打开页面后点击播放按钮可以成功播放,分享给自己后点击分享消息打开页面再点击播放按钮播放会被阻止

    https://goblin-laboratory.github.io/x5/play-when-canplaythrough.htm

    源码地址:

    https://github.com/goblin-laboratory/x5

    <!DOCTYPE html>
    <html lang="en">
    
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>canplaythrough 后调用播放</title>
    </head>
    
    
    <body>
      <video id="video" controls preload x5-video-player-type="h5-page" height="50%" width="100%" type="video/mp4" src="">
        <!-- <source src="http://cdn.tencent.neigou.com/Public/Home/mobileAsset/images/tencent2018/video5.mp4" type="video/mp4"> -->
      </video>
      <div><button id="button">播放</button></div>
      <script src="https://libs.cdnjs.net/vConsole/3.3.4/vconsole.min.js"></script>
      <script>
        new VConsole();
        const video = document.getElementById('video');
        const button = document.getElementById('button');
    
    
        const onClick = () => {
          video.src = 'http://cdn.tencent.neigou.com/Public/Home/mobileAsset/images/tencent2018/video5.mp4';
          video.load();
        };
    
    
        const onCanplaythrough = () => {
          video.play().then(() => {
            console.log('播放成功');
          }).catch(() => {
            console.error('播放被阻止');
          });
        };
    
    
        button.addEventListener('click', onClick);
        video.addEventListener('canplaythrough', onCanplaythrough);
      </script>
    </body>
    
    
    </html>
    
    
    
    
    01-10
    赞同
    回复
登录 后发表内容
问题标签