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绘图的使用的更多相关文章

  1. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  2. 关于HTML5中video标签的奇怪现象

    很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...

  3. 关于HTML5中Video标签无法播放mp4的解决办法

    1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" ...

  4. html5 中video标签属性

      <video id="haoroomsvideo" src="haorooms.mp4" poster="images/haorooms.j ...

  5. html5 中的SVG 和canvas

    想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Gra ...

  6. 测试开发之前端——No2.HTML5中的标签

    HTML5中的标签. 标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写 ...

  7. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  9. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

随机推荐

  1. c#百分比计算

    //此方法得到的百分比后小数太多,不行double percent=Convert.ToDouble(2)/Convert.ToDouble(34); string result=(percent*1 ...

  2. metasploit 读书笔记-EXPLOITATION

    一、渗透攻击基础 1.常用命令 show exploits 显示Meta框架中所有可用的渗透攻击模块。 show options 显示模块所需要的各种参数 back 返回Meta的上一个状态 sear ...

  3. 正经学C#_变量与其数据类型：《c#入门经典》

    这一篇总结以下变量与其数据类型. 变量:在c#中指 某一个值或者数据存储在变量中,并且可以取出或者查看.变量不仅仅是一种,也有很多种,细分而言就是类型.泛指就是变量.如果是要是使用变量就要 声明变量, ...

  4. Binder学习笔记（五）—— Parcel是怎么打包数据的？

    前文中曾经遇到过Parcel,从命名上知道他负责数据打包.在checkService的请求/响应体系中,Parcel只打包了基本数据类型,如Int32.String16……后面还要用于打包抽象数据类型 ...

  5. 跨平台技术iOS与安卓

    1.教学资源获取 Flutter的使用教学笔记 2.本地学习笔记

  6. linux 学习文档

    1.nginx中文文档 http://www.nginx.cn/doc/

  7. [hdu 1568] Fibonacci数列前4位

    2007年到来了.经过2006年一年的修炼,数学神童zouyu终于把0到100000000的Fibonacci数列(f[0]=0,f[1]=1;f[i] = f[i-1]+f[i-2](i>=2 ...

  8. forEach，for in，for of循环的用法

    一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,a ...

  9. ConcurrentHashMap get方法保持同步的解释

    原文链接:https://blog.csdn.net/artaganan8/article/details/80867158 ConcurrentHashMap是Java5中新增加的一个线程安全的Ma ...

  10. [USACO08MAR]跨河River Crossing dp

    题目描述 Farmer John is herding his N cows (1 <= N <= 2,500) across the expanses of his farm when ...