Как стать автором
Обновить

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

Время прочтения 9 мин
Просмотры 170K
Блог компании Microsoft Разработка веб-сайтов *HTML *
Туториал
Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека. Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.


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

<video src="trailer_480p.mp4" width="480" height="270" poster="poster.gif" controls />

Однако, как я отмечал в вводной статье, со стандартными контролами есть проблема, которая заключается как раз в том, что выглядят они нестандартно. Другими словами, в каждом браузере они выглядят по-своему (проверить, как выглядят контролы в разных браузерах, можно на примере Video Format Support на ietestdrive.com — просто откройте его в двух-трех различных браузерах).
Читать дальше →
Всего голосов 99: ↑84 и ↓15 +69
Комментарии 17

Доработка видеоплеера ffmpeg

Время прочтения 9 мин
Просмотры 31K
Работа с видео *
В предыдущей статье были рассмотрены основные компоненты ffmpeg и на их основе построен простейший плеер для воспроизведения видео со скоростью декодирования, без синхронизации.
В этой статье мы рассмотрим как добавить воспроизведение звука и разберемся с синхронизацией.
Читать дальше →
Всего голосов 21: ↑20 и ↓1 +19
Комментарии 12

Пишем iOS видео-плеер и рекодер за 5 минут

Время прочтения 5 мин
Просмотры 22K
Блог компании Backendless Разработка под iOS *
Туториал
Привет хабра-люди,

Под катом пошаговая инструкция как создать свое приложение с потоковым видео под iOS. Понадобится XCode, СДК с клиентским АПИ, ровные руки (в принципе необязательно) и чашечка кофе.


Поехали
Всего голосов 37: ↑33 и ↓4 +29
Комментарии 10

Встраиваем WebRTC плеер для живых трансляций с вебкамер и IP камер

Время прочтения 4 мин
Просмотры 8.1K
Блог компании Flashphoner Разработка веб-сайтов *JavaScript *Программирование *Браузеры

Всем известно, каким образом внедряется обычный плеер для видеороликов (VOD — видео по требованию). Как правило, это плеер, который скачивает контент фрагментами по HTTP и играет эти фрагменты в <video/> элементе браузера.

В этой статье мы расскажем о внедрении WebRTC-плеера для воспроизведения живых (Live) потоков с веб-камер и IP камер.
Читать дальше →
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 0

Тянем ролик с YouTube и раздаем по WebRTC в реалтайме

Время прочтения 7 мин
Просмотры 21K
Блог компании Flashphoner Разработка веб-сайтов *Программирование *Браузеры Разработка систем связи *


Задача следующая. Провести совместный просмотр ролика с YouTube в реальном времени несколькими пользователями. Зрители должны получать видео одновременно, с минимальной задержкой.
Читать дальше →
Всего голосов 33: ↑31 и ↓2 +29
Комментарии 31

Создаём GTK-видеоплеер с использованием Haskell

Время прочтения 23 мин
Просмотры 9.8K
Блог компании VK Высокая производительность *Программирование *Haskell *GTK+ *
Перевод


Когда мы в последний раз остановились на Movie Monad, мы создали десктопный видео-плеер, использующий все веб-технологии (HTML, CSS, JavaScript и Electron). Фокус был в том, что весь исходный код проекта был написан на Haskell.


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


Мы могли бы продолжить развивать наш подход с вебом, настроив бэкенд на стриминг видеофайла в HTML5-сервер, запустив параллельно сервер и Electron-приложение. Вместо этого мы откажемся от веб-технологий и обратимся к GTK+, Gstreamer и системе управления окнами X11.

Читать дальше →
Всего голосов 37: ↑36 и ↓1 +35
Комментарии 7

Советский HI-FI и его создатели: лазерные видеодиски в СССР

Время прочтения 7 мин
Просмотры 29K
Блог компании Pult.ru Научно-популярное Старое железо Видеотехника Звук
Так случилось, что в этом цикле мы касались в основном HI-FI аудио, не затрагивая вопрос видеотехники, а между тем, в Стране Советов были, пускай и несколько запоздалые, но достижения по этой части. Рассматривая советское видео, как сравнительно редкий и в основном перестроечный феномен, под определение HI-FI (т.е. высокая верность воспроизведения) лучше других подходят видеодиски формата Laser Disc и проигрыватели для них.



К моменту разработки в Союзе описываемая технология доживала свои последние годы за ржавеющим железным занавесом. При этом для подавляющего большинства советских людей, немногим из которых был доступен даже банальный VHS-видеомагнитофон, представлялась истинным технологическим чудом. Под катом об отчаянной и изначально обреченной на провал попытке “догнать и перегнать”.
Читать дальше →
Всего голосов 46: ↑44 и ↓2 +42
Комментарии 136

Full motion video with digital audio on the classic 8-bit game console

Время прочтения 13 мин
Просмотры 987
Ненормальное программирование *Assembler *Старое железо Игры и игровые консоли Звук

Back in 2016 an United States based music composer and performer Sergio Elisondo released an one-man band music album A Winner Is You (know your meme), with multi-instrumental cover versions of tunes from numerous memorable classic NES games. A special feature of this release has been its version released in the NES cartridge format that would run on a classic unmodified console and play digitized audio of the full album, instead of the typical chiptune sound you would expect to come from this humble console. I was involved with the software development part of this project.

This year Sergio makes a return with a brand new music release. This time it is all original music album You Are Error, heavily influenced with the video game music aesthetics. It also comes with a special extra. This time we have raised the stakes, and a new NES cartridge release includes not only the digitized audio, but full motion videos for each song, done in the silhouette cutout style similar to the famous Bad Apple video. Yet again, this project is crowdfunded via Kickstarter. It already got the asked amount in a mere 7 hours, but there is still a little time to jump on the bandwagon and get yourself a copy. In the meantime I would like to share an insight on the technical side of both projects.

Read more
Всего голосов 4: ↑4 и ↓0 +4
Комментарии 0

Видео в вебе, Browser Policy и палки в колёсах

Время прочтения 5 мин
Просмотры 3.2K
Блог компании Ozon Tech Разработка веб-сайтов *JavaScript *HTML *Браузеры

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

Это негативно сказывалось на пользовательском опыте, и в какой-то момент разработчики браузеров решили, что хватит это терпеть. Так родилась Autoplay Policy.

Рассмотрим её подробнее
Всего голосов 38: ↑37 и ↓1 +36
Комментарии 13

Один момент: готовим видеоленту без костылей и бубнов

Время прочтения 15 мин
Просмотры 2.7K
Блог компании Ozon Tech Высокая производительность *Работа с видео *Программирование *Социальные сети и сообщества
✏️ Технотекст 2022

Всем приветы! Меня зовут Ваня, я медиаинженер и занимаюсь разработкой видеоплатформы в Ozon — в основном бэкендом. В апреле 2022 года мы презентовали сервис Ozon Моменты — ленту коротких видео. Главные фичи, которые мы хотели реализовать:

— скорость отображения контента: видео должно стартовать максимально быстро, а переходы между роликами должны быть максимально бесшовными;

— качество контента: видео должно быть приемлемого качества и хорошо выглядеть;

— размер контента: видеофайл должен быть минимального размера;

— универсальность контента: видео должно воспроизводиться на любом экране, будь то iPhone 69 Pro Max или тостер от Smeg.

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

Под кат
Всего голосов 40: ↑40 и ↓0 +40
Комментарии 5