HTML5中video标签与canvas绘图的使用
video标签的使用
video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档):

domo01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video src="madashuai.mp4" loop="loop" autoplay="autoplay" controls="controls" width="" height=""></video>
</body>
</html>
- src 即视频的路径
- loop 即是否循环,即播放结束之后继续播放
- autoplay 即准备就绪之后就播放
- controls 即出现控制控件,如果没有则无开始暂停等按钮
- width和height可以控制video的宽度和高度
canvas中drawImage的使用

即接受的第一个参数可以是img,也可以是video,还可以是canvas, 后面的参数是用于剪切和控制宽高。
domo02:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video id="myVideo" src="madashuai.mp4" loop="loop" autoplay="autoplay" controls="controls"></video>
<br>
<button id="snapScreen">截屏</button>
<canvas id="mycanvas" width="" height=""></canvas>
<script>
var mycanvas = document.getElementById('mycanvas').getContext('2d'),
snapScreen = document.getElementById('snapScreen'),
video = document.getElementById('myVideo');
snapScreen.onclick = function () {
mycanvas.drawImage(video, , , , );
}
</script>
</body>
</html>
- 我们先获取到canvas环境,然后点击按钮后就可以将当前视频截屏。

navigator.mediaDevices.getUserMedia()
通过这个方法,我们可以获得使用本地摄像头的权利,官方文档。
使用的时候一般都是和video标签向结合,即摄像头在video上显示出来。
demo03:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video id="myVideo" src=""></video>
<script>
navigator.mediaDevices.getUserMedia({
// audio: true, // 这里也可以开启声音
video: true
}).then(function (mediaStream) {
var myVideo = document.getElementById('myVideo');
myVideo.srcObject = mediaStream;
myVideo.onloadedmetadata = function () {
myVideo.controls = "controls";
myVideo.play();
}
});
</script>
</body>
</html>
- 注意: 这里的mediaStream的使用类似于es6中的promise的用法,即获得result之后就传递给了then作为参数使用
- 把视频源赋值给video标签的srcObject标签就可以在video中显示了。
- 其中的onloadedmetadata事件是在视频文件加载好了之后就会触发。

下面我们就可以把摄像头和video和canvas结合起来,这样就可以截屏了~
demo04
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video id="myVideo" width="" height="" src=""></video>
<button id="snapScreen">截屏</button>
<canvas id="myCanvas" width="" height=""></canvas>
<script>
var myVideo = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (mediaStream) {
myVideo.srcObject = mediaStream;
myVideo.onloadedmetadata = function () {
myVideo.controls = "controls";
myVideo.play();
}
});
var snapScreen = document.getElementById('snapScreen'),
canvas = document.getElementById('myCanvas').getContext('2d');
snapScreen.onclick = function () {
canvas.drawImage(myVideo, , );
}
</script>
</body>
</html>
下面这个还是比较有意思的:
demo05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo01</title>
</head>
<body>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<video class="myvideos" src=""></video>
<script>
var myvideos = document.getElementsByClassName('myvideos');
navigator.mediaDevices.getUserMedia({
video: true
}).then(function (mediaStream) {
for (var i = ; i < myvideos.length; i++ ) {
myvideos[i].srcObject = mediaStream;
myvideos[i].width = ;
myvideos[i].play();
}
});
</script>
</body>
</html>
HTML5中video标签与canvas绘图的使用的更多相关文章
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- 关于HTML5中video标签的奇怪现象
很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...
- 关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...
- html5 中video标签属性
<video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...
- html5 中的SVG 和canvas
想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...
- 测试开发之前端——No2.HTML5中的标签
HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE> 定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
随机推荐
- TestNG入门
在Eclipse中安装TestNG 打开Eclipse Help ->Install New Software , 然后Add "http://beust.com/ecli ...
- 英文操作系统中中文乱码(SQL中 NVARCHAR 和 VARCHAR区别)
varchar在SQL Server中是采用单字节来存储数据的,nvarchar是使用Unico来存储数据的.中文字符存储到SQL Server中会保存为两个字节(一般采用Unico编码),英 ...
- wpf跳转网页
如果是本地磁盘上的网页,可以考虑利用操作系统的文件关联自动调用操作系统默认浏览器: System.Diagnostics.Process.Start("explorer.exe", ...
- c#打开关闭进程
private const string FileName = "test.exe"; //进程名称不带扩展名 private const string ProcessName = ...
- boostrap 进入条显示百分比
<div class="progress"> <div class="progress-bar progress-bar-success" ...
- UWP&WP8.1 基础控件—TextBlock和TextBox
TextBlock:文本展示控件,有着强大的功能 TextBox:文本输入控件. 这两个控件是最为常用的基础控件. TextBlock 基础用法: 打开一个UWP项目,在XAML设计页面你可以从工具箱 ...
- 自定义非等高 Cell
1.自定义非等高 Cell介绍 1.1 代码自定义(frame) 新建一个继承自 UITableViewCell 的类. 重写 initWithStyle:reuseIdentifier: 方法. 添 ...
- angular原理及模块简介
Angular简介(大神可略过) Angular是一个强大的前端框架,其强大之处主要是可以把静态页面与动态数据绑定起来.平时我们看到的网页界面上面的数据都是固定,但如果我们要变化这些数据,例如我在一个 ...
- Automake基本用法
一. 确认你的系统安装有GNU的如下软件: 1. automake2. autoconf3. m44. perl5. 如果你需要产生共享库(shared library)则还需要GNU Libtool ...
- Internet路由-主机路由表和转发表
1.路由表 路由信息最终要存储在用于路由器的主机或者专业路由器上,存放这些信息的地方称为路由表.其中包含三元素:目标地址,掩码,下一跳. 1.1.查询路由表的开销 有人认为查询路由表是一件和交换机查询 ...