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. vs2010 怎样设置文本编辑窗口和解决方案资源管理器同步？

    即切换左边的文本编辑窗口,解决方案资源管理器如何定位到相应的文件项上?答案: 工具--选项--项目和解决方案--常规--在解决方案资源管理器中跟踪活动项(前打勾)确定 应该就可以了.

  2. yzm10的小简介

    yzm10,退役OIer,现役ACMer.大学生一枚,从高中开始接触编程(入门pascal...),过程基本自学,蒟蒻一只,在各大比赛划水打酱油..15年水得noip联二后退役,结束OI之旅.也是在1 ...

  3. GUID介绍

    GUID介绍 GUID(Global unique identifier)全局唯一标识符,它是由网卡上的标识数字(每个网卡都有唯一的标识号)以及 CPU 时钟的唯一数字生成的的一个 16 字节的二进制 ...

  4. signalR之java client的websocket BUG处理

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

  5. vue 项目接口管理

    在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理. 本文使用vue-cli ...

  6. WGestures鼠标手势快捷手势介绍

    1.官方网站 WGestures 2.快截图 3.自定义快捷键列表

  7. JavaFx 实现画图工具

    制作一款类似于Windows画图工具程序 功能需求: (1)在画布上绘制直线.曲线.矩形.椭圆等图形 (2)实现输入文字,橡皮擦 (3)可以绘制填充图形以及设置画笔的颜色和粗细 (4)实现撤销操作.保 ...

  8. JS字符串替换（jQuery）

    ①自己封装的一个方法String.format String.format = function() { var s = arguments[0]; for (var i = 0; i < ar ...

  9. java webservices 以Axis1.4方式 调用sap webservice接口.

    1. 首先需要下载Axis1.4 jar包,这个必应搜索大把,下载下来后把jar包加入eclipse工程项目路径中即可. 2. 下载mail.jar和activation.jar 俩个包.下载地址:h ...

  10. plsql查询结果中文乱码

    网上的教程很多,但是这里需要说明的是如果没有安装oracle客户端的情况下,该怎么修改注册表里面的oracle参数呢? 当然有些是不需要改注册表的,只需要配置环境变量就可以了,但是有的时候发现改了之后 ...