В процессе перевода.

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

Предпосылки: Базовая компьютерная грамотность, basic software installed, базовые знания  working with files, знакомство с основами HTML (как описано в Getting started with HTML) и Images in HTML.
Задача: Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. 

Аудио и видео в Интернете

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

A native solution would solve much of this if done right. Fortunately, a few years later the HTML5 specification had such features added, with the <video> and <audio> elements, and some shiny new JavaScript APIs for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

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

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

Элемент <video>

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

<video src="rabbit320.webm" controls>
  <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p> 
</video>

Описание параметров:

src
Точно так же, как для элемента <img> , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.
controls
Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  эпилепсией). Вы должны либо использовать атрибут controls,  чтобы использовать встроенный в браузер интерфейс управления  или создать собственный интерфейс, используя соответствующие  JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.
Параграф внутри тегов <video>
Это называют резервный контент — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <video>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.

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

A simple video player showing a video of a small white rabbit

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

Поддержка нескольких форматов

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

Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются форматами контейнеров. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.

Аудио и видео треки также находятся в разных форматах, например:

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

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

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

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

Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео)  широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают  MP3  по крайней мере до 2017 года, и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держетелями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.

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

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Ваш браузер не подддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p>
</video>

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

Каждый элемент <source> также имеет атрибут type. Он не обязательный, но рекомендуется его включать — он содержит MIME types видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если type не включен, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.

Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространенные MIME types.

Другие параметры <video>

Есть ряд других параметры, которые вы можете включить в HTML5 элемент video. Взгляните на наш третий пример:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

На выходе получим нечто, подобное этому:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Новые параметры:

width and height
Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью  CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.
autoplay
This attribute makes the audio or video start playing right away while the rest of the page is loading. You are advised not to use autoplaying video (or audio) on your sites, because users can find it really annoying.
loop
This attribute makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
muted
This attribute causes the media to play with the sound turned off by default.
poster
This attribute takes as its value the URL of an image, which will be displayed before the video is played. It is intended to be used for a splash or advertising screen.
preload

this attribute is used in the element for buffering large files. It can take one of 3 values:

  • "none" does not buffer the file
  • "auto" buffers the media file
  • "metadata" buffers only the metadata for the file

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay attribute in the live version — if the video starts to play as soon as the page loads, you don't get to see the poster!

The <audio> element

The <audio> element works in exactly the same way as the <video> element, with a few small differences as outlined below. A typical example might look like so:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

This produces something like the following in a browser:

A simple audio player with a play button, timer, volume control, and progress bar

Итак,

Note: You can run the audio demo live on Github (also see the audio player source code.)

This takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. Other differences from HTML5 video are as follows:

  • The <audio> element doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to.
  • It also doesn't support the poster attribute — again, no visual component.

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

Displaying video text tracks

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

  • Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.
  • Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
  • People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the WebVTT format and the <track> element.

Note: "Transcribe" and "transcript" mean to write down spoken words as text.

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues, and you can display different types for different purposes, the most common being:

subtitles
Translations of foreign material, for people who don't understand the words spoken in the audio.
captions
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
timed descriptions
Text for conversion into audio, to serve people with visual impairments.

A typical WebVTT file will look something like this:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

To get this displayed along with the HTML media playback, you need to:

  1. Save it as a .vtt file in a sensible place.
  2. Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written the subtitles in.

Here's an example:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

This will result in a video that has subtitles displayed, kind of like this:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español. 

Note: Text tracks also help you with SEO, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

Active learning: Embedding your own audio and video

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

We would like you to:

  1. Save your audio and video files in a new directory on your computer.
  2. Create a new HTML file in the same directory, called index.html.
  3. Add <audio> and <video> elements to the page; make them display the default browser controls.
  4. Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

Summary

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.

See also

 

In this module

 

Метки документа и участники

 Внесли вклад в эту страницу: SedovDP, FeruzOripov
 Обновлялась последний раз: SedovDP,