移动端视频作为全屏背景播放

最新推荐文章于 2024-10-26 16:09:10 发布

酱油ooo-

最新推荐文章于 2024-10-26 16:09:10 发布

阅读量416

点赞数

文章标签：前端 javascript 音视频

本文链接：https://blog.youkuaiyun.com/Ricale/article/details/132695016

版权

首先附上参考文章：PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）

在此之前搜寻了两天使用video标签的解决办法，x5-video-player-type和webkit-playsinline属性都不管用，出项的问题是，进入首页自动播放时会唤起手机的视频播放器（safari），还有不会自动播放的（微信内嵌网页）

最后终于遇到参考文章的办法，序列图片视频化

滴滴的移动端官网就是这样的办法实现的类似效果

以下是我在react项目中涉及到的相关代码，可做相关参考

const videoBox = useRef(null);
  useEffect(() => {
    // 动态设置序列图片列表
    var store = [];
    for (let index = 1; index < 639; index++) {
      const idx = index.toString().length < 2 ? '00' + index : index.toString().length < 3 ? '0' + index : index;
      const url = require(`@m/assets/images/header_video/${idx}.jpg`);
      const img = document.createElem