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. Буду рад видеть ваши благодарности и комментарии. Удачи!

Похожие

Плагин Java Browser мертв, да здравствует HTML5!
Создайте адаптивную галерею Colorbox в Drupal 8 (с наложенными надписями)
Участник OSTraining спросил, как создать галерею с Colorbox в Drupal 8. Мы проведем вас через процесс создания красивой галереи Colorbox с текстом, наложенным на изображения. Шаг 1. Установите модули и библиотеки Для этого урока вам понадобятся следующие модули, темы и библиотеки Шаг 2. Создать контент для галереи Перейдите в Структура> Типы контента. Создайте новый тип контента, специально для этой галереи
Как скачать Adobe
Adobe является очень популярным программным обеспечением для своих видео- и цифровых графических продуктов, таких как Flash Player , Acrobat Reader и Photoshop . Фактически, многие, многие пользователи используют известные компьютерные программы каждый день. Некоторые фирменные программы Adobe можно найти бесплатно , а другие платные . Как скажешь? Вы уже знаете об этом
🐿️ [5 шагов] Быстро добавьте Fantastic Font Squirrel типы на ваш сайт
В современном веб-дизайне шрифты довольно легко вернуть в отличие от первых дней Интернета - благодаря таким сайтам, как Font Squirrel. Хотя раньше возможности ограничивались несколькими шрифтами, которые должен был использовать каждый, сегодня
Скачать Windows 7 Драйверы | Windows 7 Обновления драйверов | Drivers.com
Драйверы зависят не только от устройства, но и от операционной системы . Это означает, что если вы изменяете или обновляете свою операционную систему, вы также должны обновить драйверы программного обеспечения . Даже если вы не вносите никаких изменений в свою систему,
Как изменить цвет в частях изображения в Adobe Photoshop
... шагом является выбор цвета в изображении, которое вы хотите заменить, нажав на него. Теперь перейдите к элементам управления Hue, Saturation и Lightness, чтобы установить цвет, который вы хотите использовать в качестве замены. Вы также можете щелкнуть образец цвета, чтобы открыть палитру цветов, если хотите.
Скачать
Текущая версия Process Dashboard - 2.5 ( выпущен 13 января 2019 г. ). Варианты загрузки: Панель инструментов процесса с PSP (СМ) и TSP (СМ) Расширения процессаНаиболее популярный вариант Стандартный установщик, включающий поддержку PSP
...
по
Что такое Cheatengine62 (1) .exe и как его исправить?
Скачать сейчас WinThruster 2019 - Сканировать ваш компьютер на наличие ошибок реестра в cheatengine62 (1) .exe Совместим с Windows 10, 8, 7, Vista, XP и 2000 Дополнительное предложение для WinThruster от Solvusoft | EULA | политика конфиденциальности |
Что такое SMTP.EXE и как его исправить?
Скачать сейчас WinThruster 2019 - Сканировать ваш компьютер на наличие ошибок реестра в SMTP.EXE Совместим с Windows 2000, XP, Vista, 7, 8 и 10 Установить дополнительные продукты - DLL (Solvusoft) | EULA | Политика конфиденциальности |
Полное руководство - Законно ли скачивать видео с YouTube и как скачивать
... шага Этапы загрузки Шаг 1. Скопируйте и вставьте ссылку на видео YouTube в раздел «Добавить URL» в разделе «Скачать видео». Шаг 2: Нажмите «Анализ». По завершении анализа выберите нужный формат и разрешение из раскрывающегося списка. Шаг 3: Установите папку для сохранения загружаемого видео, затем нажмите кнопку «Скачать».

Комментарии

Где я могу скачать Epic?
Где я могу скачать Epic? Самое удобное место, чтобы получить Epic от домашняя страница веб-сайта браузера , используя кнопку «Скачать Epic Now» справа. Страница должна автоматически распознавать версию для Windows или MacOS, а затем начать процесс загрузки после нажатия на кнопку. Если загрузка не начинается, выберите из списка в верхней части страницы: ZIP-архив Windows, исполняемый файл Windows .exe, ZIP-файл OS X / macOS или образ
Как скачать оригинал MS Office 2016 ISO?
Как скачать оригинал MS Office 2016 ISO? Вы можете получить последнюю версию Microsoft Office 2016, загрузив из Интернета или Официальный веб-сайт , Как только вы завершите загрузку, вам нужно извлечь исходный образ ISO из ZIP-файла с именем «SW_DVD5_Office_Professional_Plus_2016_W32_English…» для 32-разрядной версии. и если вы используете 64-битную версию, то «SW_DVD5_Office_Professional_Plus_2016_W64_English
Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям?
Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям? Если это так, вы находитесь в правильном месте. В этой статье мы сравним лучшие плагины галереи WordPress на рынке, чтобы вы могли выбрать подходящий для своего сайта и потребностей. Выбор плагина галереи WordPress WordPress поставляется со встроенной функцией галереи, но галерее по умолчанию не хватает функциональности, которой так жаждут большинство пользователей.
Как рисовать в граффити шрифт шаг за шагом?
Как рисовать в граффити шрифт шаг за шагом? 1. Сначала нарисуйте контур букв и рисунков карандашом. 2. Теперь добавьте фактические линии вокруг них, чтобы создать идеальный Буквы алфавита граффити и конструкции. 3. Заполните их основными цветами. 4. Идите вперед и добавьте к ним более яркие оттенки. 5. Увеличьте граффити, добавив к

Как скажешь?
Exe и как его исправить?
EXE и как его исправить?
Где я могу скачать Epic?
Как скачать оригинал MS Office 2016 ISO?
Вы ищете идеальный плагин для галереи WordPress, который соответствует вашим потребностям?
Как рисовать в граффити шрифт шаг за шагом?
Как рисовать в граффити шрифт шаг за шагом?