آموزش ساخت ویدیو پلیر html5 با ظاهر سفارشی + لیست پخش
پخش کننده های مرورگر های مختلف یکسان نیستند؛ اما شاید شما بخواهید که باشند! اینجاست که شما به یک ویدیو پلیر شخصی سازی شده احتیاج پیدا خواهید کرد که ما امروز (امشب!) به شما آموزش مدیم که چطوری میشه یک پخش کننده شخصی html5 برای سایتمون بسازیم.
قبل از شروع شما باید تسلط کافی (در حد متوسط) بر HTML, CSS و JavaScript داشته باشید.
خب کار رو با صفحه اچ تی ام الی که کدهای زیر داخلش باشه آغاز میکنیم:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Sample HTML5 Media Player</title>
<link href='media-player.css' rel='stylesheet' />
<script src='media-player.js'></script>
</head>
<body>
<div id='media-player'>
<video id='media-video' controls>
<source src='parrots.mp4' type='video/mp4'>
<source src='parrots.webm' type='video/webm'>
</video>
<div id='media-controls'></div>
</div>
</body>
</html>
خب میریم سراغ فایل جاوا اسکریپتمون؛ ما در اینجا به یک تابع به نام initialiseMediaPlayer() نیاز داریم تا بتوانیم هنگامی که سند بارگذاری شد پاسخی دریافت کنیم. برای این کار ما برای رویداد DOMContentLoaded یک شنونده اضافه می کنیم:
document.addEventListener("DOMContentLoaded", function() {
initialiseMediaPlayer();
}, false);
علاوه بر این ما یک متغییر سراسری تعریف می کنیم برای اینکه یک کنترل کننده برای پخش کنندهٔمان ذخیره کنیم:
var mediaPlayer;
تابع initialiseMediaPlayer() ما به سادگی میتواند ویدیوی ما را بگیرد و در پخش کننده ما بکار ببرد و سپس کنترل ها را مخفی کند:
function initialiseMediaPlayer() {
mediaPlayer = document.getElementById('media-video');
mediaPlayer.controls = false;
}
همانطور که میبینید، ما در حال استفاده از کنترل های بولی از API رسانه برای پنهان کردن پخش کننده اصلی مرورگر هستیم.
اضافه کردن دکمهها
مهمتر از همه، دکمه پخش است. از آنجایی که بسیاری از پخش کننده های رسانه ای از یک دکمهٔ مشترک برای پخش و نگه داشتن (play & pause) استفاده می کنند، ماهم همین کار را میکنیم(واقعا هم بهتره!). خب حرف بسه بریم عمل کنیم:
<div id='media-controls'>
<button id='play-pause-button' class='play' title='play'
onclick='togglePlayPause();'>Play</button>
</div>
این کد یک دکمهٔ play / pause با ویژگی های مناسب تعریف می کند. هنگامی که روی آن کلیک می شود، یک تابع جاوا اسکریپت به نام togglePlayPause () فراخوانده می شود. کلاس سی اس اس دکمه پخش هم یک ظاهر و تصویر یا آیکون مناسب برای آن تعریف میکند.
طبیعتاً این کد تا درخواست خود را برای تابع togglePlayPause () نفرستد؛ نمی تواند کاری از پیش ببرد. پس برای کامل شدن این پخش کننده کد زیر را هم اضافه کنید:
function togglePlayPause() {
var btn = document.getElementById('play-pause-button');
if (mediaPlayer.paused || mediaPlayer.ended) {
btn.title = 'pause';
btn.innerHTML = 'pause';
btn.className = 'pause';
mediaPlayer.play();
}
else {
btn.title = 'play';
btn.innerHTML = 'play';
btn.className = 'play';
mediaPlayer.pause();
}
}
نخست، ما با استفاده از getElementById آی دیِ play-pause-button را گرفتیم؛ سپس برسی کردیم که آیا پخشکننده نگه داشته شده (pause) یا به پایان رسیده، اگر چنین است ما به دکمه ای برای روع پخش تحت عنوان مکث داریم(یعنی پخشکننده در حالت ایستاده است، به عبارت دیگر وضعیت پخشکننده در دکمه نشان داده شده).
اگر پخشکننده متوقف شده و یا به پایان رسیده است، ما می توانیم فرض کنیم که رسانه در حال پخش است، بنابراین ما به نگه داشتن آن نیاز داریم، س این دکمه را به عنوان دکمهٔ پخش تأیین می کنیم. در این زمان، ما با متود pause() ارتباط برقرار میکنیم تا رسانه خود را نگه داریم (متوقف کنیم). در ضمن ما باید یک عنوان نیز برای دکمهٔمان تأیین کنیم(به کدها دقت کنید) :
function changeButtonType(btn, value) {
btn.title = value;
btn.innerHTML = value;
btn.className = value;
}
یکی دیگر از ویژگی های مفید دکمهٔ پایان (stop) است:
<button id='stop-button' class='stop' title='stop' onclick='stopPlayer();'>Stop</button>
این API روش خاصی برای پایان استفاده نمی کند. چرا که هیچ تفاوت واقعی بین نگه داشت و پایان یک ویدیو یا موسیقی وجود ندارد. در عوض ما با تابع stopPlayer() بعد از نگه داشتن رسانه زمان آن را به صفر میبریم.
function stopPlayer() {
mediaPlayer.pause();
mediaPlayer.currentTime = 0;
}
اکنون نوبت دکمه های جداگانه افزایش و کاهش صداست:
<button id='volume-inc-button' class='volume-plus' title='increase volume'
onclick='changeVolume("+");'>Increase volume</button>
<button id='volume-dec-button' class='volume-minus' title='decrease volume'
onclick='changeVolume("-");'>Decrease volume</button>
</div>
الان هم نوبت کد های جاوا اسکریپت آن است:
function changeVolume(direction) {
if (direction === '+') mediaPlayer.volume += mediaPlayer.volume == 1 ? 0 : 0.1;
else mediaPlayer.volume -= (mediaPlayer.volume == 0 ? 0 : 0.1);
mediaPlayer.volume = parseFloat(mediaPlayer.volume).toFixed(1);
}
تصویر پخش کنندهٔما تا اینجا
بعد از اینها بهتر است دکمه سکوت هم داشته باشیم:
<button id='mute-button' class='mute' title='mute'
onclick='toggleMute();'>Mute</button>
و همچنین کدهای javascript مربوط به آن:
function toggleMute() {
var btn = document.getElementById('mute-button');
if (mediaPlayer.muted) {
changeButtonType(btn, 'mute');
mediaPlayer.muted = false;
}
else {
changeButtonType(btn, 'unmute');
mediaPlayer.muted = true;
}
}
و دکمه پخش مجدد:
<button id='replay-button' class='replay' title='replay' onclick='replayMedia();'>Replay</button>
و مانند قبل کد جاوااسکریپت:
function replayMedia() {
resetPlayer();
mediaPlayer.play();
}
وقتی روی دکمه پخش مجدد کلیک میکنیم، دکمه پخش و مکث باید روی حالت پخش قرار بگیرد که با اضافه کردن کد زیر آن مشکل هم حل می شود.
function resetPlayer() {
mediaPlayer.currentTime = 0;
changeButtonType(playPauseBtn, 'play');
}
افزودن نوار پشرفت
پخشکننده (پلیر) ما تا اینجا + نوار پیشرفت
پخشکننده ها معمولا برای رسانهٔشان یک نوار پیشرفت که نشان می دهد که چه مقدار از ویدیو پخش شده است فراهم می کنند. برای این کار، ما قصد داریم از عنصر پیشرفت HTML5، که در آخرین نسخه از تمام مرورگرها (از جمله IE10 و سافاری 6) پشتیبانی می شود استفاده کنیم. این یک گزینهٔ مناسب برای نمایش این اطلاعات است.
<progress id='progress-bar' min='0' max='100' value='0'>0% played</progress>
برای پیگیری این ویدئو و به روز رسانی نوار پیشرفت، ما گوش دادن را برای رویداد timeupdate قرار می دهیم، که مطرح شده برای رسانه های در حال پخش است. هر بار که این رویداد مطرح شده است، ما می توانیم نوار پیشرفت خود را به روز رسانی کنیم. بنابراین در داخل تابع initialiseMediaPlayer() ما نیاز به صبر و عمل در این رویداد داریم!:
mediaPlayer.addEventListener('timeupdate', updateProgressBar, false);
حالا وقتی که رویداد timeupdate مطرح شده است،تابع updateProgressBar() فراخوانی خواهد شد، که به صورت زیر تعریف می کنیم:
function updateProgressBar() {
var progressBar = document.getElementById('progress-bar');
var percentage = Math.floor((100 / mediaPlayer.duration) *
mediaPlayer.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + '% played';
}
تابع resetPlayer() را یادتان هست؟ باید به صورت زیر تغییر کند زیرا هماکنون نوارپیشرفت نیز باید بازنشانی (ریست) شود:
function resetPlayer() {
progressBar.value = 0;
mediaPlayer.currentTime = 0;
changeButtonType(playPauseBtn, 'play');
}
تبریک میگم! الان نوارپیشرفت و رسانهمون درست کار میکنند.
اگر چه کنترل پیش فرض مرورگر غیرفعال شد، اما هنوز هم ممکن است برای یک کاربر دسترسی به حالات پیش فرض ممکن باشد؛ مثلا در فایرفاکس، با راست کلیک کردن بر روی پخشکنندهٔ رسانه ای یکسری گزینه ها نمایان می شود که پیش فرض مرورگر فایرفاکس میباشد.
پِیگیری!
برای دکمه های پخش و مکث، باید کمی پِیگیر باشیم تا نوع دکمه ها را در زمان مناسب تغییر دهیم:
mediaPlayer.addEventListener('play', function() {
var btn = document.getElementById('play-pause-button');
changeButtonType(btn, 'pause');
}, false);
mediaPlayer.addEventListener('pause', function() {
var btn = document.getElementById('play-pause-button');
changeButtonType(btn, play);
}, false);
و نیز دکمه های مربوط به صدا:
mediaPlayer.addEventListener('volumechange', function(e) {
var btn = document.getElementById('mute-button');
if (mediaPlayer.muted) changeButtonType(btn, 'unmute');
else changeButtonType(btn, 'mute');
}, false);
استایل دهی و پایان!
استایل پخشکننده:
body { font-family:'verdana'; } h1 { font-size:16px; color:#333; } #media-player { float:left; padding:1em 1em .5em; background-color:#333; } video { border:1px solid #2e52a4; width:305px; height:160px; background:#000; } button { text-indent:-9999px; width:16px; height:16px; border:none; cursor:pointer; background:transparent url('buttons.png') no-repeat 0 0; } .pause { background-position:-19px 0; } .stop { background-position:-38px 0; } .volume-plus { background-position:-57px 0; } .volume-minus { background-position:-76px 0; } .mute { background-position:-95px 0; } .unmute { background-position:-114px 0; } .replay { background-position:-133px 0; } progress { color:#fff; font-size:12px; width:172px; height:16px; border:none; margin-right:5px; background:#434343; } progress::-moz-progress-bar { background:#2e52a4; } #media-play-list { float:left; clear:both; color:#aaa; width:100%; margin-top:10px; border-top:1px solid #2e52a4; } #media-play-list h2 { font-size:12px; } #play-list { padding:0; font-size:12px; list-style-type:none; } #play-list li { cursor:pointer; padding-left:15px; background:transparent url('item.png') no-repeat 0 4px; }
دریافت پروندهٔ آمده + لیست پخش
حجم: 4.91 کیلوبایت
رمز: inline.blog.ir