html код видеоплеера для сайта
Создаём видеоплеер для нашего сайта
Вот что у нас должно получиться. В качестве альтернативы, если браузер не поддерживает HTML5, то вы можете вывести пользователю версию на Flash-е.
Подготовка
Для начала, нам нужно подготовить исходные материалы: видео возьмём с Youtube. Для обеспечения большей совместимости, загрузим видео в двух форматах: MP4 и OGV. Для преобразования видео из одного формата в другой, можем воспользоваться каким-то конвертером.
Также нам понадобится изображение, которое будет отображаться в качестве обложки. Иконки возьмём с Font Awesome. Ну и конечно, нам понадобятся библиотеки jPlayer, jQuery. Поместите все эти файлы в папки:
Для начала, подключим файлы библиотек и таблицы стилей в разделе :
HTML структура будет очень похожа на ту, что мы писали при создании аудио плеера:
Активируем видео
Тут всё будет так же, как и в предыдущем примере. Только тут, помимо перечисления ссылок на видео, нам нужно указать адрес изображения-постера.
На данный момент результат должен выглядеть примерно так:
Добавляем стили
Теперь, давайте добавим css правил, чтобы исправить отображение.
Открываем/создаём файл style.css.
Во-первых, убираем нижнее подчёркивание у всех ссылок:
Ширина видео
Задаём определённые размеры контейнеру:
Заголовок
Заголовок окрасим в тёмно-серый цвет, позиционируя его по центру.
Кнопка проигрывания
Для кнопки проигрывания воспользуемся иконкой из FontAwesome:
Интерфейс плеера
На данный момент, плеер должен выглядеть следующим образом.
Полноэкранный режим
Также у нас есть возможность полно-экранного просмотра. Именно поэтому нам нужно создать стили для кнопок, которые будут применяться в расширенном режиме отображения. С помощью z-index, мы сможем правильно спозиционировать все нужные нам элементы:
Добавляем тени
Этот финт уже не обязателен, однако лишним не будет. Добавим тень к нашему плееру для того, чтоб он выглядел лучше.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-video-player/
Перевел: Станислав Протасевич
Урок создан: 1 Мая 2013
Просмотров: 49893
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Видеоплеер на JavaScript и HTML
В этой статье вы прочитаете как сделать на чистом javascript видеоплеер, или на HTML.
Также у нас на сайте есть статья о том, как сделать аудиоплеер на JavaScript и HTML, если вам это интересно, то посмотрите.
Делаем видеоплеер на JavaScript:
Для начала разберём как будем делать видеоплеер на JS и что мы реализуем, с начала мы возьмём элемент и будем брать данные о видео, менять их и выводить при необходимости.
А реализуем мы кнопки перемотки и пауза/плай, также видео дорожку и перемотку на нужную часть видео под средством нажатия на неё.
Дальше уже буду показывать как сделать плеер с нуля, что бы вы поняли как можно работать с видео в JavaScript, поэтому сейчас изменю HTML.
Если вам тут что то не понятно или плохо знаете HTML, то посмотрите наш учебник по HTML.
Теперь перейдём к CSS, не много изменим вид, вот вёрстка.
В целом тут всё просто, но если не понятно, то посмотрите наш учебник по CSS.
JavaScript:
Теперь перейдём к самому главному, это к созданию кода на JavaScript, и логики, сначала посмотрим какие элементы нужно подключить.
Тут мы берём элемент по id остальное берём по селектору.
Дальше будем делать событие кнопок, сначала посмотрим работу с запуском видео.
Давайте разберём этот код, в начале через video.play() запускаем проигрывание видео, а потом запускаем интервал, он нам нужен для отображение сколько прошло времени от начала видео, на видео дорожке.
Теперь посмотрите на код нажатия на кнопку паузы.
Дальше идёт код для перемотки видио, но он очень простой.
Тут всё так просто, что даже не буду говорить что тут написано, так как всё из комментариев должно быть понятно.
Последнее что осталось сделать, так это что бы при нажатие на видео дорожку автоматически переключалось время.
Дальше определяем по формуле, на какой процент записи мы хотим переключится, и присваиваем это значение ширине линии таймлайна, потом точно также вычисляем сколько на какую секунду видео надо переключится, вот результат.
Также ниже можете скачать файлы этого плеера, что бы проверить как он работает.
Вывод:
В этой статье вы прочитали как сделать на javascript видеоплеер, и на HTML тоже, думаю вам понравилось.
Но если вы заметили, там есть много не доработок, например, видео не делается на полный экран или не показывается сколько времени осталось до окончания.
Если вы хотите это исправить, то скачайте файлы и используя сайты по этим ссылкам (сайт 1, сайт 2), они вам помогут.
Как создать видео-проигрыватель на JQuery, HTML5 и CSS3
В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.
Шаг 1 — Загрузка MediaElement.js
Для начала вам нужно загрузить «MediaElement.js» и распаковать его. Из папки «build» нам понадобятся три файла:
Скопируйте эти три файла в одну директорию, я назову эту папку «js».
Шаг 2 — HTML-разметка
Теперь нам нужно установить ссылку на библиотеку JQuery. Затем добавить к ссылке скрипт «mediaelement-and-player.min.js» и добавить файл CSS:
Для создания видео плеера, Нам понадобится новый тег HTML5 video. Затем мы добавим некоторые атрибуты для этого тега: ширину и высоту видео и «обложки». Обложку (изображение), можно показать перед началом видео, пока пользователь не нажмет на кнопку воспроизведения.
Теперь нам нужно добавить следующий код для кнопок управления и задать некоторые настройки:
Шаг 3 — Основные стили
Давайте начнем с добавления некоторых стилей.
Затем мы установим общий стиль для блока с видео. Все CSS свойства мы используем для создания разметки видео блока. Это не создаст особых стилей для самого видео, это только для того, что бы разместить все элементы в нужном месте.
Шаг 4 – Блок с управлением
Давайте добавим большую кнопку воспроизведения в центре плеера.
Блок с видео мы будем позиционировать снизу, зададим высоту в 34px и добавим фоновый цвет. Лучше использовать RGBA, чтобы сделать фон прозрачным, но RGBA не поддерживается старыми браузерами, поэтому мы также добавим RGB. Затем мы установим несколько кнопок управления с общим стилем и спрайт изображение.
Шаг 5 — Кнопки управления видео
Сейчас необходимо поменять позицию каждой кнопки на блоке управления, установить ширину и высоту всех кнопок, изменить положение фонового изображения.
Шаг 6 – Ползунок громкости
Зададим стиль для ползунка громкости, поменяем местоположение, а затем добавим значения ширины и высоты, с закруглёнными углами.
Шаг 7 – Индикатор просмотра
Расположим индикатор просмотра на верхней части блока управления, добавим цвет фона для каждого состояния (полная шкала и время для загрузки). Установим ширину в 0, которая будет автоматически обновляться при загрузке фильма.
Шаг 8 – Маркер для просмотра и индикатор времени
На этом этапе мы добавим маркер для шкалы просмотра и подсказки, которые будут отображать текущее время при наведении курсора мыши. Сейчас нам нужно задать им позицию, добавить фоновое изображение, установить ширину и высоту, и добавить некоторые стили типографии.
Шаг 9 — CSS3 Градиент
Нам осталось добавить зеленый CSS3 градиент, который будет использоваться на шкале просмотра и регуляторе громкости.
Как сделать проигрыватель видео на HTML5 с нуля
Создание документа
Перед началом проекта нужно подготовить исходные материалы. Вам понадобятся:
Результат должен выглядеть примерно так:
В своем уроке я буду использовать:
Вставка видео на веб-страницу
Это базовый скелет HTML5 будущего видеоплеера. Он использует 10 основных строк кода, которые позволят видео отображаться на любой веб-странице с основными кнопками управления.
Теперь в теге нужно указать, какие размеры должен иметь плеер ( рекомендуется установить размеры плеера, чтобы избежать мерцания ). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку « Play ».
Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.
Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением ( в данном случае « Images » ) и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.
Чтобы собрать плеер для сайта, важно вставить атрибут « controls ». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать « Воспроизвести » или другие основные функции. Тег отображает основной массив элементов управления: кнопки « Воспроизвести », « Пауза », « Громкость » и кнопку полноэкранного режима для более удобного использования функций.
Теперь, если вы нажмете кнопку « Video Preview » ( Предварительный просмотр видео ), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.
Позиционирование видеоплеера с помощью CSS
Создаваемый плеер для сайта будет находиться в
Далее я задаю каждому
У кнопки воспроизведения есть своя временная шкала, которую я вставил в
После всего этого ваш « Live Preview » ( Предварительный просмотр ) должен выглядеть так:
Стили видеоплеера
Для цветовой палитры видеоплеера я выбрал различные оттенки синего, чтобы различать его основные элементы.
Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды « display: inline-block » и центрируется атрибутом « vertical-align: middle ».
Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.
Создание функциональности с помощью JavaScript
На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его « video-player.js ». Сохраните файл в той папке, которую используете для этого проекта.
Как создать плеер для сайта на HTML5 и JavaScript
Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.
Как использовать audio и video в HTML5
Чтобы создать плеер, достаточно такого кода для аудио:
И такого — для видео:
Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.
Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.
Также внутри плеера можно прописать какой-нибудь текст — его увидят те, у кого не поддерживается HTML5. Правилом хорошего тона считается указание ссылки на скачивание современного браузера.
Вот список атрибутов, которые можно указать для плеера:
Также можно указать высоту и ширину.
Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:
Поэтому мы подключаем JS и пишем свой интерфейс.
Как написать плеер на JS
Плеер на JS работает, как и любой другой интерфейс: пользователь нажимает на кнопки, скрипт отлавливает эти события и вызывает необходимые функции. Прежде всего нужно создать сам интерфейс: