HTML5中video标签与canvas绘图的使用

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="800" height="500"></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="400" height="240"></canvas>
 <script>
   var mycanvas = document.getElementById(‘mycanvas‘).getContext(‘2d‘),
     snapScreen = document.getElementById(‘snapScreen‘),
     video = document.getElementById(‘myVideo‘);
   snapScreen.onclick = function () {
     mycanvas.drawImage(video, 0, 0, 400, 240);
   }
 </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="500" height="400" src=""></video>
 <button id="snapScreen">截屏</button>
 <canvas id="myCanvas" width="500" height="400"></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, 0, 0);
  }
 </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 = 0; i < myvideos.length; i++ ) {
      myvideos[i].srcObject = mediaStream;
      myvideos[i].width = 300;
      myvideos[i].play();
    }
  });
 </script>
</body>
</html>
时间: 2024-10-18 02:32:09

HTML5中video标签与canvas绘图的使用的相关文章

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

很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></ti

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

1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. <video width="500px" height="300px" autoplay="autoplay"> <source src="D:/video/hbg.mp4" type="video/mp4"> </video> 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能

html5 中的SVG 和canvas

想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Graphics),SVG使用XML格式定义图像. canvas:<canvas> 标签定义图形,比如图表和其他图像;<canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 2.<canvas> 标记和 SVG 的另外一个重要的不同点是:(VML我还没有了解过,后续会进行

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video> 标签属性; src:视频的URL; poster:视频封

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

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标签属

HTML5中video的使用一

<!DOCTYPE html> <html> <head> <title>HTML5 </title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script src="jquery-1.9.1.min.js"></script> <script type="text

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

HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码   1.   <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video>标签属性: src

如何判断当前浏览器是否支持html5的video标签

如何判断当前浏览器是否支持html5的video标签: html5新增了video标签,用于播放视频,功能非常的强大,但是由于当前很多浏览器还不支持,所以在使用的时候需要判断当前浏览器是否支持此标签,下面就提供一段能够实现此功能的代码,希望能够给需要的朋友带来一定的帮助. 代码如下: //检测是否支持HTML5 function checkVideo() { if(!!document.createElement('video').canPlayType){ var vidTest = docu