آموزش HTML - پخش‌کننده ویدیو

ساخت یک پخش‌کننده ویدیو سفارشی در HTML

ما می‌توانیم با استفاده از تگ <video> در HTML، چند تگ دیگر HTML برای طراحی، CSS و جاوااسکریپت، یک پخش‌کننده ویدیوی سفارشی HTML بسازیم. ویژگی‌های HTML شامل پشتیبانی بومی از ویدیو بدون نیاز به Flash است.

در این آموزش، یاد خواهیم گرفت که چگونه می‌توانیم یک پخش‌کننده ویدیو در HTML ایجاد کنیم. کدی که در این آموزش ارائه شده است بر اساس HTML، CSS و جاوااسکریپت کار می‌کند. شما می‌توانید فایل‌های ویدیویی محلی خود را بکشید و در کادر مربوطه رها کنید.

توصیه می‌کنیم این فصل را برای یادگیری در مورد جای‌گذاری پخش‌کننده ویدیو در HTML مطالعه کنید.

کد کامل برای ساخت پخش‌کننده ویدیوی سفارشی HTML

نگاهی به مثال زیر بیندازید، که در آن به کاربر اجازه می‌دهیم فایل ویدیویی محلی را بارگذاری کند:

<!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 و جاوااسکریپت کار می‌کند. قبل از ورود به این صفحه، کاربر باید دسترسی به دوربین را برای ثبت تصاویر تأیید کند.

مثال

مثال زیر را در نظر بگیرید که در آن قرار است از دوربین کاربر استفاده کرده و تصویر ثبت کنیم:

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

با اجرای کد بالا، پنجره خروجی باز می‌شود و بوم (canvas) را همراه با یک دکمه گرفتن عکس در صفحه وب نمایش می‌دهد.