h5のvideo踩坑

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' ,分别对应横屏、竖屏及自动旋转

在微信浏览器还可以监听到进入全屏和退出全屏的事件,分别是 x5videoenterfullscreenx5videoexitfullscreen,可以针对做一下视频播放位置做处理

x5内核更多相关的使用记录,可以查看 X5同层播放器试用报告

🍆 ios实现内联播放

为了使视频能小窗播放,只需要在video标签加入 playsinlinewebkit-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下面的运行效果

pc-video

🍈 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'}
]);
标签: javascript html5

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论