问题现象:
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
楼主 我也遇到了 你解决了吗
你好,请问你的问题解决了吗,我也遇到和你一样的问题了
写了个 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>