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

  1. Live Demo
  2. скачать в упаковке
  3. Шаг 1. HTML-разметка
  4. index.html
  5. Шаг 2. CSS
  6. CSS / player.css
  7. Шаг 4. Изображения
  8. Live Demo

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

Конечный результат нашего игрока:

Вот наш демонстрационный и загружаемый пакет:

Live Demo

[Sociallocker]

скачать в упаковке

[/ Sociallocker]

Хорошо, загрузите исходные файлы и давайте начнем кодировать!

Шаг 1. HTML-разметка

Это разметка нашей страницы слайд-шоу результатов. Вот:

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 "/> </ video> <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> $ (function () {$ ('. video_player'). myPlayer ();}); </ Скрипт>

Здесь вы можете увидеть и наш элемент Video, и набор пользовательских элементов управления. Плюс - инициализация плагина jquery. Как видите, я должен предоставить 3 формата файлов (ogg, mp4 и webm) для всех браузеров (FF, IE, Chrome, Safari и, возможно, Opera). В качестве программного обеспечения для конвертации видео я могу порекомендовать Miro Video Converter (http://www.mirovideoconverter.com/) в качестве примера.

Шаг 2. CSS

Вот все таблицы стилей

CSS / player.css

/ * jquery * / .ui-slider-handle {display: block; поле слева: -9px; положение: абсолютное; z-индекс: 2; } .ui-slider-range {bottom: 0; дисплей: блок; высота: 100%; слева: 0; положение: абсолютное; ширина: 100%; z-индекс: 1; } / * player * / .video_player {background-color: # E8E8E8; граница: 1px solid # 888; плыть налево; отступы: 10 пикселей; радиус границы: 10 пикселей; -moz-border-radius: 10px; -webkit-border-radius: 10 пикселей; } / * controls * / .video_player .custom_controls {clear: both; высота: 30 пикселей; padding-top: 8px; положение: относительное; ширина: 100%; } .play, .pause, .volume, .time_slider, .timer {float: left; } .play, .pause, .mute, .unmute {курсор: указатель; } .play, .pause {display: block; высота: 24px; поле слева: 5 пикселей; Поля справа: 15 пикселей; непрозрачность: 0,8; ширина: 33 пикселя; переход: все 0.2s easy-in-out; -моз-переход: все 0.2s easy-in-out; -webkit-transition: все 0.2s easy-in-out; -переход: все 0.2s easy-in-out; } .play {background: url (../ images / play.png) no-repeat; } .pause {background: url (../ images / pause.png) no-repeat; дисплей: нет; } .play: hover, .pause: hover {opacity: 1; } .time_slider {border: 1px solid # 5f5f5f; высота: 10 пикселей; маржинальная вершина: 5px; положение: относительное; ширина: 630 пикселей; радиус границы: 5 пикселей; -moz-border-radius: 5px; -webkit-border-radius: 5px; фон: # 777777; background-image: -moz-linear-Gradient (вверху, # 777777, # 9d9d9d); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0, # 777777), остановка цвета (1, # 9d9d9d)); } .time_slider .ui-slider-handle {background: url (../ images / handler.png) no-repeat; курсор: указатель; высота: 16 пикселей; непрозрачность: 0,8; верх: -2px; ширина: 16 пикселей; } .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; фон: # e9742e; background-image: -moz-linear-Gradient (вверху, # e9742e, # c14901); background-image: -webkit-градиент (линейный, слева вверху, слева внизу, остановка цвета (0, # e9742e), остановка цвета (1, # c14901)); } .timer {color: # 000; размер шрифта: 12 пикселей; поле слева: 10 пикселей; маржинальная вершина: 3 пикселя; } .volume {bottom: 0; цвет: #FFFFFF; высота: 35 пикселей; переполнение: скрытое; отступы: 5px 10px 0; положение: абсолютное; справа: 0; ширина: 33 пикселя; } .volume: hover {background: url (../ images / volume.png) прокрутка без повтора 8px 0 прозрачный; высота: 161 пикселей; } .volume_slider {height: 105px; слева: -1px; непрозрачность: 0; положение: относительное; ширина: 33 пикселя; } .volume: hover .volume_slider {непрозрачность: 1; } .volume_slider .ui-slider-handle {background: url (../ images / handler.png) no-repeat; высота: 15 пикселей; слева: 9 пикселей; поле-дно: -15px; поле слева: 0; непрозрачность: 0,8; ширина: 14 пикселей; } .volume_slider .ui-slider-handle.ui-state-hover {непрозрачность: 1; } .mute, .unmute {низ: 7 пикселей; дисплей: блок; высота: 23 пикс; непрозрачность: 0,8; положение: абсолютное; текстовый отступ: -999px; ширина: 33 пикселя; } .mute: hover, .unmute: hover {непрозрачность: 1; } .mute {background: url (../ images / vol_full.png) no-repeat; } .unmute {background: url (../ images / vol_mute.png) no-repeat; дисплей: нет; }

Шаг 3. JS

JS / script.js

функция rectime (сек) {var hr = Math.floor (сек / 3600); var min = Math.floor ((сек - (час * 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 () {// переменные 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; // раздел функций var prepareTimeSlider = function () {if (! $ oVideo [0] .readyState) {setTimeout (prepareTimeSlider, 1000);} else { $ oTimeSlider.slider ({значение: 0, шаг: 0,01, ориентация: «горизонтальный», диапазон: «мин», максимум: $ oVideo [0] .duration, animate: true, слайд: функция () {bTimeSlide = true; }, stop: function (e, ui) {bTimeSlide = false; $ oVideo [0] .currentTime = ui.value;}});};}; // раздел событий $ oPlay.click (function () {$ oVideo [0] .play (); $ oPlay.hide (); $ oPause.css ('display', 'block');}); $ oPause.click (function () {$ oVideo [0]. Пауза(); $ OPause.hide (); $ oPlay.css ('display', 'block'); }); $ oMute.click (function () {$ oVideo [0] .muted = true; $ oVolSlider.slider ('value', '0'); $ oMute.hide (); $ oUnmute.css ('display', ' блок ');}); $ oUnmute.click (function () {$ oVideo [0] .muted = false; $ oVolSlider.slider ('value', iVolume); $ oUnmute.hide (); $ oMute.css ('display', 'block' );}); // связать дополнительные внутренние события $ oVideo.bind ('окончено', 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 );}); // инициализация покоя $ oVolSlider.slider ({значение: 1, ориентация: «вертикальный», диапазон: «мин», максимум: 1, шаг: 0,02, animate: true, слайд: функция (e, ui) {$ oVideo [ 0] .muted = false; iVolume = ui.value; $ oVideo [0] .volume = ui.value;}}); prepareTimeSlider (); $ OVideo.removeAttr ( 'контроль'); }); }; }) (Jquery);

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

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

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






Live Demo

Заключение

Надеюсь, что сегодняшний учебник HTML5 был отличным. Мы сделали еще один хороший пример HTML5. Буду рад видеть ваши благодарности и комментарии. Удачи!