写了个 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>
安卓微信分享消息打开后视频播放被阻止,直接使用链接没有问题问题现象: 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
2020-01-10