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. 通过ADB命令行卸载或删除你的Android设备中的应用（转载）

    转自:http://mytiankong.com/?p=11755 如果你对你的Android设备在与命令行的交互间有一定的兴趣,那你可能想学习一些使用ADB卸载设备中已安装应用的技巧.为了使这种方法 ...

  2. .Net Core 使用Session

    1. NUGET包引用 icrosoft.AspNetCore.Session 2.Startup中添加一下代码: public void ConfigureServices(IServiceColl ...

  3. Repeater控件最后一笔记录高亮显示

    Insus.NET以前有写过 <Repeater控件第前10笔记录高亮显示> 不过,现在有一个想法,就是最后一笔记录高亮显示,怎样实现? 技术要求,就是获取最后一笔的索引即可.可以从数据源 ...

  4. java java web及tomcat的使用

     java web及tomcat的使用 一.什么是java web: 参考百度百科: http://baike.baidu.com/link?url=HnaWXFD7wFfPAlFMW02GV6r5p ...

  5. java 学习第零篇JDK安装和记事本编辑JAVA

    用记事本来编写java 首先你要安装JDK. 第一步下载JDK. 这步不多BB. 第二部安装JDK. 你要么改安装地址或者默认. 也不多BB. 第三步配置环境变量 WIN10为例: 此电脑 右键  属 ...

  6. Schema技术

    Schema 技术 Schema 是 DTD 的代替者,名称为 XML Schema,用于描述XML 文档结构,即对XML文档做出规范,比 DTD 更加强大,最主要的特征之一就是XML Schema ...

  7. Unity自带IAP插件使用（googleplay）

    https://blog.csdn.net/ar__ha/article/details/64439872 Unity Services里的Unity IAP对于IOS和GooglePlay的支付用这 ...

  8. 【51nod1847】奇怪的数学题（Min_25筛+杜教筛）

    题面 传送门 题解 这题有毒--不知为啥的错误调了半天-- 令\(f(i)={sgcd(i)}\),那么容易看出\(f(i)\)就是\(i\)的次大质因子,用\(i\)除以它的最小质因子即可计算 于是 ...

  9. P2498 [SDOI2012]拯救小云公主

    \(\color{#0066ff}{ 题目描述 }\) 英雄又即将踏上拯救公主的道路-- 这次的拯救目标是--爱和正义的小云公主. 英雄来到boss的洞穴门口,他一下子就懵了,因为面前不只是一只bos ...

  10. [BZOJ3337] ORZJRY I --块状链表大毒瘤

    link 题目大意:维护一个序列 支持: 1.单点插入 2.单点删除 3.区间翻转 4.区间旋转 5.区间加 6.区间赋值 7.询问区间和 8.询问区间极差 9.询问区间与给定某个数差值绝对值的最小值 ...