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

问题现象：

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

jingxu 1楼•3 年前

写了个 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="https://image.wxopen.club/content_a74a2128-50dc-11ea-a0eb-001a7dda7111.png" 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 = 'https://image.wxopen.club/content_a74a2128-50dc-11ea-a0eb-001a7dda7111.png';
      video.load();
    };

    const onCanplaythrough = () => {
      video.play().then(() => {
        console.log('播放成功');
      }).catch(() => {
        console.error('播放被阻止');
      });
    };

    button.addEventListener('click', onClick);
    video.addEventListener('canplaythrough', onCanplaythrough);
  </script>
</body>

</html>