由于流量和带宽原因,很多浏览器限制了音视频的自动播放,打开页面地址后,页面上音频、视频不能自动播放,需要有用户交互后才开始播放,如点击、触摸、滑动等。在电脑端上,一般只需把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的时候,对应着最佳的视频质量。