15
تشکر

ساخت کنترل های سفارشی برای ویدئو در HTML5

ساخت کنترل های سفارشی برای ویدئو در HTML5

ساخت کنترل های سفارشی برای ویدئو در HTML5

در HTML5 به سادگی میتوان کنترل های سفارشی برای پخش ویدئوها ساخت. حتی این امکان را به شما میدهد که بتوانید دکمه های اضافی مانند حرکت سریع به جلو را بسازید. این کارها با استفاده از APIهای جاوا اسکریپت قابل انجام است. اگر در مورد ویدئو در HTML5 چیزی نمیدانید به مطلب “شروعی بر ویدئو در HTML5” مراجعه کنید.

در این مطلب به آموزش ساخت کنترل های سفارشی برای ویدئو در HTML5 میپردازیم.

ابتدا باید کنترل های Video را روی صفحه HTML خود قرار دهید. در پایین تگ video یک تگ دیگر به نام video-controls درست میکنیم. بعضی از ورودی های موجود در این تگ از نوع range هستند که در بعضی از مرورگرها جواب نمیدهند.

<video id="video1" width="640" height="365">
    <source src="this_is_war.mp4"></source>
    <source src="this_is_war.webm"></source>
    <source src="this_is_war.ogv"></source>
    Your Browser dosen`t support HTML5 video.
</video>
<!-- Video Controls -->
<div id="video-controls">
    <button type="button" id="play-pause">Play</button>
    <input type="range" id="seek-bar" value="0" />
    <button type="button" id="mute">Mute</button>
    <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1" />
    <button type="button" id="full-screen">Full Screen</button>
</div>

در کد بالا ما ورودی هایی برای کنترل ویدئو درست کردیم. اما هیچ کدام کار نمیکنند. خب به قسمت جاوا اسکریپت کار میرویم.

ابتدا یک فایل با نام script.js بسازید و آن را با استفاده از تگ script آن را به صفحه HTML لینک کنید.

خب اولین کدهایی که مینویسیم به صورت زیر است.

window.onload = function(){
  
  var video = document.getElementById("video");
  
  var playButton = document.getElementById("play-puase");
  var muteButton = document.getElementById("mute");
  var fullScreenButton = document.getElementById("full-screen");
  
  var seekBar= document.getElementById("seek-bar");
  var volumeBar = document.getElementById("volume-bar"); 
}

در کدهای بالا ابتدا ما همه کنترل هایی را که ایجاد کرده ایم را انتخاب میکنیم و در متغیرهای مورد نظرمان میگذاریم.

دکمه Play/Pause

در اولین قدم دکمه Play/Pause را درست میکنیم. برای اینکار از متدهای play و pause مربوط به تگ HTML5 استفاده میکنیم. در کدهای زیر ابتدا چک میکنیم که اگر ویدئو pause شده بود آن را play میکنیم در غیر اینصورت آن را pause میکنیم. همچنین با استفاده از innerHTML مقدار متن دکمه را تغییر میدهیم.

playButton.addEventListener("click", function(){
    if(video.paused == true){
      video.play();
      playButton.innerHTML = "Pause";
    }else{
      video.pause();
      playButton.innerHTML = "Play";
    }
});

دکمه Mute

دکمه Mute هم روشی مشابه دکمه Play/Pause دارد.

muteButton.addEventListener("click", function(){
    if(video.muted == true){
      video.muted = false;
      muteButton.innerHTML = "Mute";
    }else{
      video.muted = true;
      muteButton.innerHTML = "Unmuted";
    }
})

دکمه Full-Screen

این دکمه همانطور که میدانید باعث میشود ویدئو به صورت تمام صفحه نمایش داده شود. اما ابتدا ما باید چک بکنیم که مرورگر کاربر کدام است سپس درخواست تمام صفحه را به مرورگر ارسال کنیم. بنابراین ما این درخواست را به سه صورت مینویسیم. ابتدا کد مخصوص استاندارد W3 را چک میکنیم در صورتی که مرورگر پاسخ نداد کد مخصوص webkit برای مروگرهای کروم و سافاری را مینویسیم سپس اگر باز هم مرورگر پاسخ نداد کد مخصوص moz را مینویسیم که برای مرورگر فایرفاکس است.

fullScreenButton.addEventListener("click", function(){
    if(video.requestFullscreen){
      video.requestFullscreen();
    }else if(video.webkitRequestFullScreen){
      video.webkitRequestFullScreen();
    }else if(video.mozRequestFullScreen){
      video.mozRequestFullScreen();
    }
})

 

دکمه Seek Bar

این دکمه که کار نمایش و تنظیم درصد پیشرفت ویدئو را نمایش میدهد. این دکمه را ما با استفاده از range درست کردیم که متاسفانه در بعضی مرورگرها پشتیبانی نمیشود.

خب در کد زیر ما در تابع change دکمه seek هر زمان که کاربر این دکمه را تغییر داد ویدئو را بروز میکنیم.

seekBar.addEventListener("change", function(){
    var time = video.duration * (seekBar.value / 100);
    video.currentTime = time;
})

خب با استفاده از کد بالا کاربر میتواند زمان نمایش ویدئو را تغییر دهد اما زمانی که ویدئو در حال پخش است این درصد هیچ تغییری نمیکند و ثابت است. برای حل این مشکل از تابع timeupdate استفاده میکنیم که هر بار که زمان ویدئو تغییر میکند فراخوانی میشود.

video.addEventListener("timeupdate", function(){
    var value = (100 / video.duration) * video.currentTime;
    seekBar.value = value;
})

دکمه Volume

آخرین دکمه هم دکمه Volume است. که کد بسیار ساده ای دارد.

volumeBar.addEventListener("change", function(){
    video.volume = volumeBar.value;
})

خب اینکار به پایان رسید حالا نوبت خود شما است که به این کنترل ها ظاهر و استایل بدهید و مطابق میل خود آنها را درست کنید. اما ممکن است باگ هایی در کدهای بالا وجود داشته باشد که مسئولیت آنها را به دوش خودتان گذاشتیم.

  • mahdikhanzadi می‌گه:

    باز یادت رفت فایل سورس رو برا دانلود بزاری, خودت بزار دیگه همش اخطار بدیم شد اخطار برای کبرا یازده :-)


  • نظرات این مطلب بسته است.