html5--移动端视频video的android兼容,去除播放控件、全屏等( 三 )


相应产生的一些问题的解决办法:
1 , 视频被放大了 , 画面会被截掉一部分怎么办?
这个可以在视频输出的时候两边和下边留一些留白 , 即留白可以没用画面黑色底 , 但又属于视频尺寸的一部分 , 放视频放大后 , 将主体画面置满视窗 , 被挤到外面都是留白的即可 。
2 , 视频播放完毕后会中间自动出现播放控件按钮
如果确实不想在播放完是出现一个按钮 , 哪怕只有零点几秒 , 就把视频掉 , 可以使用监听视频播放 , 用video.-video.的差值判断是否快要结束了 , 在结束前零点几秒提前掉 。
3 , 要是不是全屏视频怎么搞?
可以 , 思路是一样的 , 将视频控件顶出外层的包裹层 , 利用: 。只是全屏的外层包裹是body而已 。
哦了 , 终于可以搞一个全屏视频伪装的东西了 。
2017-03-21补
随着时间的变迁 , 设备和技术的更新 , 本着不坑害同胞的心 , 负责任更新下还是有必要的
咱们还是从上面的4个要点来说ios和吧
全屏处理;
自动播放;
播放控制;
隐藏播放控件;
补充--全屏处理
ios加属性 , 之前只带前缀的在ios10以后 , 会吊起系统自带播放器 , 两个属性都加上基本ios端都可以保证内敛到浏览器里面了 。如果仍有个别版本的ios会吊起播放器 , 还可以引用一个库--video(具体用法很简单看它 , 这里不介绍了 , 只需加js一句话 , css加点) , 
地址是 , 加上 -这两个属性和这个库基本可以保证ios端没有问题了(不过亲测 , 只加这两个属性不引入库好像也是ok的 , 至今没有在ios端微信没有出现问题 , 如果你要兼容uc或者qq的浏览器建议带上这个库) , 
最后介绍个新的x5-video--type="h5"属性 , 腾讯x5内核系的微信和手Q内置浏览器用的浏览器的内核 , 使用这个属性在微信中视频会有不同的表现 , 会呈现全屏状态 , 貌似播放控件剥去了 , 至少加了这个属性后视频上层可以有其他dom元素出现了(非腾讯白名单机制的一种处理措施) , 

补充--自动播放
始终不能自动播放 , 不多说 。值得一提的是经测现在ios10后版本的和微信都不让视频自动播放了(顺带音频也不能自动播放了) , 但微信提供了一个事件 , 在微信嵌入全局的这个事件触发后 , 视频仍可以自动播放 , 这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式 , 其他如手q或者其他浏览器 , 建议就引导用户出发触屏的行为操作出发比较好 。
//也可以在这个事件触发后播放一次然后暂停(这样以后视频会处于加载状态 , 为后面的流畅播放做准备)document.addEventListener("WeixinJSBridgeReady", function (){ video.play();video.pause();}, false)