video 是 h5 新增的标签,可以通过 video 标签播放 ogg、mp4 、webm 等格式的视频。
🌽 video 自带属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
muted | muted | 规定视频的音频输出应该被静音。 |
poster | URL | 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
🍅 video 第三方属性
微信 video 标签的私有属性
x5-video-player-type='h5'
启用同层播放,取值固定为'h5'
注:这个属性需要在播放前设置好,播放之后设置无效,下面的 x5-video-player-fullscreen 也是一样
x5-video-player-fullscreen
是否全屏,取值为 true 或 false
x5-video-orientation
视频方向,取值分别为 landscape
、portrait
或者 landscape|portrait
,分别对应横屏、竖屏及自动旋转
在微信浏览器还可以监听到进入全屏和退出全屏的事件,分别是 x5videoenterfullscreen
和 x5videoexitfullscreen
,可以针对做一下视频播放位置做处理
x5 内核更多相关的使用记录,可以查看 X5 同层播放器试用报告
🍆 ios 实现内联播放
为了使视频能小窗播放,只需要在 video 标签加入 playsinline
和 webkit-playsinline
(不需要赋值,存在即为 true),但是此功能只支持 ios,安卓默认全屏,效果如下
ios 独有的属性还有 airplay 和 x-webkit-airplay 属性是用来配置 ios 的网页视频是否支持 airplay 功能,取值分别为 'allow' 和 'deny',测试了貌似没效果
🍔 videojs
video.js是一款基于 HTML5 的网络视频播放器。它支持 HTML5 和 Flash 视频,以及 YouTube 和 Vimeo(通过插件)。支持在桌面和移动设备上播放视频。
由于浏览器不同厂商的实现机制不一样,界面不一致,移动端更是层出不穷,所以为了统一界面和操作,选用这个历史悠久的视频播放插件来实现效果,目前我司技术栈主要是 vue 全家桶,所以为了方便使用,特地做了一下封装,具体 github 地址 ⭐️ vue-videojs ⭐️
npm install video.js vue-videojs
使用方法如下
<v-video ref="video" width="600" height="400" poster="//vjs.zencdn.net/v/oceans.png" class="video-js" webkit-playsinline playsinline x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" controls :sources="videos" :options="playOpts.options" @ready="videoReady" @ended="videoEnd"></v-video>
在 reday
回调方法里,可以通过 this.$refs.video.videojsObject;
来获取 videojs 的实例对象,其他操作都跟文档类似
以下分别是 PC 端,ios,android 下面的运行效果
🍈 videojs 的文档
var player = videojs("my_player_id");// 获取封面和设置封面console.log(player.poster());player.poster("//example.com/poster.jpg");// 获取资源console.log(player.currentSrc());// 更新资源player.src({ src: "//example.com/video.mp4", type: "video/mp4" });// 更新多个资源player.src([ { src: "//example.com/video.m3u8", type: "application/x-mpegURL" }, { src: "//example.com/video.mp4", type: "video/mp4" },]);