23.07.18 ИТ / HTML 4526
Сделать проигрывание видео на сайте – сегодня потребность в реализации такого функционала встречается довольно часто. Раньше для этого использовался тег object и сторонние средства, различные плагины, чаще всего популярный flash-плеер. Но с развитием веб-технологий все упростилось, теперь для проигрывания видео на сайте достаточно применить один тег – video.
Посмотрим ниже, как использовать новый тег video. Также не стоит забывать, что можно применять CSS-стили для придания уникального внешнего вида плееру. Базовый код для размещения плеера такой:
Что касается атрибутов, то здесь часть из них работает также как в теге audio. Атрибут controls сообщает браузеру, что нужно показать кнопки управления плеером, src – указывает путь к файлу. Для разных браузеров следует задать разные форматы видео, так как поддержка видеокодеков у них различается. Делается это при помощи вложенного тега source. А так как некоторые браузеры все еще могут не поддерживать новый тег, то лучше применить универсальное решение, в котором будет использован тег object для старых браузеров:
Включаем Проигрыватель видео HTML5 от YouTube
Как видно, следует указывать MIME-тип для каждого файла. Для того, чтобы удостовериться, что браузер может обрабатывать видео в нужном формате, можно создать файл .htaccess в папке, где находится Ваша веб-страница, определяющая MIME-типы для видео:
- AddType video/webm .webm
- AddType video/mp4 .mp4
- AddType video/ogg .ogv
Какие видео кодеки и форматы поддерживаются браузерами? Посмотрим ниже:
- WebM/VP8 — поддерживается в Chrome, Firefox4, Opera;
- MP4 – поддерживается в Windows Phone 7, Safari, IE9, iPhone, iPad, Android;
- Ogg/Vorbis — поддерживается в старых версиях браузеров Firefox и Opera.
Какие есть атрибуты у тега video? Перечислим ниже:
- autoplay — авто воспроизведение видео после загрузки страницы;
- controls — показать элементы управления;
- height — высота плеера в px или %;
- loop — циклическое воспроизведение файла;
- muted — выключение звука при воспроизведении файла;
- poster — путь к картинке, которая будет показана во время загрузки видео или пока не начать показ видео. Не обязательно, если не задано, то будет показан первый кадр видео;
- preload — предварительная загрузка видео. Возможные значения: auto, metadata, none;
- src — путь к файлу с видеоконтентом;
- width — ширина плеера в px или %.
Внутрь тега video можно вставить тег track для задания различной информации о видеофайле. Использование атрибутов тега track похоже на использование атрибутов при применении этого тега внутри тега audio.
При добавлении видео на страницу следует также позаботиться о подготовке видеофайлов в нужных форматах. Для этого можно использовать различные видеоконвертеры.
Проигрыватель видео HTML5 от YouTube review test
Таким образом, разместить видео на страницу стало совсем просто. Благодаря новому тегу HTML5 стало возможным делать видеоплееры высоко функциональными, удобными и в то же время простыми.
Источник: eqsash.com
Что такое видео html5 от youtube
Вместе с новыми элементами audio и video в HTML5 был добавлен новый API в JavaScript для управления этими элементами. С помощью кода JavaScript мы можем получить элементы video и audio (как и любой другой элемент) и использовать их свойства. В JavaScript эти элементы представлены объектом HTMLMediaElement , который с помощью свойств, методов и событий позволяет управлять воспроизведением аудио и видео. Отметим наиболее важные свойства, которые могут нам пригодиться для настройки этих элементов:
- playbackRate : устанавливает скорость воспроизведения. По умолчанию равно 1
- src : возвращает название воспроизводимого ресурса, если он установлен в коде html элемента
- duration : возвращает длительность файла в секундах
- buffered : возвращает длительность той части файла, которая уже буферизирована и готова к воспроизведению
- controls : устанавливает или возвращает наличие атрибута controls . Если он установлен, возвращается true , иначе возвращает false
- loop : устанавливает или возвращает наличие атрибута loop . Если он установлен, возвращается true , иначе возвращает false
- muted : устанавливает или возвращает наличие атрибута muted
- preload : устанавливает или возвращает наличие атрибута preload
- volume : устанавливает или возвращает уровень звука от 0.0 до 1.0
- currentTime : возвращает текущее время воспроизведения
Отдельно для элемента video мы можем использовать ряд дополнительных свойств:
- poster : устанавливает или возвращает атрибут poster
- height : устанавливает или возвращает атрибут height
- width : устанавливает или возвращает атрибут width
- videoWidth, videoHeight : для элемента video возвращают ширину и высоту видео
Следует также отметить два метода, с помощью которых мы можем управлять воспроизведением:
- play() : начинает воспроизведение
- pause() : приостанавливает воспроизведение
Основные события элементов video и audio:
- canplaythrough : это событие срабатывает после загрузки страницы, если браузер определит, что он может воспроизводить это видео/аудио
- pause : событие срабатывает, когда воспроизведение мультимедиа приостанавливается, и оно переводится в состояние «paused»
- play : событие срабатывает, когда начинается воспроизведение файла
- volumechange : срабатывает при изменении уровня звука мультимедиа
- ended : срабатывает при окончании воспроизведения
- timeupdate : срабатывает при изменении времени воспроизведения
- error : генерируется при возникновении ошибки
- loadeddata : срабатывает, когда будет загружен первый фрейм видеофайла
- loadedmetadata : срабатывает после загрузки метаданных мультимедиа (длительность воспроизведения, размеры видео и т.д.)
- seeking : срабатывает, когда пользователь начинает перемещать курсор по шкале воспроизведения для перемещения к новому месту аудио- или видеофайла
- seeked : срабатывает, когда пользователь завершил перемещение к новому месту на шкале воспроизведения
Теперь используем некоторые из этих свойств, событий и методов для управления элементом video:
Аудио в HTML5 .hidden < display:none; >#playBtn Play 00:00 // получаем все элементы var videoEl = document.getElementsByTagName(‘video’)[0], playBtn = document.getElementById(‘playBtn’), vidControls = document.getElementById(‘controls’), volumeControl = document.getElementById(‘volume’), timePicker = document.getElementById(‘timer’); // если браузер может воспроизводить видео удаляем класс videoEl.addEventListener(‘canplaythrough’, function () < vidControls.classList.remove(‘hidden’); videoEl.volume = volumeControl.value; >, false); // запускам или останавливаем воспроизведение playBtn.addEventListener(‘click’, function () < if (videoEl.paused) < videoEl.play(); >else < videoEl.pause(); >>, false); videoEl.addEventListener(‘play’, function () < playBtn.innerText = «Pause»; >, false); videoEl.addEventListener(‘pause’, function () < playBtn.innerText = «Play»; >, false); volumeControl.addEventListener(‘input’, function () < videoEl.volume = volumeControl.value; >, false); videoEl.addEventListener(‘ended’, function () < videoEl.currentTime = 0; >, false); videoEl.addEventListener(‘timeupdate’, function () < timePicker.innerHTML = secondsToTime(videoEl.currentTime); >, false); // рассчет отображаемого времени function secondsToTime(time) < var h = Math.floor(time / (60 * 60)), dm = time % (60 * 60), m = Math.floor(dm / 60), ds = dm % 60, s = Math.ceil(ds); if (s === 60) < s = 0; m = m + 1; >if (s < 10) < s = ‘0’ + s; >if (m === 60) < m = 0; h = h + 1; >if (m < 10) < m = ‘0’ + m; >if (h === 0) < fulltime = m + ‘:’ + s; >else < fulltime = h + ‘:’ + m + ‘:’ + s; >return fulltime; >
Вначале в коде JavaScript мы получаем все элементы. Затем, если браузер поддерживает видео и может его воспроизвести, то обрабатываем событие canplaythrough , устанавливая уровень звука и удаляя класс hidden:
videoEl.addEventListener(‘canplaythrough’, function () < vidControls.classList.remove(‘hidden’); videoEl.volume = volumeControl.value; >, false);
Чтобы запустить воспроизведение, нам надо обработать нажатие ссылки Play:
playBtn.addEventListener(‘click’, function () < if (videoEl.paused) < // если видео остановлено, запускаем videoEl.play(); >else < videoEl.pause(); >>, false);
Обрабатывая события запуска и остановки воспроизведения, мы можем изменять надпись на ссылке:
videoEl.addEventListener(‘play’, function () < playBtn.innerText = «Pause»; >, false); videoEl.addEventListener(‘pause’, function () < playBtn.innerText = «Play»; >, false);
Обрабатывая событие input , которое возникает при изменении значения ползунка, мы можем синхронизировать изменение ползунка и громкость видео:
volumeControl.addEventListener(‘input’, function () < videoEl.volume = volumeControl.value; >, false);
Обработка события ended позволит сбросить время воспроизведения:
videoEl.addEventListener(‘ended’, function () < videoEl.currentTime = 0; >, false);
А обработчик события timeupdate позволит динамически изменять показатель времени воспроизведения:
videoEl.addEventListener(‘timeupdate’, function () < timePicker.innerHTML = secondsToTime(videoEl.currentTime); >, false);
Для форматирования строки времени применяется вспомогательная функция secondsToTime . В итоге мы получим следующие элементы воспроизведения:
Ну и подобным образом можно добавить другие элементы, например, шкалу воспроизведения, какие-то другие кнопки.
Источник: metanit.com
HTML5 Video Player — Решения для воспроизведения и преобразования видео HTML5
Прошли те времена, когда вы должны использовать анимационные изображения GIF или Adobe Flash для вашего сайта. В настоящее время спецификация HTML5 предлагает элемент video для воспроизведения видео. Развитие HTML5 и его мощных мультимедийных функций позволило пользователям создавать свои веб-сайты, которые не имеют ничего общего с медленными файлами GIF или Adobe Flash.
Вот почему видео HTML5 становится все более популярным. Тем не менее, HTML3 поддерживает только 5 формата видео — MP4, WebM, а также OGG / OGV. Эта статья покажет вам три HTML5 видео плеер настольные приложения.
- Часть 1: 6 лучших видео проигрывателей HTML5
- Часть 2: Больше решений для воспроизведения HTML5
Часть 1: 6 лучших видео проигрывателей HTML5
No.1 HTML5 Video Player — проигрыватель JW
JW Player неизменно может предложить лучший опыт просмотра. Видеоплеер JW HTML5 отлично работает с наиболее популярными настольными или мобильными браузерами, позволяя пользователям использовать и просматривать видео HTML5 или другие видео с любыми задержками буферизации. Независимо от того, какой у вас браузер на Windows, Android или iOS, JW Player предоставит вам отличный доступ к вашему HTML5 видео идеально.
№ 2 видеоплеер HTML5
В случае, если вам часто не хватает места на сервере, рекомендуется перейти на хостинг YouTube. Недавно YouTube перешел на стандартный видеоплеер на основе HTML5, и теперь вам не нужно каждый раз беспокоиться о процессе кодирования видео. Вы можете запросить использование видеоплеера HTML5, если ваш браузер не использует его по умолчанию.
No.3 HTML5 видеоплеер — Videojs
Videojs — еще один инструмент для веб-видеоплеера для любителей видео, разработанный на основе HTML5. Этот видеоплеер HTML5 следует протоколам Flash-видео вместе с HTML5. Расширенные плагины также поддерживают воспроизведение на многих социальных сетях, включая Vimeo, YouTube. Его легко настроить, и вы можете наслаждаться воспроизведением видео с помощью Videojs на мобильных устройствах и настольных ПК.
No.4 HTML5 Video Player — HTML5 видео плеер
Программное обеспечение HTML5 Video Player поддерживает видео HTML5 во всех известных веб-браузерах, таких как Safari IE9, Chrome, Opera, Firefox и т. Д. Теги или не нужны. Программа также может конвертировать практически все видеоформаты и кодировать их в видеоформаты HTML5, WebM, MP4, OGG / OGV. Он также предлагает некоторые основные функции видеоредактора.
No.5 HTML5 видеоплеер — JPlayer
JPlayer — это абсолютно бесплатный HTML5-проигрыватель с открытым исходным кодом, написанный на JavaScript. Как плагин jQuery, JPlayer позволяет вам быстро встраивать кроссплатформенные аудио и видео в ваши веб-страницы. Этот видео плеер HTML5 очень легкий и полностью настраиваемый с HTML и CSS.
No.6 HTML5-проигрыватель видео — Bitmovin HTML5-проигрыватель
Благодаря отличной технологии Bitmovin HTML5 Player способен полностью настраиваться под ваши потребности. Этот видеоплеер HTML5 не требует никаких плагинов на стороне клиента. Плеер Bitmovin обеспечивает потоковую передачу высококачественных кодированных видеофайлов без каких-либо задержек. Он предлагает сервис кодирования и HTML5-плеер, работающий вместе.
С помощью этой программы вы можете воспроизводить виртуальную реальность и 360-градусное видео на любом устройстве. Его запатентованная адаптивная технология обеспечивает максимальное качество.
Если вы заинтересованы в использовании видео HTML5 на своем веб-сайте, вы должны кое-что знать о типах файлов отвечающего браузера.
◆ Google Chrome — WebM, OGG
◆ Mozilla Firefox — WebM, OGG
◆ Safari — MP4
◆ Opera — WebM, OGG
◆ Internet Explorer 9 — MP4
◆ Internet Explorer 6-8 — без поддержки HTML5
Часть 2: Больше решений для воспроизведения видео HTML5
Хотя WebM и OGG являются двумя новыми видеоформатами, связанными с видео HTML5, формат WebM работает лучше для многих браузеров. Формат уже поддерживается Google Chrome, Opera, Firefox 4+ и Internet Explorer 9. Можно было бы поддерживать OGG / OGV, но он проигрывает, поскольку формат имеет больший размер, чем WebM. Что касается формата HTML5, рекомендуется использовать формат WebM.
Для лучшего воспроизведения видео в формате HTML5 мы настоятельно рекомендуем Total Video Converter,, С помощью этой программы вы можете конвертировать любое видео в формат WebM, OGG, MP4 для видео HTML5.
1 Скачайте, установите и запустите Total Video Converter.
2 Нажмите «Добавить файл» для загрузки файлов или загрузки папки.
3 Выберите формат «WebM» из списка «Профиль», а затем нажмите «Преобразовать», чтобы преобразовать видео в WebM для воспроизведения HTML5.
В этой статье мы в основном покажем вам три проигрывателя HTML5, а также как конвертировать видео в формат HTML5. Добро пожаловать, чтобы оставить то, что вы хотите выразить, для лучших рекомендаций и предложений.
Что вы думаете об этом посте.
Рейтинг: 4.8 / 5 (на основе рейтингов 105)
Более Чтение
Оставьте свой комментарий и присоединяйтесь к нашему обсуждению
Главная Воспроизвести видео HTML5 Видеоплеер
Источник: ru.aiseesoft.com