共计 2178 个字符,预计需要花费 6 分钟才能阅读完成。
1. video 标签行内属性
- src:视频的 URL
- poster:视频封面,没有播放时显示的图片
- preload:预加载
- autoplay:自动播放
- loop:循环播放
- controls:浏览器自带的管制条
- width:视频宽度
- height:视频高度
- style=”object-fit:fill” / 加这个 style 会让 Android / web 的视频在微信里的视频全屏,如果是在手机上预览,会让视频的封面同视频一样大小 /
- webkit-playsinline=”true” IOS 微信浏览器反对小窗内播放
- x5-playsinline=”true” IOS 微信浏览器反对小窗内播放
- playsinline=”true” IOS 微信浏览器反对小窗内播放
- x-webkit-airplay=”true” 反对 ios 的 AirPlay 性能
- airplay=”true” 反对 ios 的 AirPlay 性能
- x5-video-player-type=”h5″ 启用同层 H5 播放器
- x5-video-player-fullscreen=”true” 全屏设置
- x5-video-orientation=”portraint” 竖屏封面铺满
- muted=”true” 静音播放
解释
1、preload=”auto”: 属性规定在页面加载后载入视频。如果设置了 autoplay 属性,则疏忽该属性。
个别参数可能的值:
· auto – 当页面加载后载入整个视频
· meta – 当页面加载后只载入元数据
· none – 当页面加载后不载入视频
2、muted: 当设置该属性后,它规定视频的音频输入应该被静音
3、controls=”controls”: 属性规定浏览器应该为视频提供播放控件。
4、autoplay=”autoplay”: 视频自动播放设置,然而有教训的人都应该晓得,autoplay 标签在手机上不兼容,APP 中设置问题导致无奈自动播放,无论安卓或 IOS。须要模仿自动播放只能通过一些事件触发。
5、webkit-playsinline playsinline: 视频播放时局域播放,不脱离文档流。然而这个属性比拟特地,须要嵌入网页的 APP 比方 WeChat 中 UIwebview 的 allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES,能力失效。换句话说,如果 APP 不设置,你页面中加了这标签也有效,这也就是为什么安卓手机 WeChat 播放视频总是全屏,因为 APP 不反对 playsinline,而 ISO 的 WeChat 却反对。
这里就要补充下,如果是想做全屏直播或者全屏 H5 体验的用户,ISO 须要设置删除 webkit-playsinline 标签,因为你设置 false 是不反对的,安卓则不须要,因为默认全屏。但这时候全屏是有播放控件的,无论你有没有设置 control。做直播的可能用得着播放控件,然而全屏 H5 是不须要的,那么去除全屏播放时候的控件,须要以下设置:同层播放。
6、x5-video-player-type: 启用同层 H5 播放器,就是在视频全屏的时候,div 能够出现在视频层上,也是 WeChat 安卓版特有的属性。同层播放别名也叫做沉迷式播放,播放的时候看似全屏,然而曾经除去了 control 和微信的导航栏,只留下 ”X” 和 ”<“ 两键。目前的同层播放器只在 Android(包含微信)上失效,临时不反对 iOS。笔者想过为什么同层播放只对安卓凋谢,因为安卓不能像 ISO 一样局域播放,默认的全屏会使得一些界面操作被拦截,如果是全屏 H5 还好,然而做直播的话,诸如弹幕那样的性能就无奈实现了,所以这时候同层播放的概念就解决了这个问题。不过笔者在测试的过程中发现,不同版本的 ISO 和安卓成果略有不同。
7、x5-video-orientation: 申明播放器反对的方向,可选值 landscape 横屏, portraint 竖屏。默认值 portraint。无论是直播还是全屏 H5 个别都是竖屏播放,然而这个属性须要 x5-video-player-type 开启 H5 模式
8、x5videoplayerfullscreen: 全屏设置。笔者还未能领悟这个标签的用意,在测试过程中发现,ture 和 false 的设置会导致布局上的不一样,如图 Click 标签先后的地位。
另外补充下,ISO 微信浏览器是 Chrome 的内核,相干的属性都反对,也是为什么 X5 同层播放不反对的起因。安卓微信浏览器是 X5 内核,一些属性标签比方 playsinline 就不反对,所以始终全屏。
2. 微信 H5 页面嵌入指定地位的小窗口视频
<video id=”video” class=”video” src=”./media/video.mp4″ poster=”./images/poster.png” preload=”none” x5-video-player-type=”h5″ x5-video-player-fullscreen=”true” x-webkit-airplay=”true” airplay=”allow” webkit-playsinline=”true” playsinline=”true”></video>
参考链接:
1、https://www.cnblogs.com/baiyy…