0
0
0
آموزش و سورس ایجاد مدیاپلیر با html5 و javascript
آموزش و سورس ایجاد مدیاپلیر با html5 و javascript
در این پست نحوه ایجاد مدیاپلیر با استفاده html5 و javascript که به صورت کد نویسی یک پخش کننده فیلم ایجاد می کنیم که قابلیت پخش و جلو و عقب بردن فیلم را داشته باشد.
ابتدا با استفاده از تگ Video یک فیلم را پخش می کنیم
<video controls="controls" loop poster="picture.png">
<source src="video.mp4" type="video/mp4" />
</video>
دستور Controls باعث اضافه کردن کنترل کننده های فیلم در هنگام پخش فیلم می شود
دستور loop باعث تکرار فیلم بعد از اتمام آن می شود
با استفاده از دستور poster می توانید یه عکس را قبل از نمایش فیلم نمایش دهید
و همچنین با استفاده از دستور src می توانید مسیر فایل ویدئوی را مشخص کنید.
حال خودمان با استفاده از دستورات جاوا اسکریپت یک پخش کنند فیلم می سازیم.
کد های قسمت html به صورت زیر می باشد
<!DOCTYPE html>
<html lang="fa_IR">
<head>
<title>www.iranganj.ir</title>
<link href="video.css" rel="stylesheet" />
<script src="video.js"></script>
</head>
<body>
<div>
<video controls="controls" loop poster="picture.png">
<source src="video.mp4" type="video/mp4" />
</video>
</div>
<section id="skin">
<video id="myMovie" width="640" height="360" poster="picture.png">
<source src="video.mp4">
</video>
<nav>
<div id="button">
<button type="button" id="playButton">Play</button>
</div>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</section>
</body>
</html>
کدهای بخش CSS به صورت زیر می باشد
body {
text-align: center;
background-color: #dddddd;
}
header, footer, section, aside, nav, article, hgroup {
display: block;
}
#skin {
width: 700px;
margin: 10px auto;
padding: 5px;
background: aquamarine;
border: 4px solid black;
border-radius: 10px;
}
nav {
margin: 5px;
}
#button {
float: left;
width: 70px;
height: 22px;
}
#defaultBar {
position: relative;
float: left;
width: 600px;
height: 16px;
padding: 4px;
border: 2px solid black;
background: blueviolet;
}
#progressBar {
position: absolute;
width: 0px;
height: 16px;
background: blue;
}
کدهای بخش javascript
function doFirst() {
barSize = 600;
myMovie = document.getElementById('myMovie');
playButton = document.getElementById('playButton');
bar = document.getElementById('defaultBar');
progressBar = document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
bar.addEventListener('click', clickBar, false);
}
function playOrPause() {
if (!myMovie.paused && !myMovie.ended) {
myMovie.pause();
playButton.innerHTML = 'play';
window.clearInterval(updateBar);
}
else {
myMovie.play();
playButton.innerHTML = 'pause';
updateBar = setInterval(update, 300);
}
}
function update() {
if (!myMovie.ended) {
var size = parseInt(myMovie.currentTime * barSize / myMovie.duration);
progressBar.style.width = size + 'px';
}
else {
progressBar.style.width = '0px';
playButton.innerHTML = 'play';
window.clearInterval(updateBar);
}
}
function clickBar(e) {
if (!myMovie.paused && !myMovie.ended) {
var mouseX = e.pageX - bar.offsetLeft;
var newtime = mouseX * myMovie.duration / barSize;
myMovie.currentTime = newtime;
progressBar.style.width = mouseX + 'px';
}
}
window.addEventListener('load', doFirst, false);
این مطلب را به اشتراک بگذارید...
نظر / سوال