这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

概述

最近在负责公司官网的开发，在 H5 播放视频时，遇到很多兼容问题，所以总结下在 H5 播放时，遇到的兼容性问题，并封装一个 Video 的组件，便于在 H5 使用。

测试

先来测试一下在不同的浏览器，video 有什么兼容性的问题，要测试两种情况：

  1. 可以内联播放，视频上方可以正常叠文字
  2. 可以全屏播放，比如点击后，全屏播放

前置配置

HTML 和 Style

下面测试的内容，视频节点是以正常文档流方式渲染：

 <div class="video-wrap">

  <video :src="videoUrl" :poster="poster" class="video" ref="refVideo" :playsinline="form.playsinline"

  :webkit-playsinline="form.playsinline" :x5-playsinline="form.playsinline" :muted="form.muted" :loop="form.loop"

  :autoplay="form.autoplay" :controls="form.controls" :x5-video-player-fullscreen="form.x5VideoPlayerFullscreen"

  :x5-video-player-type="form.x5VideoPlayerType" :preload="form.preload" />

  <div class="video-title">Test title</div>

</div>

<style lang="scss" scoped>

.video {

  object-fit: contain;

  width: 100%;

  height: 100%;

  &-wrap {

    height: 350px;

    position: relative;

  }

  &-title {

    font-size: 24px;

    color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: #000;

  }

}

</style>

渲染的视频和页面不是同域名的，视频的格式是 .mp4

meta 的配置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

下方设置的 playsinline，统一设置了 playsinline + x5-playsinline + webkit-playsinline

测试环境

然后使用我手上的 ios 和 android 手机测试，以下是测试的环境：

  1. ios(17)
    1. safari
    2. 微信
    3. edge
    4. chrome
    5. firefox
    6. UC
    7. 夸克
    8. 百度APP
  2. android(13)
    1. 微信
    2. edge
    3. firefox
    4. qq 浏览器
    5. 夸克
    6. UC
    7. 小米浏览器
    8. 百度APP

ios 系统：

safari

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  false false true false none true none false 全屏，自动播放

微信

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 自动播放
  false false true false none true none false 全屏，自动播放

edge

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  false false true false none true none false 全屏，自动播放

chrome

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  false false true false none true none false 全屏，自动播放

firefox

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  false false true false none true none false 全屏播放

夸克

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，滚动页面后，视频会置顶
  true false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  false false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  true true true false none true none false 不会自动播放
  true false true false none true none false 不会自动播放
  false false true false none true none false 不会自动播放
  true true true false auto false h5-page false 不会自动播放
  false false true false none true none false 无法全屏播放

UC

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，滚动页面后，视频会置顶
  true false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  false false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  true true true false none true none false 不会自动播放
  true false true false none true none false 不会自动播放
  false false true false none true none false 不会自动播放
  true true true false auto false h5-page false 不会自动播放
  false false true false none true none false 无法全屏播放
  false false true false none false none false 无法全屏播放

百度 APP

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 自动播放
  false false true false none true none false 可以全屏播放，但关闭全屏后，视频会一直停留在顶端

百度 APP 在上述配置下，还会根据 video 节点的位置有不同的显示效果，如果 video 是在页面顶部的位置，它就会一直置顶播放，如果在页面下发（起码超过页面可视区的一半以上），它就会正常内联播放

总结

内联播放：

  1. ios 系统在 safari, 微信, edge, chrome, firefox 的表现都没问题，但在未静音的情况下无法自动播放视频
  2. 而在夸克、UC 和百度 APP 的播放表现上，就很有问题，严重影响用户的体验，视频会被浏览器劫持播放，置顶在页面顶部，挡住页面内容

全屏播放：

  1. 和内联播放的情况差不多
  2. 夸克和 UC 不知道为啥（都是阿里系的），会触发异常，禁止全屏
  3. ios 全屏播放后，再切换页面，如果切换的页面有视频，这时候会自动全屏播放

android 系统

微信

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  true true true false auto true h5-page true 全屏后，不会播放

edge

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  true true true false auto true none false 全屏后，会播放

firefox

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放
  true false false false none true none false 正常内联播放
  false false false false none true none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 自动播放
  false false true false none true none false 不会自动播放
  true true true false auto true none false 全屏后，会播放

qq 浏览器

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，滚动页面后，视频会置顶
  true false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  false false false false none true none false 正常内联播放，滚动页面后，视频会置顶
  false false false false none true h5-page false 正常内联播放
  true true true false none true none false 不会自动播放
  true false true false none true none false 不会自动播放
  false false true false none true none false 不会自动播放
  true true true false none true none false 会播放，但没全屏
  true true true false none true none true 需要先播放才能全屏

夸克

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，滚动页面后也正常，但视频会置顶，挡住视频上方绝对定位的文字内容
  true false false false none true none false 同上
  false false false false none true none false 同上
  false false false false none true h5-page false 同上
  false false false false none false none false 正常内联播放
  true true true false none true none false 自动播放
  true false true false none true none false 不会自动播放
  false false true false none true none false 不会自动播放
  true true true false none true none false 无法全屏播放，异常：fullscreen is disallowed
  false false false false none false none false 全屏播放

UC

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，但视频会置顶，挡住视频上方绝对定位的文字内容
  true false false false none true none false 同上
  false false false false none true none false 同上
  false false false false none true h5-page false 同上
  true true false false none false none false 正常内联播放
  true true true false none true none false 会自动播放
  true false true false none true none false 会自动播放
  false false true false none true none false 不会自动播放
  true true true false none true none false 无法全屏播放，异常：fullscreen is disallowed
  true true false false none false none false 全屏播放

小米浏览器

值/属性 muted playsinline autoplay loop preload controls x5VideoPlayerType x5VideoPlayerFullscreen 结果
  true true false false none true none false 正常内联播放，但视频会置顶，挡住视频上方绝对定位的文字内容
  true false false false none true none false 同上
  false false false false none true none false 同上
  false false false false none true h5-page false 同上
  false false false false none false none false 正常内联播放
  true true true false none true none false 不会自动播放
  true false true false none true none false 不会自动播放
  false false true false none true none false 不会自动播放
  true true false false none true none false 可以全屏，会自动播放

百度 APP

播放就会置顶在可视区最顶端，无论如何控制 全屏播放，如果 autoplay 没有设置 true，不会自动播放，只会全屏

总结

内联播放：

  1. 在 微信, edge, firefox, qq 的表现都没问题，而 qq, 夸克，uc 和小米浏览器都可以通过一些属性设置，达到正常播放。百度 APP 无法在页面内正常播放。
  2. 安卓基本上都是不能自动播放的 全屏播放：
  3. 大部分都可以全屏并自动播放，但微信不行，百度 app 缩小全屏后，视频会一直置顶

测试总结

国产的浏览器，大部分都有一些小问题，但可以通过一些属性设置来解决。下面我就根据上面的测试结果，对问题进行处理并封装成一个 Vue 组件，尽可能地解决上面的问题。

解决方法

遇到的坑

ios 退出全屏事件无效

android 端可以用 fullscreenchange 事件 但 ios 端要用 webkitendfullscreen 事件，webkitfullscreenchange 在 ios 是不会触发的，但最好也加上，有备无患

ios 很多全屏有关的事件，都是跟 video 节点关联

fullscreen 的 API 是 document 的方法和属性，ios 的 webkitExitFullscreen, webkitEnterFullscreen 等等，是 video 的方法和属性

ios 全屏播放后切换到带视频的页面，会自动全屏播放

如果使用 video.play() 的方式触发，就会出现上述情况，可以通过设置 video 自带的 controls:true ，让用户点击视频然后全屏播放的方式，来解决这问题

android 当你遇到视频被浏览器劫持

可以尝试设置 controls:false，这可以解决很多情况的问题 当然还有 playsinline，腾讯系的 x5- 属性等，这里不再重复

无法全屏播放但可以内联播放

这时候可以使用内联全屏播放的方式解决，意思就是将你的视频在可视区占满播放，并且将 video 相关节点用 aboslute 或 fixed 进行定位

带声音的如何自动播放

不可以，一定要有用户交互

android 自动播放

同上，但可以添加 poster 优化用户体验

android 触发播放后，但有时候会出现异常，无法播放

因为视频还没加载完或其他因素，视频暂时无法播放。这时候可以在触发 video.play() 后，添加一个定时检测，检测 video 是否真的在播放，如果没播放，可以让它重新播放：

const isVideoPlaying = (video: HTMLVideoElement) =>

  !!(

    video &&

    video.currentTime > 0 &&

    !video.paused &&

    !video.ended &&

    video.readyState > 2

  );

const checkPlay = () => {

  setTimeout(() => {

    played.value = isVideoPlaying(refVideo.value);

  }, 500);

};

总结

针对浏览器出现的问题，特殊处理

  1. 安卓的 qq 浏览器，需要设置 x5- 相关的属性
  2. 安卓的 uc、夸克、小米等浏览器，需要设置 :controls="false"
  3. 安卓无法自动播放的，监听 document 的 touch 事件，触发后，执行 video 的 play 方法
  4. ios 的 uc、夸克无法全屏播放的，则用内联播放代替
  5. ios 的全屏播放，如果在微信和 safari 时，要设置 :controls="true"，使用 ios 内置的 controls，不然当页面切换时，会自动播放其他页面的视频
  6. 无法内联播放的，用图片代替（没办法。。。）

其他

这些解决方法没有集成到组件内

在那么多浏览器中，百度 APP 这个是最麻烦的，无法内联播放，但有一些企业官网是可以正常播放的，比如特斯拉、蔚来，希望有大神可以解答下是如何实现的。

在这总结中segmentfault - 手机百度 app 视频层级兼容处理，有提到如何解决百度 APP 视频兼容性问题：

  1. ios 视频的地址是使用相对路径的，且设置在 <source> 中
    1. 但这个确实可以，但要求有点高，我这边的视频资源都放在 cdn 中，域名是不一样的
  2. android 的解决方法，我试过不行

还有一些方法比如 ffmpeg，或者将视频转换为 canvas 播放，这里我就不提了，网上有大量的总结。

总结各种问题的解决方法

内联播放

  1. ios:
    1. 主要通过 playsinline, x5- 的属性和关掉 controls 来解决，夸克、百度 APP 和 UC 则使用图片代替
  2. android:
    1. 主要通过 playsinline 属性和关掉 controls 来解决，百度 APP 则用图片代替

全屏播放

  1. ios:
    1. 夸克和 UC 浏览器使用内联视频的方式播放，并且占满全屏播放，停止播放时，则隐藏 video 节点。
    2. 百度 APP 在停止播放时，需要隐藏 dom 节点
    3. 微信, safari 等浏览器，需要使用 video 内置的 controls 属性触发全屏
    4. 其他浏览器可以正常播放
  2. android:
    1. 和 ios 类似的处理方法

组件封装

Github 仓库

最后我将相关的功能封装成一个 vue 组件，便于快速使用

Vue@2

# 添加依赖

npm i vue2-h5-compatibility-video

引入：

import Vue from "vue";

import { getVideoComponents } from 'vue2-h5-compatibility-video'

import 'vue2-h5-compatibility-video/lib/style.css'

const { InsideVideo, FullscreenVideo } = getVideoComponents();

Vue.component("InsideVideo", InsideVideo);

Vue.component("FullscreenVideo", FullscreenVideo);

使用内联视频：

<inside-video

  :src="url"

  :height="height"

  :poster="poster"

  :autoplay="true"

  :loop="true"

/>

使用全屏视频：

<fullscreen-video

  :src="url"

  :height="height"

  :poster="poster"

  @click="show"

  ref="refFullscreenVideo"

/>

<script>

const refFullscreenVideo = ref()

const show = () => {

  refFullscreenVideo.value?.showFullScreen()

}

</script>

添加全局点击事件：

import { getEmitter } from 'vue2-h5-compatibility-video'

// 当页面触发点击时，调用下面的方法，这样会通知视频组件播放

getEmitter().emit("docTouch")

Vue@3

# 添加依赖

npm i vue3-h5-compatibility-video

引入：

import Vue from "vue";

import { getVideoComponents } from 'vue3-h5-compatibility-video'

import 'vue3-h5-compatibility-video/lib/style.css'

const { InsideVideo, FullscreenVideo } = getVideoComponents();

Vue.component("InsideVideo", InsideVideo);

Vue.component("FullscreenVideo", FullscreenVideo);

使用内联视频：

<inside-video

  :src="url"

  :height="height"

  :poster="poster"

  :autoplay="true"

  :loop="true"

/>

使用全屏视频：

<fullscreen-video

  :src="url"

  :height="height"

  :poster="poster"

  @click="show"

  ref="refFullscreenVideo"

/>

<script>

const refFullscreenVideo = ref()

const show = () => {

  refFullscreenVideo.value?.showFullScreen()

}

</script>

添加全局点击事件：

import { getEmitter } from 'vue3-h5-compatibility-video'

// 当页面触发点击时，调用下面的方法，这样会通知视频组件播放

getEmitter().emit("docTouch")

自定义组件默认属性

可以在 getVideoComponents 方法中，传入你自定义规则：

import Vue from "vue";

import { getVideoComponents, getDefaultSchedule, getBrowserInfo } from 'vue2-h5-compatibility-video'

import 'vue2-h5-compatibility-video/lib/style.css'

const { fullscreenParams, insideParams } = getDefaultSchedule()

// 强制要求 ios 下的浏览器只显示封面图

if (getBrowserInfo().isIos) {

  insideParams.showPoster = true

  insideParams.hideVideo = true

}

const { InsideVideo, FullscreenVideo } = getVideoComponents({ fullscreenParams, insideParams });

Vue.component("InsideVideo", InsideVideo);

Vue.component("FullscreenVideo", FullscreenVideo);

通过这种方式可以修改默认的组件属性

遗留问题

android 用户触摸屏后，有时不会自动播放视频

本文转载于:

https://juejin.cn/post/7319890768512958516

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

记录--H5 视频兼容性处理总结的更多相关文章

  1. H5视频直播扫盲

    H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...

  2. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  3. 【腾讯Bugly干货分享】H5 视频直播那些事

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...

  4. H5 视频直播相关技术

    一.移动视频直播发展 大家首先来看下面这张图: 可以看到,直播从 PC 到一直发展到移动端,越来越多的直播类 App 上线,同时移动直播进入了前所未有的爆发阶段,但是对于大多数移动直播来说,还是要以 ...

  5. 一看就能学会的H5视频推流方案

    本文由云+社区发表 作者:周超 导语 随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程 ...

  6. H5视频推流方案

    导语 随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程中的经验. 环境部署 1. 配置 ...

  7. H5 键盘兼容性小结

    H5 键盘兼容性小结 在 H5 项目中,我们会经常遇到页面中存在单个甚至多个 input/textarea 输入框与底部固定元素的布局情况.在 input/textarea 输入框获取焦点时,会自动触 ...

  8. 简单的 H5 视频推流解决方案

    导语 随着直播平台爆发式增长,直播平台从 PC 端转战移动端,紧跟着直播的潮流,自己学习实现了一套简单的 H5 视频推流的解决方案,下面就给小伙伴们分享一下自己学习过程中的经验. 环境部署 1. 配置 ...

  9. selenium如何处理H5视频

    selenium处理H5视频主要使用的是javascript,javascript函数有内置的对象叫arguments,arguments包含了调用的参数组,[0]代表取第一个值. currentSr ...

  10. H5视频活动踩坑

    最近做了一些嵌入视频的活动,积累了点视频方面的经验,下面记录下别人和自己踩过的坑以及相应的解决方案.1.碰到问题和解决方案1.1.ios 网页中播放视频默认全屏(点击视频会弹出播放器进行全屏播放).解 ...

随机推荐

  1. RedHat Enterprise Linux 8.0终端命令界面字体放大缩小

    一.打开RedHat的终端命令界面. 二.放大界面中字体,Ctrl + Shit  + "+" 三.缩小界面中字体,Ctrl +  "-"

  2. 近五年的APIO

    [APIO2018] 铁人两项 题意:给定一个张图,询问其中有多少个有序三元组 \((u,v,w)\),满足存在一条从 \(u\) 到 \(w\) 的简单路径,经过点 \(v\). 考虑建出原图的圆方 ...

  3. JS leetcode 存在重复元素 II 题解分析，记一次震惊的负向优化

    壹 ❀ 引 整理下今天做的算法题,题目难度不高,但在优化角度也是费了一些功夫.题目来自219. 存在重复元素 II,问题描述如下: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i ...

  4. NC22544 车站

    题目链接 题目 题目描述 一个国家有n个城市,有n-1条道路连接,保证联通.还有m条铁路,从1~m编号,第i条铁路是从ui到vi的简单路径,多次询问一段区间的铁路的车站. 一个点可以作为区间[L,R] ...

  5. NC216012 Let'sPlayCurling

    题目链接 题目 题目描述 Curling is a sport in which players slide stones on a sheet of ice toward a target area ...

  6. NC15128 老子的全排列呢

    题目链接 题目 题目描述 老李见和尚赢了自己的酒,但是自己还舍不得,所以就耍起了赖皮,对和尚说,光武不行,再来点文的,你给我说出来1-8的全排序,我就让你喝,这次绝不耍你,你能帮帮和尚么? 输入描述 ...

  7. 【Unity3D】UI Toolkit自定义元素

    1 前言 ​ UI Toolkit 支持通过继承 VisualElement 实现自定义元素,便于通过脚本控制元素.另外,UI Toolkit 也支持将一个容器及其所有子元素作为一个模板,便于通过脚本 ...

  8. Optional 详解

    1 前言 Optional 是 Java 8 的新特性,专治空指针异常(NullPointerException, 简称 NPE)问题,它是一个容器类,里面只存储一个元素(这点不同于 Conllect ...

  9. 2021-07-20 JavaScript中关于eval()方法

    eval()常见用途 1.使用ajax获取到后台返回的json数据时,使用 eval 这个方法将json字符串转换成对象数组 let jsonString = JSON.stringify({fang ...

  10. docker 发布.net core 项目（linux）

    一.准备阶段:前提:一台linux系统,安装好了Docker并启动 1.上传.netcore项目压缩文件 2.解压 注:若没有解压软件,先下载rar解压软件再安装:需注意系统是64位还是32   (下 ...