记录--H5 视频兼容性处理总结
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助
概述
最近在负责公司官网的开发,在 H5 播放视频时,遇到很多兼容问题,所以总结下在 H5 播放时,遇到的兼容性问题,并封装一个 Video 的组件,便于在 H5 使用。
测试
先来测试一下在不同的浏览器,video 有什么兼容性的问题,要测试两种情况:
- 可以内联播放,视频上方可以正常叠文字
- 可以全屏播放,比如点击后,全屏播放
前置配置
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 手机测试,以下是测试的环境:
- ios(17)
- safari
- 微信
- edge
- chrome
- firefox
- UC
- 夸克
- 百度APP
- android(13)
- 微信
- edge
- firefox
- qq 浏览器
- 夸克
- UC
- 小米浏览器
- 百度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 是在页面顶部的位置,它就会一直置顶播放,如果在页面下发(起码超过页面可视区的一半以上),它就会正常内联播放
总结
内联播放:
- ios 系统在 safari, 微信, edge, chrome, firefox 的表现都没问题,但在未静音的情况下无法自动播放视频
- 而在夸克、UC 和百度 APP 的播放表现上,就很有问题,严重影响用户的体验,视频会被浏览器劫持播放,置顶在页面顶部,挡住页面内容
全屏播放:
- 和内联播放的情况差不多
- 夸克和 UC 不知道为啥(都是阿里系的),会触发异常,禁止全屏
- 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,不会自动播放,只会全屏
总结
内联播放:
- 在 微信, edge, firefox, qq 的表现都没问题,而 qq, 夸克,uc 和小米浏览器都可以通过一些属性设置,达到正常播放。百度 APP 无法在页面内正常播放。
- 安卓基本上都是不能自动播放的 全屏播放:
- 大部分都可以全屏并自动播放,但微信不行,百度 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); };
总结
针对浏览器出现的问题,特殊处理
- 安卓的 qq 浏览器,需要设置 x5- 相关的属性
- 安卓的 uc、夸克、小米等浏览器,需要设置 :controls="false"
- 安卓无法自动播放的,监听 document 的 touch 事件,触发后,执行 video 的 play 方法
- ios 的 uc、夸克无法全屏播放的,则用内联播放代替
- ios 的全屏播放,如果在微信和 safari 时,要设置 :controls="true",使用 ios 内置的 controls,不然当页面切换时,会自动播放其他页面的视频
- 无法内联播放的,用图片代替(没办法。。。)
其他
这些解决方法没有集成到组件内
在那么多浏览器中,百度 APP 这个是最麻烦的,无法内联播放,但有一些企业官网是可以正常播放的,比如特斯拉、蔚来,希望有大神可以解答下是如何实现的。
在这总结中segmentfault - 手机百度 app 视频层级兼容处理,有提到如何解决百度 APP 视频兼容性问题:
- ios 视频的地址是使用相对路径的,且设置在
<source>
中- 但这个确实可以,但要求有点高,我这边的视频资源都放在 cdn 中,域名是不一样的
- android 的解决方法,我试过不行
还有一些方法比如 ffmpeg,或者将视频转换为 canvas 播放,这里我就不提了,网上有大量的总结。
总结各种问题的解决方法
内联播放
- ios:
- 主要通过 playsinline, x5- 的属性和关掉 controls 来解决,夸克、百度 APP 和 UC 则使用图片代替
- android:
- 主要通过 playsinline 属性和关掉 controls 来解决,百度 APP 则用图片代替
全屏播放
- ios:
- 夸克和 UC 浏览器使用内联视频的方式播放,并且占满全屏播放,停止播放时,则隐藏 video 节点。
- 百度 APP 在停止播放时,需要隐藏 dom 节点
- 微信, safari 等浏览器,需要使用 video 内置的 controls 属性触发全屏
- 其他浏览器可以正常播放
- android:
- 和 ios 类似的处理方法
组件封装
最后我将相关的功能封装成一个 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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
热门相关:霸宠天下:腹黑帝君妖娆后 拳罡 锦绣医妃之庶女凰途 唐土万里 顺明