Canvas实时处理Video预研

video简介

HTML5里引入的新标记 <video> 实现了HTML对视频播放和音频播放的原生支持,有了这种原生的HTML5视频播放器/音频播放器,我们不再需要flash技术,而直接能将视频/音频嵌入到了网页中。

由于部分浏览器存在不支持<video> 标签,可以尝试使用video.js.

如何嵌入视频

方式一:

1
2
3
<video src="http://www.webhek.com/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
Your browser does not support the <code>video</code> element.
</video>

方式二:

1
2
3
4
5
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

video常用属性

属性 描述
autoplay 如果出现该属性,则视频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
webkit-playsinline IOS允许内嵌播放在网页,因浏览器默认,全局打开。

video在IOS和Andriod使用情况

1.video在IOS环境下微信、sq以及uc使用情况
默认,全屏播放video,通过webkit-playsinline属性可以达到内嵌入网页播放,添加controls属性会导致出现video控制条.

2.video在Andriod环境下微信、sq以及uc使用情况
但凡检测到页面可播放的video元素,都会调用浏览器封装的播放器,全屏播放,不支持webkit-playsinline属性,发现qq域名拥有腾讯x5白名单,可以内嵌播放,默认不会调用全屏播放,但会自动添加浮动全屏按钮。

video转canvas

canvas中 drawImage() 方法可以在画布上绘制视频。想通过canvas绘制video视频的方式,来全兼容IOS和Andriod,发现还是无法解决Andriod中存在检测页面中video全屏播发的问题,示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- video视频在ios中wx和sq里面可以通过drawImage实现截取视频,andriod中wx和sq,不管你禁用还是隐藏video都会自动启用系统自带播放器-->
<!-- 这里ios会有控制条,是因为加了controls,不加就可以取消-->
<video id="video" controls width="270" autoplay webkit-playsinline="true">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type='video/mp4'>
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type='video/ogg'>
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.webm" type='video/webm'>
</video>

<p>画布(每 20 毫秒,代码就会绘制视频的当前帧):</p>

<canvas id="myCanvas" width="540" height="270" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
var video=document.getElementById("video");
var canvas=document.getElementById("myCanvas");
ctx=canvas.getContext('2d');

video.addEventListener('play', function() {var i=window.setInterval(function() {ctx.drawImage(video,0,0,540,270)},20);},false);
video.addEventListener('pause',function() {window.clearInterval(i);},false);
video.addEventListener('ended',function() {clearInterval(i);},false);

</script>

参考资料: