最近在开发手机h5视频播放器嵌app里,在网上看到一些h5的插件,如video.js,zyMedia...,
个人觉得如果在移动端用的话,没多大必要用这些插件,直接用h5提供的标签就可以了,
官方也提供了很多关于播放器的接口方法。
说一下我遇到的坑吧,由于项目是一个试水的项目,所以公司决定先用MP4格式的视频,
视频是视频提供商提供的,刚开始他们提供了一个视频大小240M,由于网络,带宽一些问题,
在手机上测试出现很多问题,最明显的就是当视频播放到22秒的时候,就跟不上了,出现加载中状态,
并且是一直这个状态,后来给出的解决方法是压缩视频,提供商给我们压缩到40几M,画质还不错480P,
但是又出现新的问题,视频在一些安卓手机上加载不出来,有一些是声音出来,图像出不来,后来经过
研究发现,HTML5支持的视频MP4格式是要求H.264编码的,其他编码的会出现问题,后来通过格式转换
成H.264编码的MP4格式视频,经测试所有机子都OK了
再补充一点,h5头要加上
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no,width=device-width,height=device-height"/>
,由于之前没有加上maximum-scale=1, user-scalable=no这两个,导致视频全屏播放回去的时候,页面结构被破坏,页面被撑大