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 ...
随机推荐
- android加载字体内存泄漏的处理方法
在开发android app的开发过程中,会使用到外部的一些字体.外部字体在加载的时候,容易造成内存泄漏. 比如: Typeface tf=Typeface.createFromAsset(getAs ...
- Java50道经典习题-程序47 输入数字打印星号
题目:读取7个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*. import java.util.Scanner; public class Prog47{ public static ...
- Hibernate常见异常总结
系统配置 1.没有查找到src目录下的hibernate.cfg.xml Exception in thread "main" org.hibernate.HibernateExc ...
- vtk-py求3d模型表面积
模型格式:.obj 环境:python3.6+vtk7.1 vtk版: import vtk filename = "XXXX.obj" reader = vtk.vtkOBJRe ...
- web.xml 有什么用？（Java框架）
1.每个javaEE工程中都有web.xml文件,那么它的作用是什么呢?它是每个web.xml工程都必须的吗? 一个web中可以没有web.xml文件,也就是说,web.xml文件并不是web工程 ...
- 青橙 A1280. 最长双回文串
A1280. 最长双回文串 时间限制:2.0s 内存限制:512.0MB 总提交次数: AC次数: 平均分: 将本题分享到: 查看未格式化的试题 提交 试题讨 ...
- js window.open()打开的页面关闭后刷新父页面
function test(){ var winObj = window.open(URL); var loop = setInterval(function(){ if(winObj.closed) ...
- luogu2257 YY的GCD--莫比乌斯反演
link 给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对 多组数据T = 10000 N, M <= 10000000 ...
- asyncjs，waterfall的使用
waterfall waterfall(tasks, [callback]) (多个函数依次执行,且前一个的输出为后一个的输入) 按顺序依次执行多个函数.每一个函数产生的值,都将传给下一个函数.如果中 ...
- sharepoint_study_10
描述:想页面添加一段脚本效果如图所示 图示: 代码(脚本编辑器): <div class="index-links"> <a class=" index ...