FFmpeg结合jsmpeg解决安卓端视频只能全屏播放问题-前端撸码笔记

以下写的太繁琐，而且也是老版，还是直接看官方文档吧：https://github.com/phoboslab/jsmpeg

———————-

手机端播放视频时可以通过给video标签添加x5-video-player-type="h5" x5-video-player-fullscreen="false" webkit-playsinline="true" playsinline="true" 等属性来控制视频不全屏播放，不过这个方法对安卓端不能说无效，只是不够完美，因为安卓会渲染成浏览器内全屏，这个不是我们想要的，找了很多方法，主要的思路都是通过canvas渲染来实现，而我直接用canvas的drawImage()直接写的话发现安卓不识别，不知道是什么原因。然后我又想到用现成的js插件解决，于是搜到了jsmpeg这个库，而这个库只支持.mpg格式的视频，用格式工厂转换不好使，于是找到可以用FFmpeg软件来转换。具体查看这三篇文章：

HTML5 视频直播（二）： https://imququ.com/post/html5-live-player-2.html

在手机web中播放视频（使用js，不使用video标签，支持直播）： https://segmentfault.com/a/1190000007468013

如何在Windows上安装FFmpeg程序：http://zh.wikihow.com/%E5%9C%A8Windows%E4%B8%8A%E5%AE%89%E8%A3%85FFmpeg%E7%A8%8B%E5%BA%8F

我是windows 64位系统，所以只说windows的方法。

首先是安装FFmpeg，按照步骤安装好之后就要进行格式转换了。比如我安装到D盘的FFmpeg目录下，那就把要转换的视频放到该目录下，然后打开命令行工具，定位到该文件夹：

QQ截图20170602164614.jpg

然后输入转换格式的命令：ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640×1030 -b:v 3M -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 256k 1.ts

其中1.mp4是原视频文件名称，1.ts是要转换成的视频名称，-r 30 意思是视频帧率是30 -b:v 是指视频码率越大越清晰 -s是分辨率，这样就可以得到对应的js的文件了。

ts视频格式可以带声音。详情看文档：https://github.com/phoboslab/jsmpeg

然后用jsmpeg库了：

<script src="http://jsmpeg.com/jsmpeg.min.js"></script>
<div class="jsmpeg page" data-url="media/1.ts"
     data-loop="false" data-autoplay="false" data-streaming="false" data-disableGl="false"
     data-poster="images/poster.jpg"></div>

把对应的数据写在dom中就可以，jsmpeg库会自动识别，也可以创建一个canvas，然后用new JSMpeg.Player()

<body>    
	<canvas id="video-canvas"></canvas>    
	<script src="http://jsmpeg.com/jsmpeg.min.js"></script>  
	<script type="text/javascript">    
		var canvas = document.getElementById('video-canvas');    
		var url = 'ws://'+document.location.hostname+':8082/';    
		var player = new JSMpeg.Player(url, {canvas: canvas});    
	</script>    
</body>

这样基本就能够达到要求。

demo: http://h5.appro.cc/app/lantai/android.html

下载.png

未经允许不得转载：前端撸码笔记 » FFmpeg结合jsmpeg解决安卓端视频只能全屏播放问题

内容推荐