Начиная с октября 2016 года (Chrome 54) в Chrome больше нет встроенной флэш-памяти, но вместо этого предлагается установить ее при первом доступе пользователей к ресурсам флэш-памяти. Начиная с Chrome62, опция «воспроизведение по щелчку» больше не предоставляется. Вместо этого после нажатия на видеоокно всплывает левый верхний угол
Это означает, что флэш-память как устаревший стандарт будет заменена новой технологией.
предисловие
С тех пор, как мы смогли воспроизводить видео на веб-сайтах, до того, как плееры h5 были в самом разгаре, использование флэш-памяти всегда было популярным для воспроизведения видео в Интернете. Говоря более широко, до того, как HTML5 стал мейнстримом, мультимедийные возможности веб-сайтов, включая анимацию, игры и видео, всегда находились под контролем экосистемы Adobe. Ну а с введением стандарта html5 все это ушло в прошлое.
flv и решение для прямых трансляций
Весь процесс FLV представляет собой Flash Video. Как следует из названия, это формат воспроизведения, специально предназначенный для флэш-плееров. Этот формат имеет преимущества простой и ясной структуры. Проблема воспроизведения. С постепенным отказом от flash новый тег видео, естественно, не поддерживает формат FLV.Люди начали сосредотачиваться на mp4 или hls для веб-видео, но с популярностью живого видео FLV открыл новый виток жизни.
Давайте сравним доступные решения для прямых трансляций:
реализация воспроизведения flv · прыжок · переключение определений
Можно видеть, что из-за характеристик формата кодирования, flv требуется только один метаданные и соответствующий заголовок аудио- и видеодорожки для воспроизведения в любой момент времени, что в значительной степени соответствует потребностям прямой трансляции в реальном времени и может даже при достаточно малом GOP.0 задержки, можно сказать, что среди существующих технических решений http-flv является наиболее идеальным, именно по этой причине flv по-прежнему является незаменимой поддержкой формата для веб-плееров.
Во-первых, давайте посмотрим на процесс воспроизведения FLV на интерфейсе через картинку
Как видно из приведенного выше рисунка, процесс воспроизведения flv на самом деле представляет собой процесс извлечения метаинформации, аудио- и видеозаголовков и данных из flvt, а затем их перекодирование в блочную структуру fmp4, а затем передачу видео через МСЭ. Поскольку структура самого flv является потоковой, то есть его данные разбиты на множество небольших тегов, мы можем легко выполнить инкапсуляцию данных, то есть инкапсулировать часть данных тега flv в независимую пару блоков moof_mdat. быть переданы непосредственно в MSE для обработки, что очень удобно. Здесь мы обсудим, как flv обрабатывает загрузку, воспроизведение с переходом, повтор и переключение разрешения.
загрузка данных Существует два режима загрузки данных: прямая трансляция и по запросу.Во-первых, давайте поговорим о по запросу: Для получения данных по запросу мы используем параметр Range в качестве управляющего параметра для сегментированной загрузки.
Как показано выше, параметр Range описывает серверу, что он хочет загрузитьОт 100000 до 3987705 байт FLV-файлаЭти данные, соответственно, сервер также должен иметь возможность правильно возвращать эти данные в соответствии с параметром диапазона. Вот минимальный серверный код:
Как видно из приведенного выше кода, сервер сначала анализирует диапазон, вырезает сегменты файла в соответствии с диапазоном, а затем возвращает readableStream во внешний интерфейс.
Давайте еще раз посмотрим на прямую трансляцию: прямая трансляция и по запросу — очень разные структуры потока данных, давайте взглянем на простой процесс прямой трансляции.
Видно, что процесс прямой трансляции — это процесс push stream -> кодирование формата на стороне сервера -> терминальное воспроизведение. Тогда здесь есть проблема, мы не можем загружать данные, как мы это делаем, когда по требованию. Поскольку сервер фактически сохраняет файловый поток, данные постоянно пушатся на сервер, а плеер не кэширует кусок данных, а продолжает запрашивать у сервера, пока на сервер не придет новый поток, плеер будет его необходимо получить этот сегмент для декодирования и воспроизведения, чтобы добиться эффекта прямой трансляции одновременного нажатия и вытягивания. Чтобы добиться этого эффекта, в плеере мы используем fetch+ streamReader, простая реализация такова:
Как видно из кода выше, мы рекурсивно считываем данные из потока через ридер, а затем передаем данные в декодер для обработки. Существует также более продвинутый метод веб-сокета для загрузки данных прямого эфира, который здесь подробно обсуждаться не будет, а заинтересованные студенты могут сами обратиться к соответствующей информации.
Прыгай во время игрыЩелчок по индикатору выполнения для перехода (далее именуемый поиском) во время воспроизведения — операция с очень высокой частотой, особенно в длинных видео. Когда пользователь сталкивается с частью, которую он не хочет смотреть, или с сегментом, который он хочет пересмотреть, он щелкнет индикатор выполнения, чтобы запустить поиск. Например, для видео часть, которую пользователи фактически смотрят, может составлять менее 50%, если мы загрузим все видео, оставшиеся 50% загрузки будут потрачены впустую. Итак, что нам нужно сделать, это загрузить именно ту часть, в которую хочет играть пользователь, и сэкономить трафик. Обходной путь выглядит следующим образом:
Получить момент времени, к которому перейдет пользователь, далее именуемый seekTime. Вычислить положение кадра, ближайшего к моменту времени, в соответствии с seekTime, называемый startPos.
Взяв в качестве примера время предварительной загрузки 30 с, вычисляется ближайшая позиция кадра в seekTime + 30 с и вызывается endPos.
Мы используем Range: startPos-endPos в качестве параметра запроса, чтобы запросить этот фрагмент данных с сервера.
Расшифруй и играй
Это просто сказать, но это связано с проблемой, тесно связанной с форматом flv, то есть имеет ли информация onMetaData файла flv ключевые кадры атрибутов. Как было сказано выше, алгоритм вычисления положения определенного кадра на основе момента времени полностью зависит от атрибута keyframes, который записывает момент времени и смещение файла всех ключевых кадров в flv, примерно такие ключевые кадры:
Каждый момент времени соответствует смещению позиции файла в одном и том же месте, исходя из этого мы можем рассчитать диапазон данных, который необходимо загрузить. Стоит отметить, что не все файлы flv содержат заголовок ключевых кадров, и очень часто в файлах flv отсутствуют некоторые атрибуты onMetaData. Без информации о ключевых кадрах мы не сможем сделать скачок, поэтому нам нужно использовать дополнительные инструменты, которые помогут нам завершить onMetaData для flv. Рекомендуется использовать легковесный инструмент yamdi.Заинтересованные студенты могут ознакомиться с его использованием.
переключатель резкостиПереключение разрешения — очень важная функция, почему она важна, ведь пользователи будут выбирать более четкое или плавное видео в зависимости от скорости интернета. Предполагая, что такой опции нет, пользователь не может переключать четкость после просмотра видео, поэтому он может только сердито закрыть окно. Так как же добиться плавного переключения между несколькими видеоисточниками с высоким разрешением? Давайте обсудим каждый случай:
Схема переключения разрешения в видео по запросу Переключения разрешения по запросу относительно легко добиться, процесс выглядит следующим образом.
Короче говоря, как показано на рисунке, он пытается загрузить видео B. Извлекая информацию о ключевом кадре из onMetaData видео B, он вычисляет, какой ключевой кадр должен быть загружен в данный момент, а затем загружает данные после этой позиции до тех пор, пока данные загружены.Данные видео B отдать в MSE, а заодно очистить кеш видео A в буфере.
Схема переключения разрешения в прямом эфире Бесшовной схемы переключения разрешения в прямом эфире не существует, поэтому рекомендуется пересобирать декодер и MSE непосредственно при переключении, мы пока изучаем этот вопрос. Для получения дополнительной информации, пожалуйста, следите за нашимиплеер с открытым исходным кодом, также добро пожаловать к намgithubСообщить о проблеме.