Как сделать видео проигрыватель на сайте

Содержание

Создаем собственный видеоплеер для сайта без плагинов и модулей

Доброго времени суток, гости моего обучающего блога и любимые подписчики. Сегодня мы с вами будем программировать свой собственный видеоплеер для сайта. Звучит сложно, но поверьте, после прочтения текущей публикации вы легко сможете реализовать его самостоятельно.

А для этого я расскажу вам, какие элементы языка разметки html и новой спецификации html5 следует использовать, как изменить стилевое оформление видеоплеера и конечно же приведу код программы. Давайте приступим!

Короткий путь к получению видео

Самый простой способ установки видео на сайт – это использовать готовые плагины видеоплееров. На сегодняшний день таких дополнений пруд пруди во Всемирной паутине: с уникальными дизайном контролов, с плейлистами, с дополнительными элементами управления и т.д. Вам остается только найти подходящий для себя плеер, скачать установочные файлы на компьютер и подключить к своему проекту.

К тому же есть и другая возможность простой вставки видео. Думаю, каждый из вас видел такую картину, когда на веб-сервисе запускаются видео с YouTube. Так вот это достаточно простой «финт ушами» для разнообразия своего контента роликом и при этом с минимальным количеством затрачиваемых усилий.

Видео плеер для сайта

НО! Всегда есть и негативные стороны на коротком и простом пути к внедрению видеофайлов. Используя такие варианты решения, вы ограничиваете свой сайт и себя в выборе дизайна видеоплееров.

Так, видео с YouTube нельзя видоизменить. У вас на странице будет висеть плеер с абсолютно стандартным оформлением, в котором вы сможете менять только размер окна. С плагинами дело обстоит аналогично.

Youtube видеоплеер

К тому же при открытии вашего веб-ресурса будут подгружаться и подключаемые скрипты скачанных плагинов, а это повлияет на скорость загрузки.

Поэтому я расскажу, как реализовать свой собственный видеоплеер с подходящим для вас дизайном и размером.

Реализация персонального видеоплеера

Чтобы создать приложение для проигрывания видеороликов, необходимо для начала познакомиться с такими тегами html5, как и .

Video

Данный элемент используется для воспроизведения файлов в различных видеоформатах. Он обладает несколькими встроенными атрибутами, которые я перечислил в таблице.

Атрибут Предназначение
Controls Добавляет панель управления.
Autoplay После загрузки веб-страницы видео стартует автоматически.
Height Устанавливает высоту окна, в котором воспроизводится видео.
Loop Зацикливает показ ролика.
Poster Пока видео не запущено или в случае если оно недоступно, отображается картинка (постер).
Preload Во время загрузки сайта загружается и сам видеоролик.
Src Отвечает за адрес ролика.
width Устанавливает ширину окна, в котором воспроизводится видео.
Перестало воспроизводиться видео в браузере

Видео на сайте №3. Как сделать свой плеер для видео. video.js

Source

Данный тег используется для вставки необходимых файлов (аудио или видео) в элементы и .

Для source создателями языка было предусмотрено всего лишь 3 атрибута:

  • Media – используется для определения устройства, на котором запускается мультимедиа. Используется не очень часто;
  • Src – отвечает за адрес вставляемого файла;
  • Type – указывает типы данных (MIME-типы) источников.

Вот теперь с полученными знаниями о коде можно приступать к созданию видеоплеера.

video body < background: #8B7355; >video < max-width: 50%; margin-left:25%; border: 2px solid #8B4513; >h2 /*на месте этой ссылки вы вставите путь к своему видеофайлу*/

Ссылка для скачивания видео здесь.

var v = document.getElementById(«movie»); document.getElementById(«movie»).volume = 0.5; v.onclick = function() < if (v.paused) < v.play(); >else < v.pause(); >>;

Желаю вам удачи в создании собственного плеера. Подписывайтесь на мой блог и не забывайте рассказывать о нем своим знакомым и друзьям. До встречи! Пока-пока!

Источник

Как сделать проигрыватель видео на HTML5 с нуля

Сегодня мы заглянем за кулисы HTML5 , и вы узнаете, как сделать проигрыватель видео с нуля. Цель этого урока заключается в том, чтобы объяснить код таким образом, чтобы любой мог создать свой собственный видеоплеер:

Создание документа

Перед началом проекта нужно подготовить исходные материалы. Вам понадобятся:

  • Пустой html документ;
  • Два видеоролика ( вы можете загрузить примеры видеороликов с бесплатных онлайн-источников, таких как PixaBay.com или Videezy.com ). Убедитесь, что они оба формата .mp4;
  • Обложка ( изображение для презентации видео ). Для этого можно скачать соответствующее изображение с Pexels.com или FreeImages.com ;
  • Иконки для управления плеером ( можно воспользоваться такими сайтами, как FlatIcon.com или IconArchive.com ).

Результат должен выглядеть примерно так:

Создание документа

В своем уроке я буду использовать:

  • Изображение Белка ;
  • Архив контурных медиа кнопок ;
  • Шрифт Awesome стилизованный под видеоплеер;
  • Бесплатный редактор кода Brackets , меня привлекла в нем удобная кнопка « Live Preview » ( Предварительный просмотр ), расположенная в правом верхнем углу, которая показывает результат работы на веб-странице после того, как вы сохранили отредактированный html-файл .

Теперь, когда мы выбрали и собрали все необходимые материалы, можно приступить к работе над кодом плеера для сайта HTML5 .

Вставка видео на веб-страницу

Вставка видео на веб-страницу

Это базовый скелет HTML5 будущего видеоплеера. Он использует 10 основных строк кода, которые позволят видео отображаться на любой веб-странице с основными кнопками управления.

Начнем с разметки HTML , в ней используется универсальное объявление doctype . Это первое, с чего начинается любой HTML-документ . Оно нужно для того, чтобы браузер был в курсе, какой документ вы используете.

Теперь перейдем к элементам, которые нужно включить в HTML : и . Сейчас мы должны сосредоточиться на том, что происходит в body . Вы не сможете создать видео без тега . Внутри вставляем .

Как зарегистрировать билет на сайте жилищная лотерея

Теперь в теге нужно указать, какие размеры должен иметь плеер ( рекомендуется установить размеры плеера, чтобы избежать мерцания ). Источник видео, которое вы хотите воспроизвести в плеере, и изображение обложки. Это будет презентацией видео, которое зрители увидят, прежде чем нажмут кнопку « Play ».

Теперь рассмотрим доступные атрибуты и посмотрим, как они работают.

Атрибут poster — он нужен для создания изображения-презентации вашего видео. В нем необходимо указать папку с изображением ( в данном случае « Images » ) и название файла. Затем нужно выбрать ширину и высоту плеера. Я решил выбрать симметричную форму.

Чтобы собрать плеер для сайта, важно вставить атрибут « controls ». Без него вы можете управлять своим видео только правой кнопкой мыши, а затем выбрать « Воспроизвести » или другие основные функции. Тег отображает основной массив элементов управления: кнопки « Воспроизвести », « Пауза », « Громкость » и кнопку полноэкранного режима для более удобного использования функций.

Далее идет тег , в котором необходимо указать атрибут src с источником видео. Поскольку вы уже создали папку для видеоплеера, источник видео будет легко распознаваться кодом, достаточно просто указать имя конкретного видеофайла.

Поскольку тег поддерживает три формата видео ( MP4, WebM и Ogg ) необходимо указать в атрибуте type , какой из них используется. Для удобства пользователей рекомендуется использовать как можно больше версий видео. Поэтому, если у вас есть .ogg-версия видео, нужно открыть еще один тег . Например: .

Теперь, если вы нажмете кнопку « Video Preview » ( Предварительный просмотр видео ), то увидите базовый видеоплеер с обложкой, кнопками управления и видео, которое корректно воспроизводится в пределах выбранного размера.

Позиционирование видеоплеера с помощью CSS

Создаваемый плеер для сайта будет находиться в , который в свою очередь будет содержать два других :

Позиционирование видеоплеера с помощью CSS

Затем мы собираемся построить площадку для CSS-кода . Для этого я создал три идентификатора внутри большого тега div с именем video-player , поскольку — это цель нашего проекта.

Первый div-контейнер отвечает за скелет видео. Сюда нужно перенести первоначальные строки тега , который мы создали на втором этапе данного руководства. Второй div-контейнер содержит индикатор просмотра, а третий — кнопки видеоплеера. Помните, что каждый тег должен иметь уникальный идентификатор:

Позиционирование видеоплеера с помощью CSS - 2

Далее я задаю каждому необходимые атрибуты. Таким образом, у div video-tree есть video теги.

progress-tree отвечает за индикатор выполнения, поэтому имеет идентификатор « progress ».

button-tree требует больше вашего внимания. Я вставил три кнопки: play ( воспроизвести ), back ( назад ) и next ( вперед ). Таким образом, каждая кнопка заключена в свой собственный тег , имеет собственный идентификатор ( « play-button », « backward-button » и « forward-button » ) и размеры ( 100 на 100 пикселей для каждой кнопки ).

Как поставить якоря на сайт

У кнопки воспроизведения есть своя временная шкала, которую я вставил в с идентификатором « time-factor ». Не забудьте также использовать ограничения времени « 0: 00/0: 00 », которые представляют собой время начала и момент времени, которого достигло видео.

После всего этого ваш « Live Preview » ( Предварительный просмотр ) должен выглядеть так:

Как видите, кнопки плеера с плейлистом для сайта находятся в неправильном порядке, но мы исправим это с помощью CSS .

Стили видеоплеера

Сохраните файл html и откройте новый файл с именем « video-player.css ». Не забудьте сохранить файл css в той же папке, где html .

Теперь вернитесь в файл html и добавьте в тег атрибуты, которые свяжут файл html с css-файлом : css , просто указываете элемент с id , который отметили в html-файле , указав в начале # . Так вы сообщите редактору кода, какую часть необходимо стилизовать первой:

Стили видеоплеера

Выше показан скриншот файла css . Я показал основной CSS , но с помощью этого языка можно сконструировать видеоплеер более сложными способами. Когда понятны основы, можно исследовать более сложные стили самостоятельно.

Я последовательно настроил все элементы создаваемого плеера в файле css .

Для цветовой палитры видеоплеера я выбрал различные оттенки синего, чтобы различать его основные элементы.

У видеоплеера синий фон, он ограничен размерами дисплея плеера, так как функция display имеет значение inline-block . Поэтому веб-страница не станет полностью синей, так как синий фон будет ограничен размерами видеоплеера.

Следующий элемент проектирования — это video-tree , для которого я выбрал нужные размеры, и указал, чтобы видео выводилось на весь экран.

Для progress-tree я выбрал только цвет, и больше сосредоточился на ветке « progress », определяющей индикатор просмотра. Вам нужно выбрать для прогресс-бара цвет отличный от progress-tree , чтобы пользователи могли видеть, сколько осталось видео.

Для button-tree я создал две разные записи. Первая запись фокусируется только на ширине кнопок. Вторая запись управляет кнопками при горизонтальной перестройке с помощью команды « display: inline-block » и центрируется атрибутом « vertical-align: middle ».

Этот CSS позволяет настроить плеер для сайта на ваше усмотрение.

Создание функциональности с помощью JavaScript

На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его « video-player.js ». Сохраните файл в той папке, которую используете для этого проекта.

Затем нужно связать файл JavaScript с исходным файлом HTML5 строкой между тегом и закрывающим тегом . Например: :

Создание функциональности с помощью JavaScript

В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.

Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор « play-button ». Затем необходимо прописать форму кнопке через GetElementbyID .

Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем « Click » с помощью метода addEventListener . Функция « playOrPause » заставляет кнопку « Воспроизвести » работать, как обычную кнопку воспроизведения, а также как кнопку « Пауза ».

Как в Яндексе создать панель избранных сайтов

Затем в коде создания плеера для сайта вы описываете функцию playOrPause . Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено ( блок «else» ), нажатие кнопки « Воспроизвести » остановит воспроизведение.

Вы можете поделиться своим опытом и мыслями относительно создания видеопроигрывателя в комментариях!

Пожалуйста, оставьте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, лайки, подписки, дизлайки, отклики огромное вам спасибо!

Источник

Создаём видеоплеер для нашего сайта

В позапрошлом месяце у нас на сайте был опубликован урок по созданию аудио плеера. На этот раз, мы будем делать видео плеер, основанный на HTML5 элементе . Практически каждый браузер, поддерживающий HTML, будет поддерживать его работу.

demosourse

Вот что у нас должно получиться. В качестве альтернативы, если браузер не поддерживает 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
Просмотров: 52058
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Можно ли заявление на увольнение отправить по электронной почте находясь больничном

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Источник

Как сделать собственный видео-плеер на HTML5 Video

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.

Напомню, что video-элемент сам по себе уже обеспечивает необходимый набор контролов для управления проигрыванием. Чтобы была видна панель управления воспроизведением, достаточно указать атрибут controls.

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).

API для управления воспроизведением

Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.

Интерфейс HTMLMediaElement

Это общий интерфейс для обоих медиа-элементов (аудио и видео), описывающий доступ к базовым возможностями работы с медиа-контентом: контроль источника контента, управление воспроизведением, изменение уровня звука и обработка ошибок. Основные свойства и методы, которые нам понадобятся:

Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео

Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука [0, 1]
play() — начать проигрывание
pause() — поставить на паузу

События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось

Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.

Интерфейс HTMLVideoElement

Видео отличается от аудио несколькими дополнительными свойствами:
width и height — ширина и высота контейнера для проигрывания видео;
videoWidth и videoHeight — внутреннее значение ширины и высоты видео, если размеры не известны, равны 0;
poster — ссылка на картинку, которую можно показывать, пока видео недоступно (обычно это один
из первых непустых кадров).

Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).

Play https://habr.com/ru/company/microsoft/blog/127295/» target=»_blank»]Источник[/mask_link]

Рейтинг
Загрузка ...