安卓微信视频播放全屏问题处理+利用ffmpeg转ts视频,通过jsmpeg.js播放

摘自:https://thinkerchan.com/2017/05/31/安卓微信视频播放全屏问题处理/

或者

https://thinkerchan.com/

这篇文章

安卓全屏问题

视频全屏的H5专题十分收到业界喜欢, 虽然iOS下全屏自动播放并没有太大问题, 然而在安卓手机上,video组件全屏的时候会在顶层,好像”漂浮”在整个浏览器上面, 体验起来非常差. 除此之外, 即便采用JS给video设定为容器的宽高这方案, 也会出现难看的播放器控件,这时候不得不人为给视频底部加空白,在通过JS计算适合的高度以挡掉丑陋的播放器控件, 实在苦恼.


JSMpeg简介

偶然发现JSMpeg这个项目,能解决安卓全屏video漂浮问题问题.

它的原理就是JS解码视频, 用 WebGL & Canvas2D渲染出来,于是达到避免Video控件在安卓微信浏览器下产生的问题, 不过有一个需要说明的地方就是, 你需要用将你的视频文件(通常是mp4)转换成ts格式的视频文件, 并且 ,在iOS下的微信浏览器下, 使用jsmpeg播放ts文件, 是没有声音的,这个时候你可以另外添加对应的audio同步播放即可. (其实iOS我们直接使用video+mp4的方式,也用不到这个插件).

推荐使用http://ffmpeg.org/, 至于怎么安装就不再赘述.

生产ts视频文件命令:

$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 output.ts

这个时候, 默认转换到最低的清晰度, 如果要调整清晰度, 可以像这样调整:

$ ffmpeg -i input.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b:v 1500k output.ts


JSMpeg调用

<canvas id = "canvas"></canvas>

<script>

             var player = new JSMpeg.Player('video.ts', {

                      canvas: canvas,

                      loop: false,

                       progressive: true, //渐进加载,false的话则会先下载完再渲染

                       autoplay:true

              });  

</script>

当然你也直接在HTML中使用:

<div class="jsmpeg"

        data-url="video.ts"

       data-loop="false"

        data-autoplay="true">

</div>


缺点:

虽然这个方案能实现安卓下canvas播放视频, 但本人实测,它实在是太耗性能了(华为p10都会卡), 并不像作者所说的的流畅.

    JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at     just 20kb gzipped.

所以究竟能不能用这个方案, 得根据需求自行斟酌.



摘自:https://blog.csdn.net/weixin_43029824/java/article/details/103391494

利用ffmpeg转ts视频,通过jsmpeg.js播放(自动播放视频,无video默认控制条)

方案

1、下载 jsmpeg.js

ffmpeg : http://ffmpeg.zeranoe.com/builds/ win64

https://evermeet.cx/ffmpeg/ mac OS X 64

jsmpeg.js :https://github.com/phoboslab/jsmpeg

2、使用

win 64 版为例:

下载 ffmpeg 后,解压 ffmpeg,进入 bin 目录看到几个 exe 这就是处理程序。

下载解压后:

解压后图

win+r 输入 cmd 打开命令窗口,转到 bin 目录,并输入转码代码:(或者直接在bin目录地址栏清空地址后输入cmd打开命令窗口)

ffmpeg -i demo1.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 ts.ts

画质清晰些的转码代码:

ffmpeg -i niudan.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -q 0 out22.ts

demo1.mp4 是我们要原始视频 (这里我直接把视频放在 bin 目录里)

回车运行后,bin 目录输出 ts.ts

更多参数配置命令

ffmpeg -i 1.mp4 -f mpegts -codec:v mpeg1video -s 640x1040 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k out.ts

原始视频                导出尺寸  导出码率 导出帧频        音频采样率   音频比特率

ps:相关参数请参看https://github.com/phoboslab/jsmpeg 文档

播放控制:

play() – start playback

pause() – pause playback

stop() – stop playback and seek to the beginning

destroy() – stops playback, disconnects the source and cleans up WebGL and WebAudio state. The player can not be used afterwards.

volume – get or set the audio volume (0-1)

currentTime – get or set the current playback position in seconds

例如 player.pause()

注意:

清晰度和原视频差不多的条件下,码率几乎需要多设置 1 倍;

跨域问题

jsmpeg 请求 ts 媒体文件,使用的是 XMLHttpRequest,且同时使用了 setRequestHeader(“Range”, “bytes=xxxx”); 来请求切割数据,这样拿到我们设定 xxx 的字节的数据后,我们可以及时对数据进行处理(jsmpeg 设置参数 chunkSize 就是这里的 xxx)。

因为跨域,切割数据 服务器认为这是对文件进行二次操作所以被拒绝。

demo必须放在服务器上面跑才能正常加载ts文件,如果是在本地的话,不能直接拖进浏览器运行,需要起个本地服务器

ts文件编码方式必须为MPEG编码,考虑到现在先进的ts编码方式是H.264了,之前用H.264编码的ts发现播放不了

那么对服务进行配置一下 :我这里使用的 serve 工具 跑个服务即可

serve 实例:

首先需要安装 node

使用 npm 命令行来安装 serve

npm install -g serve

安装完成后,使用 serve -s .\dist 进入文件文件目录就可以了

<body>

    <canvas id="video-canvas"></canvas>   

    <script type="text/javascript" src="jsmpeg.min.js"></script>

    <script type="text/javascript">

    window.onload=function(){

        var canvas = document.getElementById('video-canvas');

        var url = 'demo-ts.ts';

        //var url = 'ws://'+document.location.hostname+':8082/';

        var player = new JSMpeg.Player(url, {canvas: canvas,loop: true, autoplay: true});

    }

    </script>

</body>

参考链接:

chrome66 禁止自动播放后,有什么比较好的方法实现audio的自动播放吗

微信Android自动播放视频(可交互,设置层级,无控制条,非X5)ffmpeg,jsmpeg.js,.ts视频

mac osx 下 homebrew安装

mac 系统安装使用 ffmpeg

HTML5音视频播放(Video,Audio)和常见的坑处理

video在微信和QQ浏览器中不全屏播放解决