HTML5中video標簽與canvas繪圖的使用

本文轉載自查看原文 2017-05-07 23:19 5644 HTML5

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5中的video標簽和audio標簽 HTML5中video的使用一關於HTML5中Video標簽播放問題 HTML5 Canvas繪圖基礎 html5 video(html中播放視頻的標簽) 防止html5的video標簽在iphone中自動全屏讓IE8支持html5中的video標簽 HTML5新標簽之Canvas HTML5 canvas 在線畫筆繪圖工具（一） HTML5之Canvas繪圖——半圓與圓弧的不同畫法