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>

執行上述程式碼後，輸出視窗將彈出，在網頁上顯示畫布以及捕獲按鈕。

列印頁面