danial.saeedi
یک شنبه 22 دی 1392, 13:42 عصر
http://bein.ir/wp-content/uploads/2014/01/custom-video-controls1-500x288.png
شاید یکی از تگ هایی که بیشتر از همه به چشم می خورد تگ video است.به وسیله این تگ می توان ویدیویی را نمایش داد.که جای پلاگین هایی نظیر flash و silverlight را می گیرد...
برای استفاده از این تگ باید به این صورت عمل کنیم:(در داخل src ادرس فیلم را می نویسیم.)
<video src="http://cdn.theguardian.tv/connectedTV/1280/2013/9/19/130919StevenHawking-720.mp4"></video>
خب حالا مشاهده می کنیم که دکمه برای پخش و صدا نیست،خب خیلی راحته باید controls را به ان اضافه کرد!!!
<video src="http://cdn.theguardian.tv/connectedTV/1280/2013/9/19/130919StevenHawking-720.mp4" controls></video>
http://bein.ir/wp-content/uploads/2014/01/video_html5.png
مشاهده می کنید که چقدر زشته:دی،می خواهیم ان را تغییر دهیم.
الان باید شما تگ های لازم برای تغییر شکل ویدیو ایجاد فرمایید:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
<a href="videos/mikethefrog.mp4">Download</a> the video instead.
</p>
</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>
</div>
استایل دهی به تگ video
http://blog.teamtreehouse.com/wp-content/uploads/2013/02/custom-video-controls2.png
همون طور که توضیح دادم برای تعیریف ویدیو در صفحه از تگ video استفاده می کنیم.و یک چیز که یادم رفته بود،این بود که اگر داخل تگ video متنی بنویسیم،در صورتی که مرورگر ان را پشتیبانی نکند ان متن به کاربر نمایش داده خواهد شد.و در div بعدی،دکمه های پخش کم کردن صدا وجود دارد و من یک style پیدا کردم که می تونه کمکتون کنه.
دمو و style (https://s3.amazonaws.com/west-treehouse/treehouse-custom-video-controls.zip)
یک پرونده در ویرایشگر خود به نام script.js بسازید و ان رابه وسیله تگ script فراخوانی فرمایید:(این کد زیر رو در تگ head صفحه تون قرار دهید.)
حالا کد زیر را در پرونده ای که ایجاد کرده اید کپی فرمایید:
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
}
در خط اول،شرط تعیین کرده ایم که هر وقت صفحه به لود شد اینارو اجرا کن،سپس در خط سوم یک متغییر تعریف کرده و به وسیله getElementById ،ای دی video را انتخاب می کنیم.و در خط های 6 تا 9 دکمه های مربوط به ویدیو را تعیین می کنیم.و در نهایت،نوار پخش را انتخاب می کنیم.
دکمه های play و pause
حالا می رسیم به ساخت دکمه های پخش و pause(فارسیشو یادم رفته توی نظرات بگید).برای این منظوراز تابع های نظیر ()play و ()pause ،کار را برای ما اسان کرده است.
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
در دوم زمانی اجرا می شود که روی دکمه کلیک شده باشد.و در خط دوم if زمانی اجرا می شود که ویدیو pause باشد.و در else زمانی اجرا می شود که فیلم در حال پخشه.
دکمه قطع صدا
برای قطع صدا باید از تابع mute استفاده کرد.
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
در خط دوم زمانی اجرا می شود که روی دکمه قطع صدا کلیک شود.و در خط دوم زمانی اجرا می شود که صدا برقرار باشد.و در نهایت else هم زمانی اجرا می که صدا بر قرار نباشد.به وسیله تابع muted می توان به راحتی صدا را قطع کرد.....
دکمه پخش در تمام صفحه(در وردپرس:حالت بدون مزاحم)
برای استفاده از امکان حالت بدون مزاحم باید از تابع requestFullScreen() استفاده کرد که روی همه ی مرورگر ها کار می کند به غیر از فایرفاکس و گوگل کروم(برای پشتیبانی شده در گوگل کروم از requestFullScreen() استفاد می کنیم و برای موزیلا از mozRequestFullScreen.)
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
ساخت seek bar
عالی حالا ما یک پخش کننده و قطع صدا را ساختیم،تموم نشده پستو ترک نکنید مونده.الان می رسیم به seek bar.seek bar نوار پخش است.
<pre>// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});</pre>
در خط دوم،زمانی اجرا می شود که seek bar تغییر کند.و در خط چهارم یک متغییر به نام time تعریف و در داخل متغییر،video.duration نوشته ایم که به معنی مدت زمان فیلمه.و در نهایت خط ششم فیلم را به مدت زمان خواسته شده می برد.حال اجرا کنید متوجه می شوید که یک باگ دارد.
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
تغییر volume صدا
برای تغییر تغییر صدا از volume استفاده می کنیم.و از 0 تا 1 بیشتر ندارد.0 به معنی صدا پخش نشود.1 یعنی صدا پخش شود.
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
دوستان روی این اموزش خیلی زحمت کشیدم لطفا اگه کپی می کنید لینک bein.ir را نیز وارد فرمایید با تشکر فراوان!
شاید یکی از تگ هایی که بیشتر از همه به چشم می خورد تگ video است.به وسیله این تگ می توان ویدیویی را نمایش داد.که جای پلاگین هایی نظیر flash و silverlight را می گیرد...
برای استفاده از این تگ باید به این صورت عمل کنیم:(در داخل src ادرس فیلم را می نویسیم.)
<video src="http://cdn.theguardian.tv/connectedTV/1280/2013/9/19/130919StevenHawking-720.mp4"></video>
خب حالا مشاهده می کنیم که دکمه برای پخش و صدا نیست،خب خیلی راحته باید controls را به ان اضافه کرد!!!
<video src="http://cdn.theguardian.tv/connectedTV/1280/2013/9/19/130919StevenHawking-720.mp4" controls></video>
http://bein.ir/wp-content/uploads/2014/01/video_html5.png
مشاهده می کنید که چقدر زشته:دی،می خواهیم ان را تغییر دهیم.
الان باید شما تگ های لازم برای تغییر شکل ویدیو ایجاد فرمایید:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="videos/mikethefrog.webm" type="video/webm">
<source src="videos/mikethefrog.ogv" type="video/ogv">
<source src="videos/mikethefrog.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
<a href="videos/mikethefrog.mp4">Download</a> the video instead.
</p>
</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>
</div>
استایل دهی به تگ video
http://blog.teamtreehouse.com/wp-content/uploads/2013/02/custom-video-controls2.png
همون طور که توضیح دادم برای تعیریف ویدیو در صفحه از تگ video استفاده می کنیم.و یک چیز که یادم رفته بود،این بود که اگر داخل تگ video متنی بنویسیم،در صورتی که مرورگر ان را پشتیبانی نکند ان متن به کاربر نمایش داده خواهد شد.و در div بعدی،دکمه های پخش کم کردن صدا وجود دارد و من یک style پیدا کردم که می تونه کمکتون کنه.
دمو و style (https://s3.amazonaws.com/west-treehouse/treehouse-custom-video-controls.zip)
یک پرونده در ویرایشگر خود به نام script.js بسازید و ان رابه وسیله تگ script فراخوانی فرمایید:(این کد زیر رو در تگ head صفحه تون قرار دهید.)
حالا کد زیر را در پرونده ای که ایجاد کرده اید کپی فرمایید:
window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
}
در خط اول،شرط تعیین کرده ایم که هر وقت صفحه به لود شد اینارو اجرا کن،سپس در خط سوم یک متغییر تعریف کرده و به وسیله getElementById ،ای دی video را انتخاب می کنیم.و در خط های 6 تا 9 دکمه های مربوط به ویدیو را تعیین می کنیم.و در نهایت،نوار پخش را انتخاب می کنیم.
دکمه های play و pause
حالا می رسیم به ساخت دکمه های پخش و pause(فارسیشو یادم رفته توی نظرات بگید).برای این منظوراز تابع های نظیر ()play و ()pause ،کار را برای ما اسان کرده است.
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
در دوم زمانی اجرا می شود که روی دکمه کلیک شده باشد.و در خط دوم if زمانی اجرا می شود که ویدیو pause باشد.و در else زمانی اجرا می شود که فیلم در حال پخشه.
دکمه قطع صدا
برای قطع صدا باید از تابع mute استفاده کرد.
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
در خط دوم زمانی اجرا می شود که روی دکمه قطع صدا کلیک شود.و در خط دوم زمانی اجرا می شود که صدا برقرار باشد.و در نهایت else هم زمانی اجرا می که صدا بر قرار نباشد.به وسیله تابع muted می توان به راحتی صدا را قطع کرد.....
دکمه پخش در تمام صفحه(در وردپرس:حالت بدون مزاحم)
برای استفاده از امکان حالت بدون مزاحم باید از تابع requestFullScreen() استفاده کرد که روی همه ی مرورگر ها کار می کند به غیر از فایرفاکس و گوگل کروم(برای پشتیبانی شده در گوگل کروم از requestFullScreen() استفاد می کنیم و برای موزیلا از mozRequestFullScreen.)
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}
});
ساخت seek bar
عالی حالا ما یک پخش کننده و قطع صدا را ساختیم،تموم نشده پستو ترک نکنید مونده.الان می رسیم به seek bar.seek bar نوار پخش است.
<pre>// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});</pre>
در خط دوم،زمانی اجرا می شود که seek bar تغییر کند.و در خط چهارم یک متغییر به نام time تعریف و در داخل متغییر،video.duration نوشته ایم که به معنی مدت زمان فیلمه.و در نهایت خط ششم فیلم را به مدت زمان خواسته شده می برد.حال اجرا کنید متوجه می شوید که یک باگ دارد.
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
تغییر volume صدا
برای تغییر تغییر صدا از volume استفاده می کنیم.و از 0 تا 1 بیشتر ندارد.0 به معنی صدا پخش نشود.1 یعنی صدا پخش شود.
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
دوستان روی این اموزش خیلی زحمت کشیدم لطفا اگه کپی می کنید لینک bein.ir را نیز وارد فرمایید با تشکر فراوان!