Html 简明教程

HTML - Video Player

HTML Local Video player

HTML 功能包括无需 Flash 的原生视频支持。以下播放器基于 HTML、CSS 和 JavaScript。你可以在容器中拖放本地视频文件。

Example

我们来看以下示例，我们将允许用户上传本地视频文件

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: #E8DAEF;
         text-align: center;
      }
   </style>
</head>
<body>
   <input type="file" accept="video/*">
   <br>
   <video controls height="300" width="500"></video>
   <script>
      (function localFileVideoPlayer() {
         'WELCOME'
         var x = function(event) {
            var vid = this.files[0]
            var a = window.a || window.webkitURL
            var y = a.createObjectURL(vid)
            var videoNode = document.querySelector('video')
            videoNode.src = y
         }
         var z = document.querySelector('input')
         z.addEventListener('change', x, false)
      })()
   </script>
</body>
</html>

当我们运行以上代码时，它将生成一个输出，显示视频控件，允许用户在网页上上传本地视频文件。

Screen Capture

以下录音机基于 html、CSS 和 java 脚本工作。在进入此页面之前，用户必须允许相机可访问性以获取图像成本

Example

考虑以下示例，我们将使用用户相机并捕获图像

<html>
<head>
   <style>
      body {
         text-align: center;
         background-color: #EAFAF1;
      }
   </style>
</head>
<body>
   <video id="vid" controls autoplay></video>
   <canvas id="mytutorial" width="600" height="300" style="border:1px solid #d3d3d3;"></canvas>
   <button id="snapshot">Take Picture</button>
   <script>
      const x = document.getElementById('vid');
      const mycanvas = document.getElementById('mytutorial');
      const y = mycanvas.getContext('2d');
      const clickpicture = document.getElementById('snapshot');
      const a = {
         video: true,
      };
      clickpicture.addEventListener('click', () => {
         y.drawImage(x, 1, 0, mycanvas.width, mycanvas.height);
      });
      navigator.mediaDevices.getUserMedia(a).then((stream) => {
         x.srcObject = stream;
      });
   </script>
</body>
</html>

运行以上代码时，输出窗口将弹出，在网页上显示画布以及一个捕获按钮。