手机浏览器(微信浏览器)不全屏播放视频的方法

这也是绕开video标签被劫持的一种方法

项目要求:根据 快乐童书 app 版做一个 微信体验版


遇到的难点就是 视频播放的时候老是调用浏览器自带的播放器
研究了好几天,使用了各自方法,包括把视频转换为gif的方式,
使用 一些游戏框架的 canvas  播放视频的方式。最后都不行,
游戏框架的 canvas  播放视频其实也是调用的浏览器自带的解码器的,
所以一播放就会调用浏览器的native播放器。

后来突然想到应该避开调用浏览器自带的解码器,在github上找到了一个开源的jsmpg.js,
貌似这也是最好的js写的解码库,只怪js性能比起c还是差很多。

点击链接查看效果图(可以在微信中打开看):
http://gowaou.duapp.com/play.html

快乐童书 web 动态 版(在微信中打开):
http://gowaou.duapp.com/dongtai/

1,  我的项目视频需要竖屏播放,所以 使用 格式工厂 把      横屏的视频转换为竖屏的视频    

2 , 网页视频解码用第三方的解码库 jsmpg.js (只支持mpeg格式视频)。

3, 转码成mpeg格式视频需要特定的参数
   ffmpeg -i pic90.mp4 -f mpeg1video -vf "crop=iw-mod(iw\,2):ih-mod(ih\,2)" -b 0 out.mpg

参考的网页:
https://imququ.com/post/html5-live-player-2.html
效果图在github上的源码地址:

你可能感兴趣的:(web)