最近项目中接入 video.js 框架,在安卓机上 全屏 时, 有声音无画面 。
通过调试,发现在全屏后,video标签 width &height 均为0,
经过查看video.js官网文档,检查播放器实例配置,无误,Google各种方案无果。
果断放弃video自带的全屏方案。
通过修改video标签旋转,按宽高比放大视频至设备屏幕宽高
此时可以实现全屏效果。
但是问题又出现了,手机的20px的 状态条 仍旧在 =_=#
可以结合cordova插件 cordova-plugin-statusbar 插件实现。
【插件地址 传送门】
至此,曲线救国,问题修复。
浏览器不支持自动全屏播放,全屏播放的操作需要用户触发。Flv.js在JavaScript中流式解析flv文件流,并实时转封装为fmp4,通过MediaSourceExtensions喂给浏览器,实现了FLV格式视频的播放。
Bilibili相信大家都不会陌生,而Flv.js就是由bilibili网站开源的HTML5Flash视频(FLV)播放器,纯原生JavaScript开发(ECMAScript6编写)。