آموزش و سورس ایجاد مدیاپلیر با html5 و javascript
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);

دانلود

نویسنده حسین فتحی
گروه مطلب JavaScript
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۲ دی ۱۳۹۳
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم