Как сделать так, чтобы видео в браузере загружалось полностью

Обновлено: 21.11.2024

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

Требования: Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания работы с файлами, знакомство с основами HTML (см. началось с HTML) и изображения в HTML.
Цель: Чтобы узнать, как встраивать видео- и аудиоконтент в веб-страницу, и добавить титры/субтитры к видео.

Видео и аудио в Интернете

Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, с начала 2000-х годов, когда у нас появилась достаточно высокая пропускная способность для поддержки любого типа видео (видеофайлы намного больше, чем текст или даже изображения). .) В первые дни собственные веб-технологии, такие как HTML, не имели возможности встраивать видео и аудио в Интернет, поэтому проприетарные (или основанные на подключаемых модулях) технологии, такие как Flash, а позже Silverlight (оба из которых теперь устарел) — стал популярным для обработки такого контента. Эта технология работала нормально, но у нее был ряд проблем, в том числе плохая работа с функциями HTML/CSS, проблемы с безопасностью и доступностью.

Нативное решение могло бы решить многие из этих проблем, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификацию HTML5 были добавлены такие функции с элементами и и некоторыми блестящими новыми API-интерфейсами JavaScript для управления ими. Мы не будем рассматривать здесь JavaScript — только основные основы, которые можно получить с помощью HTML.

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

Примечание. Прежде чем вы начнете с этого, вы также должны знать, что существует довольно много OVP (поставщиков онлайн-видео), таких как YouTube, Dailymotion и Vimeo, а также поставщиков онлайн-аудио, таких как Soundcloud. Такие компании предлагают удобный и простой способ размещения и просмотра видео, так что вам не нужно беспокоиться об огромном потреблении полосы пропускания. OVP обычно даже предлагают готовый код для встраивания видео/аудио на ваши веб-страницы; если вы используете этот маршрут, вы можете избежать некоторых трудностей, которые мы обсуждаем в этой статье. Подробнее об этом виде услуг мы поговорим в следующей статье.

Элемент

Элемент позволяет очень легко встроить видео. Очень простой пример выглядит так:

Так же, как и для элемента, атрибут src (источник) содержит путь к видео, которое вы хотите встроить. Это работает точно так же.

Пользователи должны иметь возможность управлять воспроизведением видео и аудио (это особенно важно для людей, страдающих эпилепсией). Вы должны либо использовать атрибут управления, чтобы включить собственный интерфейс управления браузера, либо создать свой интерфейс с помощью соответствующего API JavaScript. Как минимум, интерфейс должен включать способ запуска и остановки мультимедиа, а также регулировки громкости.

Абзац внутри тегов

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

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

Использование нескольких исходных форматов для улучшения совместимости

В приведенном выше примере есть проблема, которую вы, возможно, уже заметили, если пытались получить доступ к активной ссылке выше с помощью более старого браузера, такого как Internet Explorer или даже более старой версии Safari. Видео не воспроизводится, потому что разные браузеры поддерживают разные форматы видео (и аудио). К счастью, вы можете сделать так, чтобы это не стало проблемой.

Содержимое медиафайла

Для начала быстро пройдемся по терминологии. Такие форматы, как MP3, MP4 и WebM, называются контейнерными форматами. Они определяют структуру, в которой хранятся звуковые и/или видеодорожки, составляющие медиаданные, а также метаданные, описывающие медиаданные, кодеки, используемые для кодирования его каналов, и т. д.

Файл WebM, содержащий фильм с основной видеодорожкой и одной альтернативной дорожкой ракурса, а также звуком на английском и испанском языках, а также звуком для дорожки комментариев на английском языке, можно представить, как показано на схеме ниже. Также включены текстовые дорожки, содержащие субтитры к художественному фильму, испанские субтитры к фильму и английские субтитры к комментариям.

Аудио- и видеодорожки внутри контейнера содержат данные в формате, соответствующем кодеку, используемому для кодирования этого мультимедиа. Для звуковых дорожек и видеодорожек используются разные форматы. Каждая звуковая дорожка кодируется с помощью аудиокодека, а видеодорожки кодируются с использованием (как вы, наверное, догадались) видеокодека. Как мы говорили ранее, разные браузеры поддерживают разные форматы видео и аудио, а также разные форматы контейнеров (например, MP3, MP4 и WebM, которые, в свою очередь, могут содержать разные типы видео и аудио).

  • Контейнер WebM обычно объединяет аудио Vorbis или Opus с видео VP8/VP9. Это поддерживается во всех современных браузерах, хотя более старые версии могут не работать.
  • Контейнер MP4 часто объединяет звук AAC или MP3 с видео H.264. Это также поддерживается во всех современных браузерах, включая Internet Explorer.
  • Контейнер Ogg обычно использует аудио Vorbis и видео Theora. Это лучше всего поддерживается в Firefox и Chrome, но в основном было заменено более качественным форматом WebM.

Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощенным контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.

Еще одна такая ситуация — всегда популярный файл MP3. «Файл MP3» на самом деле представляет собой звуковую дорожку MPEG-1 Audio Layer III (MP3), хранящуюся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах и, они все же могут поддерживать MP3 из-за его популярности.

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

Поддержка медиафайлов в браузерах

Примечание. Почему возникла эта проблема? Оказывается, несколько популярных форматов, таких как MP3 и MP4/H.264, превосходны, но обременены патентами; то есть существуют патенты, охватывающие некоторые или все технологии, на которых они основаны. В США патенты распространялись на MP3 до 2017 года, а H.264 обременен патентами как минимум до 2027 года.

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

Кодеки, описанные в предыдущем разделе, предназначены для сжатия видео и аудио в управляемые файлы, поскольку необработанные аудио и видео имеют чрезвычайно большой размер. Каждый веб-браузер поддерживает набор кодеков, таких как Vorbis или H.264, которые используются для преобразования сжатого аудио и видео в двоичные данные и обратно. У каждого кодека есть свои преимущества и недостатки, и у каждого контейнера также могут быть свои положительные и отрицательные особенности, влияющие на ваши решения о том, какой из них использовать.

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

Из-за сложностей, связанных с обеспечением возможности просмотра мультимедиа вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. См. Выбор правильного контейнера в форматах контейнеров мультимедиа (типы файлов), чтобы получить помощь в выборе формата файла контейнера, наиболее подходящего для ваших нужд; Аналогичным образом см. Выбор видеокодека в Руководстве по веб-видеокодеку и Выбор аудиокодека в Руководстве по веб-аудиокодеку, чтобы получить помощь в выборе первых медиакодеков для использования с вашим контентом и вашей целевой аудиторией.

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

Как же нам это сделать? Взгляните на следующий обновленный пример (попробуйте также здесь):

Здесь мы убрали атрибут src из фактического тега и вместо этого включили отдельные элементы, указывающие на свои собственные источники. В этом случае браузер будет просматривать элементы и воспроизводить первый из них, который поддерживает кодек. Включение источников WebM и MP4 должно быть достаточным для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.

Каждый элемент также имеет атрибут типа. Это необязательно, но рекомендуется включить его. Атрибут type содержит MIME-тип файла, указанный параметром , и браузеры могут использовать этот тип для немедленного пропуска видео, которые они не понимают. Если тип не указан, браузеры будут загружать и пытаться воспроизвести каждый файл, пока не найдут подходящий, что, очевидно, требует времени и является ненужным использованием ресурсов.

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

Другие функции

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

Результирующий интерфейс выглядит примерно так:

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

Звук или видео начинает воспроизводиться сразу, пока загружается остальная часть страницы. Вам не рекомендуется использовать автоматическое воспроизведение видео (или аудио) на своих сайтах, поскольку это может очень раздражать пользователей.

Заставляет видео (или аудио) воспроизводиться снова, когда оно заканчивается. Это также может раздражать, поэтому используйте его только в случае крайней необходимости.

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

URL-адрес изображения, которое будет отображаться перед воспроизведением видео. Он предназначен для использования в качестве заставки или рекламного экрана.

Используется для буферизации больших файлов; может принимать одно из трех значений:

  • "none" не буферизует файл
  • "auto" буферизует медиафайл
  • "метаданные" буферизуют только метаданные файла

Приведенный выше пример доступен для воспроизведения в прямом эфире на Github (также см. исходный код). Обратите внимание, что мы не включили атрибут autoplay в живую версию — если видео начинает воспроизводиться сразу после загрузки страницы. , вы не увидите постер!

Элемент

В браузере это приводит к следующему:

Примечание. Вы можете запустить демо-версию аудио в реальном времени на Github (также см. исходный код аудиоплеера).

Это занимает меньше места, чем видеопроигрыватель, поскольку в нем нет визуального компонента — вам просто нужно отобразить элементы управления для воспроизведения звука. Другие отличия от HTML-видео заключаются в следующем:

Отображение текстовых дорожек видео

Теперь мы обсудим немного более сложную концепцию, о которой действительно полезно знать. Многие люди не могут или не хотят слушать аудио/видео контент, который они находят в Интернете, по крайней мере, в определенное время. Например:

  • У многих людей есть нарушения слуха (например, слабослышащие или глухие), поэтому они не могут отчетливо слышать звук или вообще не могут его слышать.
  • Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре во время показа спортивной игры).
  • Аналогичным образом в средах, где воспроизведение звука может отвлечь или помешать (например, в библиотеке или когда партнер пытается заснуть), субтитры могут быть очень полезными.
  • Людям, которые не говорят на языке видео, может понадобиться расшифровка текста или даже перевод, чтобы помочь им понять содержание мультимедиа.

Было бы неплохо предоставить этим людям расшифровку слов, произнесенных в аудио/видео?Ну, благодаря HTML-видео, вы можете. Для этого мы используем формат файла WebVTT и элемент.

Примечание. "Транскрибировать" означает "записывать произносимые слова в виде текста". Полученный текст является «расшифровкой».

Переводы иностранных материалов для людей, которые не понимают слов, произнесенных в аудиозаписи.

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

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

Типичный файл WebVTT выглядит примерно так:

Чтобы это отображалось вместе с воспроизведением мультимедиа в формате HTML, вам необходимо:

  1. Сохраните его как файл .vtt в подходящем месте.
  2. Ссылка на файл .vtt с элементом. должен быть помещен внутри или , но после всех элементов. Используйте атрибут kind, чтобы указать, являются ли подсказки субтитрами, подписями или описаниями. Кроме того, используйте srclang, чтобы сообщить браузеру, на каком языке вы написали субтитры. Наконец, добавьте метку, чтобы помочь читателям определить язык, который они ищут.

Вот пример:

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

Для получения дополнительной информации, в том числе о том, как добавлять метки, см. статью Добавление титров и субтитров к видео в формате HTML5. Вы можете найти пример, который идет вместе с этой статьей на Github, написанный Яном Девлином (см. также исходный код). В этом примере используется JavaScript, чтобы пользователи могли выбирать между различными субтитрами. Обратите внимание: чтобы включить субтитры, вам нужно нажать кнопку "CC" и выбрать вариант — English, Deutsch или Español.

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

Активное обучение: встраивание собственного аудио и видео

Для этого активного обучения мы бы хотели (в идеале) выйти в мир и записать собственное видео и аудио — большинство современных телефонов позволяют очень легко записывать аудио и видео. перенесите его на свой компьютер, вы можете использовать его. Возможно, вам придется выполнить некоторое преобразование, чтобы получить WebM и MP4 в случае видео и MP3 и Ogg в случае аудио, но существует достаточно программ, позволяющих вам сделать это без особых проблем. такие как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали!

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

Мы хотели бы, чтобы вы:

  1. Сохраните аудио- и видеофайлы в новом каталоге на вашем компьютере.
  2. Создайте в том же каталоге новый файл HTML с именем index.html .
  3. Добавить и элементы на страницу; заставить их отображать элементы управления браузера по умолчанию.
  4. Дайте им обоим элементы, чтобы браузеры находили аудиоформат, который они лучше всего поддерживают, и загружали его. Они должны включать атрибуты типа.
  5. Добавьте элементу постер, который будет отображаться перед началом воспроизведения видео. Получайте удовольствие от создания собственного графического плаката.

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

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — см. Проверьте свои навыки: мультимедиа и встраивание. Обратите внимание, что третий оценочный вопрос в этом тесте предполагает знание некоторых методов, описанных в следующей статье, поэтому вы можете прочитать ее, прежде чем пытаться.

Обзор

И это завершение; мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Интернет с использованием таких технологий, как и .

Как растет рост мультимедиа за счет активного предварительного потребления ресурсов.

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

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

Выборка ресурсов получена только тогда, когда исходный HTML-документ будет полностью загружен и проанализирован (например, при активации событий DOMContentLoaded ), в то время как совершенно другое событие загрузки будет запущено, когда ресурс действительно будет извлечен.

Установка для атрибута preload значения метаданных на то, что пользователи чаще всего не приближаются к видео, однако желательно получить его список метаданных (размеры, ограничения, продолжительность и т. д.). Обратите внимание, что в Chrome 64 значение предварительной загрузки по умолчанию является метаданными . (Раньше это было auto ).

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

  • При включенном Data Saver Chrome использует для предварительной загрузки значение none .
  • В Android 4.3 Chrome объявлено для предварительной загрузки значение none из-за ошибки Android.
  • Присоединения к сотовой сети (2G, 3G и 4G) Chrome требует предварительно загрузить значение метаданных .

Как возникает в других сообщениях, предварительная загрузка ссылок — это декларативная выборка, которая позволяет переключать запросы ресурсов без блокировки событий загрузки и во время загрузки страниц. Ресурсы, загруженные через <link rel="preload"> , в известной степени и фактически инертны до тех пор, пока на них не будут явным образом ссылаться на DOM, JavaScript или CSS.

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

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

Я бы использовал это только для небольших медиафайлов (менее 5 МБ).

Поскольку в ранее загруженном ресурсе используется видеоэлемент, значение которого ранее загружаемой равно ссылке видео . Если бы это был аудиоэлемент, значение было бы as="audio" .

В представлении ниже показано, как ранее была загружена первая загрузка сегмента видео с помощью <link rel="preload"> и использована его с раскрытием источников мультимедиа. Если вы не знакомы с MSE JavaScript API, см. Основы MSE.

Для просто предположим, что все видео были разделены на файлы меньшего размера, например, file_1.webm , file_2.webm , file_3.webm и т.д. д.

Предупреждение

Для ресурсов из разных источников убедитесь, что заголовки CORS заданы правильно. Найти мы не можем создать массивный буфер из непрозрачного ответа, полученного с помощью fetch(videoFileUrl, ), мы не сможем передать какой-либо видео- или аудиоэлемент.

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

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

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

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

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

Перед предварительной загрузкой может возникнуть опасность проверки navigator.connection.type .Когда значение этого параметра равно сотовой связи, вы можете предсказать предварительную загрузку и выявить пользователей, что их оператор мобильной сети может взимать дополнительную долю за пропускную способность, и вызывать выброс только ранее собранного трафика.

Ознакомьтесь с образом сетевой информации, чтобы узнать, как реагировать на изменения в сети.

А что, если мне гипотетически необходимо предварительно загрузить медиаконтент, не естественно, что именно в естественном состоянии окончательно выберет пользователь? Если пользователь находится на веб-странице, имеется 10 видео, у нас, вероятно, достаточно памяти, чтобы получить по одному сегменту файла из каждого, но не обязательно создавать 10 скрытых элементов <video> и 10 объектов MediaSource и начинать передачу этих данных.< /p>

В объединенном раскрытии ниже двух из представленных, как предварительное кэширование нескольких первых сегментов видео с использованием и простым API-интерфейсом кэша коллекции. Обратите внимание, что чего-то похожего можно достичь с помощью IndexedDB. Мы пока не используем сервис-воркеры, как Cache API также доступен из объекта window .

Когда пользователь нажимает кнопку включения, мы используем первый сегмент видео, доступный в Cache API, так что доступ начинается немедленно, если оно доступно. В данном случае мы просто рассматриваем видео из сети. Имейте в виду, что файлы для защиты от загрузки кэша.

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

Предупреждение

Для ресурсов из разных источников убедитесь, что заголовки CORS заданы правильно. Найти мы не можем создать массивный буфер из непрозрачного ответа, полученного с помощью fetch(videoFileUrl, ), мы не сможем передать какой-либо видео- или аудиоэлемент.

Так, позвольте мне показать, как перехватить эти запросы и вернуть настроенный ответ Диапазон от сервис-воркера.

Важно отметить, что для воссоздания этого нарезанного ответа я использовал response.blob(), поскольку он просто дает мне дескриптор файла, в то время как response.arrayBuffer() переносит весь файл в память визуализатора.

Аналогично элементам изображения вы можете отложить загрузку видео. Видео обычно загружается с помощью элемента <video> (возможен альтернативный метод с использованием <img> с ограниченной реализацией). Однако способ отложенной загрузки <video> зависит от выбора использования. Рассмотрим несколько событий, каждый из которых требует собственных решений.

Для видео, воздействие которого инициируется пользователем (т. е. видео, которые не воспроизводятся автоматически), может быть желательно указать параметр предварительной загрузки в элементе <video> :

  • В Chrome значение предварительной загрузки по умолчанию было автоматическим, но в Chrome 64 теперь по умолчанию используются метаданные. Даже в этом случае в десктопной версии Chrome часть видео может быть предварительно загружена с помощью заголовка Content-Range / Firefox, Edge и Internet Explorer 11, которые ведут себя аналогично.
  • Как и в случае с Chrome, версия Safari 11.0 для компьютеров предварительно загружают ряд видео. начиная с версии 11.2, предварительно загружаются только метаданные видео. В Safari на iOS видео никогда не загружается ранее.
  • При включенном режиме Data Saver значение preload по умолчанию равно none .

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

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

  1. Они автоматически воспроизводятся при загрузке.
  2. Они зацикливаются в условиях (хотя и не всегда).
  3. У них нет звуковой дороги.

Реализация этого с помощью элемента <video> выглядит примерно так:

Атрибуты автозапуска, отключения звука и циклического управления соответственно за автовоспроизведение, беззвучный режим и зацикливание. playsinline требуется для автоматического применения в iOS. Теперь у вас есть исправная замена видео в формате GIF, который работает на всех платформах. Но как реализовать ее отложенную загрузку? Для начала из применения разметку <video> соответствующим образом:

Вы заметите добавление атрибута poster , позволяющего увеличить объем заполнителя, который будет занимать элемент пространства <video> до тех пор, пока видео не будет загружено.Как и с примерами отложенной загрузки <img> , поместите URL-адрес видео в атрибут data-src каждого элемента <source> . Використовуйте код JavaScript, аналогичный примерм отложенной загрузки изображений на основе Intersection Observer:

При отложенной загрузке элемента <video> необходимо перебрать все дочерние элементы <source> и преобразовать их атрибуты data-src в src . После этого нужно воспроизвести загрузку видео, вызвав метод загрузки элемента , после чего мультимедиа уменьшить отображение автоматически в соответствии с атрибутом автозапуска .

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

    и lozad.js — сверхлегкие варианты, которые используются только в Intersection Observer. Таким образом, они обладают высокой производительностью, но для них необходимо будет применять полизаполнение — это библиотека, которая использует Intersection Observer и привлекает к обработчикам событий. Она совместима с IE11 и ограничена браузерами.
  • Если вам нужна библиотека для отложенной загрузки на React, рассмотрите response-lazyload. Несмотря на то, что она не использует Intersection Observer, она предоставляет уже знакомую методику отложенной загрузки изображений для тех, кто прикрепляет к разработке приложений на React.

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

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

Вот скриншот того, как выглядит видео:

Моей задачей было разместить это видео в формате MPEG-4 на нашем веб-сайте. Это стало моей новой задачей веб-разработки.

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

Давайте рассмотрим очень простой пример:

Вау! Это все, что вам нужно, чтобы встроить видео на свою страницу?

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

Шаг 1. Добавьте поддержку разных браузеров

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

В настоящее время у вас есть три возможных варианта кодирования видео:

<р>1. H.264 — популярный формат, использующий аппаратное ускорение и поддерживаемый графическими чипами настольных компьютеров и мобильных устройств. Это также формат записи по умолчанию для многих новых видео и мобильных устройств, представленных на рынке. Однако этот формат запатентован, и хотя для некоммерческого использования он остается бесплатным, потенциально он может быть дорогим.

<р>2. Ogg Theora — открытый стандарт, который не запатентован и не требует авторских отчислений. Поддерживается: Firefox 3.5, Chrome 4, Opera 10.5.

<р>3. VP8 (WebM) — новый стандарт, недавно приобретенный Google и выпущенный в виде бесплатного (но все еще запатентованного) формата с открытым исходным кодом. Поддерживается: Firefox 4.0, Chrome 6.0, Opera 10.6.

Вот диаграмма, чтобы было легче следить:

Вам также необходимо конвертировать видео с помощью видеоконвертера.

идентификатор видео = "sampleMovie" width = "640" height = "360" элементы управления предварительной загрузкой >
source src = "HTML5Sample_H264.mov" />

source src = "HTML5Sample_Ogg. ogv" />

source src = "HTML5Sample_WebM.webm" />

видео >

Шаг 2. Управляйте воспроизведением видео с помощью параметров

Как я уже говорил, в HTML5 встраивание видео по существу сводится к использованию одного тега: . Но, как и в случае с любым HTML-тегом, у вас есть множество вариантов параметров.

Вот основные параметры самого тега:

<р>1. SRC — местоположение и имя исходного видео, работает так же, как параметр src для тега.

<р>2. Ширина и высота — (необязательно) размеры видео.

<р>3. Элементы управления — добавляет наложение управления видео по умолчанию. Это полезно, если вы не хотите создавать свой собственный пользовательский элемент управления. Если вы хотите настроить элементы управления проигрывателем, вы можете использовать JavaScript и CSS. Спецификация позволяет манипулировать методами и свойствами, такими как play(), pause(), currentTime, volume, muted и другими.

<р>4. Предварительная загрузка — начинает загрузку видео, как только пользователь переходит на страницу. Для предварительной загрузки просто включите атрибут. Чтобы запретить предварительную загрузку, установите для атрибута значение «none».

<р>5. Автовоспроизведение. Это указывает браузеру начать воспроизведение видео сразу после загрузки страницы.

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

Шаг 3. Добавьте поддержку iOS, Android
и других браузеров устройств

Единственное решение на данный момент – показывать вместо видео анимацию в формате Gif. Приятно знать, что мы можем легко конвертировать видео в Gif!

Идентификатор изображения = RocketGif Style = 'Ширина: 100%; ' BORDER = 0 src = 'rocket.jpg' alt = 'Ваше приложение скоро будет запущено. ' title = 'Ваше приложение скоро будет запущено. '>

Проблема в том, что с анимацией Gif есть две проблемы:

1. Они воспроизводятся только один раз, даже при перезагрузке страницы. Итак, я добавил параметр даты в конец имени Gif, чтобы показывать анимацию при каждой загрузке страницы.

2. Они не воспроизводятся плавно, когда файл загружен не полностью. Поскольку это около 3 МБ, загрузка занимает две секунды. Затем он начинает показывать анимацию.

Я написал простой скрипт, который добавляет анимацию Gif, если пользователь открывает страницу на мобильном устройстве (не на десктопе).

// Проверяем,
мобильный ли клиент
var is_mobile =
navigator . пользовательский агент. сопоставить ( / ( iPhone | iPod | iPad | Android | BlackBerry | IEMobile ) / ) ;

//Предварительно загрузить изображение
var gif = новое изображение ( ) ;

Шаг 4. Добавьте постер к вашему видео

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

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

Шаг 5. Устраните задержки и прерывания воспроизведения видео

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

В реальном мире могут возникнуть проблемы с Wi-Fi, 3G или другими элементами, которые могут привести к зависанию и остановке видео.

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

Это самая сложная часть, но и самая важная.

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

Мы будем использовать событие "canplay".

"Событие canplay возникает, когда браузер может начать воспроизведение указанного аудио/видео (когда он достаточно буферизован для начала)".

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

Вот мой скрипт:

Готово!

Итак, вам интересно увидеть результат?

Вы можете оценить мою работу на нашей странице благодарности, когда вы подписываетесь на бесплатную пробную версию программного обеспечения SherpaDesk Helpdesk Solution.

SherpaDesk дает вам возможность использовать комплексное решение, которое сочетает в себе инструменты, необходимые для более эффективного ведения бизнеса (и первая технология всегда бесплатна!)

Об авторе

Юджин – главный разработчик мобильных приложений в SherpaDesk. Он окончил Днепропетровский национальный университет в области, Украина, где изучал программирование и английский язык.


Другие технологии в его арсенале знаний включают веб-разработку, SQL, Java, базы данных и скрам. В свободное время он любит участвовать в форумах ИТ и службы поддержки в качестве активного участника и блоггера.

SherpaDesk — это универсальное решение службы поддержки по всем вопросам, связанным с поддержкой, управлением проектами и выставлением счетов.

Читайте также: