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 ...
随机推荐
- 《Effective Java》第8章 通用程序设计
第47条:了解和使用类库 Top 100 Java Libraries on Github 2016 Library Number of Projects Type % of projects jun ...
- Xcode编译报错信息总结
1.dyld: Library not loaded: @rpath/.../xxx.framework 一般与这个库的加载路径有关,先看看是否将静态库设置成了动态库(库的Mach-o Type选项) ...
- jQuery 插件开发——GridData（表格）第二版
开发背景 表格插件之前我也写个一篇,当时写那个插件的时候,我自己还没有总结出写插件的方法,虽然功能实现了,但是使用起来还是有点别扭的,并且需要在调用写添加特定名称的方法,这个地方着实违背了开发插件的易 ...
- [转]VisualSVN错误 Cannot query proxy blanket解决办法
最近重新做了一下系统,在安装和使用svn过程中遇到了一些问题,记下备忘. 第一次安装好系统之后,安装VisualSVN遇到报错: Custom action InstallWMISchemaExcut ...
- gRPC官方文档(概念)
文章来自gRPC 官方文档中文版 gRPC 概念 本文档通过对于 gRPC 的架构和 RPC 生命周期的概览来介绍 gRPC 的主要概念.本文是在假设你已经读过文档部分的前提下展开的.针对具体语言细节 ...
- webpack4 入门（一）
一.简介 WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,less, TypeScript等),并 ...
- 从零开始安装 Ambari (4) -- 通过 Ambari 部署 hadoop 集群
1. 打开 http://192.168.242.181:8080 登陆的用户名/密码是 : admin/admin 2. 点击 “LAUNCH INSTALL WIZARD”,开始创建一个集群 3 ...
- beijing（数学题）
beijing(数学题) 甲和乙随机进行2n+1场n胜球赛,赌球必须对每场球赛单独押注.由于小明是甲队的铁杆球迷,现在小明希望如果甲最终获胜,那么他获得\(2^{2n-1}\)元,否则乙队获胜,他失去 ...
- loj #2025. 「JLOI / SHOI2016」方
#2025. 「JLOI / SHOI2016」方 题目描述 上帝说,不要圆,要方,于是便有了这道题. 由于我们应该方,而且最好能够尽量方,所以上帝派我们来找正方形.上帝把我们派到了一个有 NNN ...
- HackerRank - array-partition 并查集
https://vjudge.net/contest/279745#problem/G 每次将质数的倍数放进一个集合中,那么如果最后的集合数为n的话: 方案数: 2^n -2 : #include&l ...