H5-Pc端实现视频自动播放背景、安卓端、苹果端

目录

一、效果图

二、在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>
  );
}

四、以上是在react中实现效果、亲测有效、当然也可以使用ref去实现