Html 简明教程

HTML - Video Player

HTML Local Video player

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

HTML features, include native video support without the need for Flash. Below player works based HTML, CSS and Java Script. You can drag and drop your local Video files into the container.

Example

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

Let’s look at the following example, where we are going to allow the user to upload the local video file

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

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

When we run the above code, it will generate an output displaying the video controls allowing the user to upload the local video file on the webpage.

Screen Capture

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

Below recorder works based on html, CSS and java Script. Before enter into this page, user must be allow camera accessibility to cost images

Example

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

Consider the following example, where we are going to use the user camera and capture the image

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

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

On running the above code, the output window will pop up, displaying the canvas along with a capture a button on the webpage.