HTML - 视频播放器

HTML 本地视频播放器

HTML 功能，包括原生视频支持，无需 Flash。以下播放器基于 HTML、CSS 和 Java Script 工作。您可以将本地视频文件拖放到容器中。

示例

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

<!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>

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

屏幕截图

以下录制器基于 html、CSS 和 java Script 工作。在进入此页面之前，用户必须允许摄像头访问以获取图像

示例

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

<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>

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

打印页面