目录
二、在ios端可以直接使用img标签加载视频MP4(有效)、可自动播放视频
三、安卓端(由于安卓端浏览器机制、如微信端、个别内核不支持自动播放视频)、这时候我们需要模拟自动点击播放机制、达到一进页面自动播放视频的效果
四、以上是在react中实现效果、亲测有效、当然也可以使用ref去实现
一、效果图
二、在ios端可以直接使用img标签加载视频MP4(有效)、可自动播放视频
<img src='视频url' alt="" />
三、安卓端(由于安卓端浏览器机制、如微信端、个别内核不支持自动播放视频)、这时候我们需要模拟自动点击播放机制、达到一进页面自动播放视频的效果
componentDidMount() {
// 将refs设置到store中(假设this.store是一个具有setRefs方法的对象)
this.store.setRefs(this.refs);
// 在使用之前检查this.store是否存在
if (!!this.store) {
if (this.isExist) {
this.store.afterMethodOnEvent();
} else {
this.store.mount();
}
}
// 添加文档上的touchstart和click事件监听器
document.addEventListener("touchstart", this.handleTouchStart);
document.addEventListener("click", this.handleTouchStart);
}
componentWillUnmount() {
// 在使用之前检查this.store是否存在
if (!!this.store) {
this.store.unMount();
}
// 从文档中移除touchstart和click事件监听器
document.removeEventListener("touchstart", this.handleTouchStart);
document.removeEventListener("click", this.handleTouchStart);
}
// 当鼠标移动时播放视频的函数
handleMouseMovePlayVideo = () => {
const videoPlayer = document.getElementById("video-player-mobile");
if (!!videoPlayer && videoPlayer.paused) {
// 如果视频暂停了,播放视频
videoPlayer.play();
}
};
// 处理touchstart事件并触发视频播放的函数
handleTouchStart = () => {
// 当屏幕被触摸/点击时触发视频播放
this.handleMouseMovePlayVideo();
};
// 渲染带有注释的视频元素
render() {
return (
<video
id="video-player-mobile"
width="100%"
height="100%"
controls={false}
autoPlay={false}
muted={true}
playsInline={true}
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-fullscreen="false"
x5-video-orientation="portrait" // 修正:应为 "portrait"
poster={封面url}
preload="auto"
loop={true}
>
<source
src='视频url'
type="video/mp4"
/>
</video>
);
}