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. 多线程学习-基础（ 十）一个synchronized(){/*代码块*/}简单案例分析

    一.提出疑惑 上一篇文章中,分析了synchronized关键字的用法.但是好像遗漏了一种情况. 那就是: synchronized(obj){/*同步块代码*/} 一般有以下几种情况: (1)syn ...

  2. 开源PCRF、PCRF体验与PCRF实现

    什么是PCRF? PCRF是LTE网络EPC子系统中策略与计费控制(PCC)子系统中的网络实体.LTE网络或EPC网络的规范文档可到参考3GPP官方网站,ETSI欧洲标准,FTP下载地址.与PCC相关 ...

  3. [转]MYSQL5.7版本sql_mode=only_full_group_by问题

    转至:https://www.cnblogs.com/zhi-leaf/p/5998820.html 具体出错提示: [Err] 1055 - Expression #1 of ORDER BY cl ...

  4. raspberry pi 3 openjdk 性能低下解决方法

    在使用nutch 是时候发现generate的性能很低,应该是openjdk的问题. orcale 实际已经提供了armhf的jdk,替换下性能就上去了 jdk下载链接:Download 配置方法和普 ...

  5. oracle connect by 递归，反递归，自动补全查询实现

    递归: select *    from t_pams_solution t   start with t.id is null  connect by prior id = t.parent_id  ...

  6. signalR之java client的websocket BUG处理

    最近在用SignalR,服务端已经写好(老铁,没毛病,很稳),然后有坑的是我还得写App端,那就撸吧,java也不是什么很难的东西.奈何坑多(已经踩了一波android的控件bug),这次遇到了MS的 ...

  7. Spring.Net 未将对象引用设置到对象的实例

    “/”应用程序中的服务器错误. 未将对象引用设置到对象的实例. 说明: 执行当前 Web 请求期间,出现未经处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详 ...

  8. Nginx部署静态页面及引用图片有效访问的两种方式

    nginx安装百度一下有很多,直接正题: 静态文件目录结构 file#文件位置 /home/service/file/ css js images html fonts 配置nginx.conf核心代 ...

  9. vue axios ajax引擎

    0.调用 1.axios api axios.request(config) axios.get(url[,config]) axios.delete(url[,config]) axios.head ...

  10. DP【洛谷P2363】马农

    [洛谷P2363]马农 题目描述 在观看完战马检阅之后,来自大草原的两兄弟决心成为超级"马农",专门饲养战马. 兄弟两回到草原,将可以养马的区域,分为N*N的单位面积的正方形,并实 ...