如何解决Android、iOS以及微信内H5页面上视频不能自动播放的问题

由于流量和带宽原因,很多浏览器限制了音视频的自动播放,打开页面地址后,页面上音频、视频不能自动播放,需要有用户交互后才开始播放,如点击、触摸、滑动等。在电脑端上,一般只需把video引用的视频设置下 autoplay=autoplay" muted="muted" 就能自动静音播放了;但在手机端里,就算视频静音了,为了避免浪费用户的流量,还是无法实现在所有环境下都自动播放,如iOS和微信里。

解决这个问题的办法之一就是使用canvas和JSMpeg,让Canvas的动态效果不断获取ts视频当前画面,渲染到Canvas画布上,只要能使用canvas,就能实现视频自动播放。

视频自动播放,能解决很多之前H5无法做到的效果,如在H5页面上像电脑端那样显示视频动效背景、动效加载、场景过渡动效等。

下面例子就是一个无声背景动效,打开页面就是一个视频动效,还设置了动效播完后,自动跳到指定场景。把HTML生成一个页面直接移动端打开就能运行效果。(把那个video3.ts替换为这个带声音的ts文件https://jsmpeg.com/blade-runner-2049-360p.ts [有跨域问题不能直接引用,需先下载],在播放时有屏幕交互时,就能打开视频的声音)。JSMpeg 是一种采用Javascript解码音视频的技术,需要把视频文件如mp4转换成ts格式才行,转换方法详见后面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1080,user-scalable=no,target-densitydpi=device-dpi">
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="robots" content="all">
    <title>TITLE</title>
    <style>
        .loading{background:#211b17;opacity:1;z-index:1;}
        .loading canvas{width:1080px;height:2376px;position:absolute;top:50%;left:0;margin-top:-1188px;z-index:-2;}
        .loading canvas{opacity:0;-webkit-transition:.4s;}
        .loading canvas.show{opacity:1;}
    </style>
</head>
<body>
    <div class="loading">
        <canvas id="videoLoading"></canvas>
    </div>
    <div class="index">
        <img src="https://www.baidu.com/img/flexible/logo/pc/result.png">
    </div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://jsmpeg.com/jsmpeg.min.js"></script>
<script>
//loading视频
var videoLoading = new JSMpeg.Player('https://nie.v.netease.com/nie/vts/harrypottermagicawakened.com/2021/gw/video3.ts', {
    canvas: document.querySelector('#videoLoading'),
    autoplay: true,
    loop: false,
    //视频播放中
    onPlay: function () {
        var intv = setInterval(function () {
            if (videoLoading.currentTime > 0) {
                $('#videoLoading').addClass('show');
                clearInterval(intv);
                $('.index').hide();
            }
        }, 40);
    },
    //视频播放完
    onEnded: function () {
        $('#videoLoading').removeClass('show').one('webkitTransitionEnd', function () {
            videoLoading.destroy();
        });
        $('.index').show();
    }
});
</script>
</body>
</html>

如何将mp4视频转换成ts格式

下载FFmpeg视频转换工具http://ffmpeg.org/ ,按说明安装,并添加环境变量,之后windows的CMD或PowerShell里输入 ffmpeg -version 查看版本信息的话,就是安装成功了。FFmpeg比较蛋疼是需要使用命令行来操作,MP4转换成TS,基本都是这个命令: ffmpeg -i test.mp4 -f mpegts -vcodec mpeg1video -s 360*640 -b:v 600k -r 24 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k test.ts
命令行进入到视频目录下,输入命令,回车即开始自动运行转换

参数解释:
test.mp4 视频文件
360*640 视频的宽高
-r 视频的帧率
-b:v 视频比特率,值越大视频越清晰 .ts 文件体积也越大
test.ts 转换后的文件名
完整参数参见官网文档:http://ffmpeg.org/ffmpeg.html

参数的调整建议按视频本身的参数,要注意命令行的代码,一个错误都可能导致 .ts 视频文件解析不了 如果导出的TS文件不能正常播放,检查命令行,多试几次转换

如何去掉mp4视频里的声音

如果Canvas调用的TS视频是有声音的,在移动设备上,是不能自动播放的,需要像普通音视频那样有一个用户的屏幕动作才行,此时就需要把视频里的声音给去掉。
具体办法:先把.mp4视频里的音频去掉,转换成.m4a,在把m4a转换成.ts格式(和mp4转ts的命令行基本一样,源视频名字换下即可)。
MP4转M4A的方法:
1、新建一个txt文件,并复制如下代码进入,然后保存。

@echo off & title
cd /d %~dp0
for %%a in (*.mp4) do (
 ffmpeg -i "%%~sa" -y -an -codec copy -q:v 1 "%%~na.m4a"
)
pause

2、把文件后缀修改为bat 。
3、把后缀为bat的文件放到要批量处理的视频文件夹里面。
4、在确保安装了ffmpeg的情况下,双击bat文件执行即可。
5、参数说明:
-i 输入文件,这里指的就是视频文件。
-y 表示无需询问,直接覆盖输出文件(如果有原文件的话)。
-vn 分离音频,不处理视频。
-an 分离视频,不处理音频。
-codec 一个编码器/解码器名称或者一个特定值“copy”(只适用输出)。
-q:v 1 q是质量,v是视频,v的取值范围是[1, 35],取值1的时候,对应着最佳的视频质量。