Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Свежий софт


Wrecker Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Wrecker Virtual DJ
Virtual DJ
Wrecker SoundForge 11
SoundForge 11
Wrecker Alcohol 120
Alcohol 120
Wrecker Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Рекомендуем



Главная » 2013 » Март » 20 » HTML5 видео плеер JQuery плагин

13:10
HTML5 видео плеер JQuery плагин

HTML5 видео плеер JQuery плагин

Как вы знаете - HTML5 <video> элемент уже поддерживается большинством .  В ходе исследования  я понял несколько вещей: что каждый браузер поддерживает только несколько форматов видео, и каждый браузер имеет свои собственные элементы управления видео (и все они разные). Но, к счастью, HTML5 может дать нам все необходимые возможности, чтобы сделать собственный интерфейс для управления нашим видео. Сегодня я покажу вам процесс создания собственного проигрывателя  html5 , более того, это будет новый плагин JQuery.

  

ДЕМО               СКАЧАТЬ ИСХОДНИК

 

Шаг 1. HTML Markup

Создадим разметку нашей страницы.

index.html

<div class="video_player">

    <video controls="controls" poster="media/poster.jpg" style="width:800px;">

        <source src="media/video.ogg" type="video/ogg" />

        <source src="media/video.mp4" type="video/mp4" />

        <source src="media/video.webm" type="video/webm" />

    </ Видео>

    <div class="custom_controls">

        <a class="play" title="Play"> </ a>

        <a class="pause" title="Pause"> </ a>

        <div class="time_slider"> </ div>

        <div class="timer"> 00:00 </ div>

        <div class="volume">

            <div class="volume_slider"> </ div>

            <a class="mute" title="Mute"> </ a>

            <a class="unmute" title="Unmute"> </ a>

        </ Div>

    </ Div>

</ Div>

<script>

    $ (Функция () {

        $ ('Video_player.) MyPlayer ().

    });

</ Script>

 

Здесь можно увидеть и наш видео элемент, и пользовательские элементы управления. Плюс - JQuery инициализации плагина. Как вы можете видеть - я должен предоставить 3 формата видео (OGG, MP4 и WebM) для воспроизведения во всех браузерах (FF, IE, Chrome, Safari). 

Шаг 2. CSS

Здесь все стили

CSS / player.css

/* jquery */

.ui-slider-handle {

    display: block;

    margin-left: -9px;

    position: absolute;

    z-index: 2;

}

.ui-slider-range {

    bottom: 0;

    display: block;

    height: 100%;

    left: 0;

    position: absolute;

    width: 100%;

    z-index: 1;

}

 

/* player */

.video_player {

    background-color: #E8E8E8;

    border: 1px solid #888;

    float: left;

    padding: 10px;

 

    border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

}

 

/* controls */

.video_player .custom_controls {

    clear: both;

    height: 30px;

    padding-top: 8px;

    position: relative;

    width: 100%;

}

.play, .pause, .volume, .time_slider, .timer {

    float: left;

}

.play, .pause, .mute, .unmute {

    cursor: pointer;

}

.play, .pause {

    display: block;

    height: 24px;

    margin-left: 5px;

    margin-right: 15px;

    opacity: 0.8;

    width: 33px;

 

    transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -webkit-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

}

.play {

    background: url(../images/play.png) no-repeat;

}

.pause {

    background: url(../images/pause.png) no-repeat;

    display: none;

}

.play:hover, .pause:hover {

    opacity: 1;

}

.time_slider {

    border: 1px solid #5f5f5f;

    height: 10px;

    margin-top: 5px;

    position: relative;

    width: 630px;

 

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

 

    background: #777777;

    background-image: -moz-linear-gradient(top, #777777, #9d9d9d);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #9d9d9d));

}

.time_slider .ui-slider-handle {

    background: url(../images/handler.png) no-repeat;

    cursor: pointer;

    height: 16px;

    opacity: 0.8;

    top: -2px;

    width: 16px;

}

.time_slider .ui-slider-handle.ui-state-hover {

    opacity: 1;

}

.time_slider .ui-slider-range {

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

 

    background: #e9742e;

    background-image: -moz-linear-gradient(top, #e9742e, #c14901);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9742e),color-stop(1, #c14901));

}

.timer {

    color: #000;

    font-size: 12px;

    margin-left: 10px;

    margin-top: 3px;

}

.volume {

    bottom: 0;

    color: #FFFFFF;

    height: 35px;

    overflow: hidden;

    padding: 5px 10px 0;

    position: absolute;

    right: 0;

    width: 33px;

}

.volume:hover {

    background: url(../images/volume.png) no-repeat scroll 8px 0 transparent;

    height: 161px;

}

.volume_slider {

    height: 105px;

    left: -1px;

    opacity: 0;

    position: relative;

    width: 33px;

}

.volume:hover .volume_slider {

    opacity: 1;

}

.volume_slider .ui-slider-handle {

    background: url(../images/handler.png) no-repeat;

    height: 15px;

    left: 9px;

    margin-bottom: -15px;

    margin-left: 0;

    opacity: 0.8;

    width: 14px;

}

.volume_slider .ui-slider-handle.ui-state-hover {

    opacity: 1;

}

.mute, .unmute {

    bottom: 7px;

    display: block;

    height: 23px;

    opacity: 0.8;

    position: absolute;

    text-indent: -999px;

    width: 33px;

}

.mute:hover, .unmute:hover {

    opacity: 1;

}

.mute {

    background: url(../images/vol_full.png) no-repeat;

}

.unmute {

    background: url(../images/vol_mute.png) no-repeat;

    display: none;

}

 

Шаг 3. JS

JS / script.js

function rectime(secs) {

    var hr = Math.floor(secs / 3600);

    var min = Math.floor((secs - (hr * 3600))/60);

    var sec = Math.floor(secs - (hr * 3600) - (min * 60));

 

    if (hr < 10) {hr = '0' + hr; }

    if (min < 10) {min = '0' + min;}

    if (sec < 10) {sec = '0' + sec;}

    if (hr) {hr = '00';}

    return hr + ':' + min + ':' + sec;

}

 

(function($) {

    $.fn.myPlayer = function() {

        return this.each(function() {

            // variables

            var $oMain = $(this);

            var $oVideo = $('video', $oMain);

            var $oPlay = $('.play', $oMain);

            var $oPause = $('.pause', $oMain);

            var $oTimeSlider = $('.time_slider', $oMain);

            var $oTimer = $('.timer', $oMain);

            var $oVolSlider = $('.volume_slider', $oMain);

            var $oMute = $('.mute', $oMain);

            var $oUnmute = $('.unmute', $oMain);

            var bTimeSlide = false;

            var iVolume = 1;

 

            // functions section

            var prepareTimeSlider = function() {

                if (! $oVideo[0].readyState) {

                    setTimeout(prepareTimeSlider, 1000);

                } else {

                    $oTimeSlider.slider({

                        value: 0,

                        step: 0.01,

                        orientation: 'horizontal',

                        range: 'min',

                        max: $oVideo[0].duration,

                        animate: true,

                        slide: function() {

                            bTimeSlide = true;

                        },

                        stop:function(e, ui) {

                            bTimeSlide = false;

                            $oVideo[0].currentTime = ui.value;

                        }

                    });

                };

            };

 

            // events section

            $oPlay.click(function () {

                $oVideo[0].play();

                $oPlay.hide();

                $oPause.css('display', 'block');

            });

            $oPause.click(function () {

                $oVideo[0].pause();

                $oPause.hide();

                $oPlay.css('display', 'block');

            });

            $oMute.click(function () {

                $oVideo[0].muted = true;

                $oVolSlider.slider('value', '0');

                $oMute.hide();

                $oUnmute.css('display', 'block');

            });

            $oUnmute.click(function () {

                $oVideo[0].muted = false;

                $oVolSlider.slider('value', iVolume);

                $oUnmute.hide();

                $oMute.css('display', 'block');

            });

 

            // bind extra inner events

            $oVideo.bind('ended', function() {

                $oVideo[0].pause();

                $oPause.hide();

                $oPlay.css('display', 'block');

            });

            $oVideo.bind('timeupdate', function() {

                var iNow = $oVideo[0].currentTime;

                $oTimer.text(rectime(iNow));

                if (! bTimeSlide)

                    $oTimeSlider.slider('value', iNow);

            });

 

            // rest initialization

            $oVolSlider.slider({

                value: 1,

                orientation: 'vertical',

                range: 'min',

                max: 1,

                step: 0.02,

                animate: true,

                slide: function(e, ui) {

                    $oVideo[0].muted = false;

                    iVolume = ui.value;

                    $oVideo[0].volume = ui.value;

                }

            });

            prepareTimeSlider();

            $oVideo.removeAttr('controls');

        });

    };

})(jQuery);

 

Как вы видите - это простой плагин jQuery. В начале - Я подготовил все необходимые элементы управления и переменные. Потом - я определил события "OnClick". После, я реализовал два jQueryUI ползунка (ползунок времени и регулятор громкости). В конце - я установил  управления по умолчанию: $ oVideo.removeAttr («контроль»); В общем - вот и все.

Шаг 4. Изображения

Для нашего проигрывателя HTML5 видео я использовал следующее изображение, они находятся в исходнике:

ДЕМО           СКАЧАТЬ ИСХОДНИК

Источник урока

Категория: CSS//HTML//JS | Просмотров: 1315 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация

    • Читаемое

    Категории

    Заходи не жди

    Web Template created with Artisteer.