Pull to refresh

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

Reading time 9 min
Views 174K
Microsoft corporate blog Website development *HTML *
Tutorial
Ранее мы уже рассмотрели общие вопросы использования 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 — просто откройте его в двух-трех различных браузерах).
Читать дальше →
Total votes 99: ↑84 and ↓15 +69
Comments 17

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

Reading time 9 min
Views 31K
Working with video *
В предыдущей статье были рассмотрены основные компоненты ffmpeg и на их основе построен простейший плеер для воспроизведения видео со скоростью декодирования, без синхронизации.
В этой статье мы рассмотрим как добавить воспроизведение звука и разберемся с синхронизацией.
Читать дальше →
Total votes 21: ↑20 and ↓1 +19
Comments 12

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

Reading time 5 min
Views 23K
Backendless corporate blog Development for iOS *
Tutorial
Привет хабра-люди,

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


Поехали
Total votes 37: ↑33 and ↓4 +29
Comments 10

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

Reading time 4 min
Views 8.5K
Flashphoner corporate blog Website development *JavaScript *Programming *Browsers

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

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

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

Reading time 7 min
Views 22K
Flashphoner corporate blog Website development *Programming *Browsers Development of communication systems *


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

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

Reading time 23 min
Views 9.9K
VK corporate blog High performance *Programming *Haskell *GTK+ *
Translation


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


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


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

Читать дальше →
Total votes 37: ↑36 and ↓1 +35
Comments 7

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

Reading time 7 min
Views 30K
Pult.ru corporate blog Popular science Old hardware Video equipment Sound
Так случилось, что в этом цикле мы касались в основном HI-FI аудио, не затрагивая вопрос видеотехники, а между тем, в Стране Советов были, пускай и несколько запоздалые, но достижения по этой части. Рассматривая советское видео, как сравнительно редкий и в основном перестроечный феномен, под определение HI-FI (т.е. высокая верность воспроизведения) лучше других подходят видеодиски формата Laser Disc и проигрыватели для них.



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

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

Reading time 13 min
Views 1.1K
Abnormal programming *Assembler *Old hardware Games and game consoles Sound

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
Total votes 4: ↑4 and ↓0 +4
Comments 0

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

Reading time 5 min
Views 3.4K
Ozon Tech corporate blog Website development *JavaScript *HTML *Browsers

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

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

Рассмотрим её подробнее
Total votes 38: ↑37 and ↓1 +36
Comments 13

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

Reading time 15 min
Views 3.1K
Ozon Tech corporate blog High performance *Working with video *Programming *Social networks and communities
✏️ Technotext 2022

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

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

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

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

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

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

Под кат
Total votes 40: ↑40 and ↓0 +40
Comments 5