背景说明
开发活动落地页需要自动视频,发现在PC端chrome【版本:116】上,autoplay
属性就能正常播放。
但是在H5端微信
和safari浏览器
上的表现,都是不能自动播放。
翻了一些资料,以下为整理的解决文案。
微信环境不能自动播放
// 解决 ios 微信 video 自动播放
document.addEventListener(
'WeixinJSBridgeReady',
function () {
const video = document.querySelector('video');
video && video.play();
},
false,
);
手机浏览器不能自动播放【以下方式按需使用】
Tip: Js和标签上的属性都很重要。【muted
,playsInline
】
解决方式一:
// js
const video = document.querySelector('video');
video.playsInline = true;
// html
<video
autoPlay
muted
preload="auto" // 视频优先加载
x5-video-player-type="h5" //同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上
x5-video-player-fullscreen="false" // 全屏播放
src={videoUrl}
/>
解决方式二:
// js
const video = document.querySelector('video');
let videoPromise;
if (video) {
videoPromise = video?.play();
if (videoPromise !== undefined) {
videoPromise
.then((_) => {
// 当前环境能自动播放
console.log('cool, auto play!');
})
.catch((error) => {
// 不能自动播放,可以自己增加一个按钮,
// 让用户点击时,触发开始播放video.play()。
console.log('can‘t auto play!');
});
}
}
// html
<video
autoPlay
playsInline
muted
preload="auto" // 视频优先加载
x5-video-player-type="h5" //同层H5播放器,就是在视频全屏的时候,div可以呈现在视频层上
x5-video-player-fullscreen="false" // 全屏播放
src={videoUrl}
/>
解决方式三:(向下兼容)
虽然根据video标签属性和js操作后,仍然在有些浏览器环境(如抖音浏览器环境IOS机型),必须有用户交互行为,才可触发播放。
- 先通过以上任意一种方式满足大部分浏览器的自动播放行为;
- video标签将video第一帧作为背景图(背景图通过复合写法,中间展示一个播放按钮)【当运行在部分不支持的浏览器环境时,示意用户点击video来播放】
// html
<video
// 参照方式一/方式二的属性,此处为video增加点击播放功能
...props
onClick={() => {
videoRef.current?.play();
}}
/>
// --------------分隔线----------------
// css
video {
background-image: url('https://xxx/aaa/bbb/start-btn.png'), url('https://xxx/aaa/bbb/video-bg.jpg');
background-repeat: no-repeat, no-repeat;
background-size: 100px 100px, 100% 100%;
background-position: center, center;
}