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. java8之lambda表达式&方法引用(一)

    本文将简单的介绍一下Lambda表达式和方法引用,这也是Java8的重要更新,Lambda表达式和方法引用最主要的功能是为流(专门负责迭代数据的集合)服务. 什么是lambda表达式 可以把lambd ...

  2. Go语言环境安装-Mac

    1.环境安装 Go SDK下载和安装,下载地址为:https://golang.org/dl/ Visual Studio Code下载和安装,下载地址为:https://code.visualstu ...

  3. 正经学C#_表达式与其运算符[赋值运算符]：《c#入门经典》

    上一节中介绍了算术运算符,算术运算符的优先级. 今天说说赋值运算符,不陌生,=[等号]就是赋值运算符的一种. 除此之外还有好多种的.见下图. 运算符 类别 描述 实例 = 二元 简单的赋值运算符,把右 ...

  4. Total Commander的初次体验

    从汉化新世纪下载到最新的TC张学思版后,运行文件只需依照其提示就可以完成该软件的安装.作为新手初次运行体验了以下功能: 一.目录跳转 1. 初次启动TC软件界面截图: 2. 按下Ctrl+d后,直接再 ...

  5. 【图灵学院09】RPC底层通讯原理之Netty线程模型源码分析

    1. dubbo 2.5.3 netty 3.2.5.Final

  6. 云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 （阿里云ECS服务器 ）课堂

    云端搭建Linux学习环境 链接https://edu.aliyun.com/article/19 1. 开通云服务器 2 1.包年包月   按量付费(适合测试数据的时候) 2 2.地域   服务器数 ...

  7. loj #6250. 「CodePlus 2017 11 月赛」找爸爸

    #6250. 「CodePlus 2017 11 月赛」找爸爸 题目描述 小 A 最近一直在找自己的爸爸,用什么办法呢,就是 DNA 比对. 小 A 有一套自己的 DNA 序列比较方法,其最终目标是最 ...

  8. linux页表机制

    每个进程都拥有一个自己的页表,在linux中,有一个页目录数组,这是分页机制的最高层,每个进程的页表对应其中的一个页目录项,通过cr3寄存器可以访问. 一个进程的页表,对应的页表项中对应页的物理地址. ...

  9. 安装lombok

    1. lombok的jar包路径 wangfei@DESKTOP-8AT8HRO MINGW64 /d/gradle-3.4.1/caches/modules-2/files-2.1/org.proj ...

  10. IDEA 一些 莫名其妙的错误....解决办法...

    1.  如果 一直 update indices......... windows : 删除 c 盘 用户目录下 .IntelliJIdea2017.3/system/caches  目录 ..... ...