解决网页中的 video 标签在移动端浏览器(如百度访问网页)视频脱离文档流播放问题

问题现象

部分浏览器视频脱离文档流,滚动时,视频是悬浮出来,在顶部播放
在这里插入图片描述

解决方案

添加下列属性,可解决大部分浏览器的脱离文档流的问题

<video
    webkit-playsinline=""
    playsInline
    x5-playsinline
    t7-video-player-type="inline"
    x5-video-player-type="h5-page"
    x-webkit-airplay="allow"
    disablePictureInPicture
>
    <source src={src} type="video/mp4" />
</video>

最终效果

请添加图片描述

参考资料

  1. 几款优秀开源的HTML5 视频播放器
  2. muiplayer-推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-17 10:34:09       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-17 10:34:09       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-17 10:34:09       58 阅读
  4. Python语言-面向对象

    2024-07-17 10:34:09       69 阅读

热门阅读

  1. Qt编程技巧总结篇(4)-信号-槽-多线程(三)

    2024-07-17 10:34:09       23 阅读
  2. 【面试题】Golang之互斥锁与读写锁(第七篇)

    2024-07-17 10:34:09       22 阅读
  3. windows 安装 tensorflow 报错说 C++

    2024-07-17 10:34:09       23 阅读
  4. Vue 和 React 框架实现滚动缓冲区

    2024-07-17 10:34:09       21 阅读
  5. Mysql什么情况下会发生死锁,又该怎么解决?

    2024-07-17 10:34:09       25 阅读
  6. 服务器上有多个nginx,如何知道启动的是哪个?

    2024-07-17 10:34:09       25 阅读
  7. 3,SSH 服务器

    2024-07-17 10:34:09       28 阅读
  8. 外科营养支持病人的护理

    2024-07-17 10:34:09       24 阅读
  9. Netty UDP

    2024-07-17 10:34:09       19 阅读