From d192fb918b0e2aa8869de6dcc59de8464b6e879a Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 11 Dec 2020 18:59:39 -0500 Subject: dump 2020-12-11 --- .../video_and_audio_content/index.html | 84 ++++++++++++---------- .../index.html" | 22 +++--- .../index.html" | 64 +++++++++-------- .../javascript/asynchronous/async_await/index.html | 42 ++++++----- 4 files changed, 116 insertions(+), 96 deletions(-) (limited to 'files/ru/learn') diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index 1b7cfb7af6..e37ffaabd4 100644 --- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -7,13 +7,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
-

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

+

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

- + @@ -24,14 +24,14 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

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

-

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

+

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

-

Самостоятельное решение решило бы большую часть этого, если сделано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и{{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.

+

Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и {{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.

-

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

+

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

-

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

+

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

Элемент <video>

@@ -48,7 +48,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
{{htmlattrxref("src","video")}}
Точно так же, как для элемента {{htmlelement("img")}} , атрибут src (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.
{{htmlattrxref("controls","video")}}
-
Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  эпилепсией). Вы должны либо использовать атрибут controls,  чтобы использовать встроенный в браузер интерфейс управления  или создать собственный интерфейс, используя соответствующие  JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.
+
Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  эпилепсией). Вы должны либо использовать атрибут controls,  чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие JavaScript API. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.
Параграф внутри тегов <video>
Это называют резервный контент — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <video>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.
@@ -57,14 +57,16 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content

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

-

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

+

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

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

-

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

+

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

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

+

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

+

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

-

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

+

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

-
-

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

-
+

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

+ +

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

-

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

+

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

+ +

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

-

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

+

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

-

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

+

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

+ +

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

+ +

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

+ +

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

<video controls>
   <source src="rabbit320.mp4" type="video/mp4">
@@ -116,20 +126,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 
На выходе получим нечто, подобное этому:

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

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

 
 

- 
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}

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

- 
{{htmlattrxref("autoplay","video")}}

+ 
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}

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

+ 
{{htmlattrxref("autoplay","video")}}

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

- 
{{htmlattrxref("loop","video")}}

+ 
{{htmlattrxref("loop","video")}}

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

- 
{{htmlattrxref("muted","video")}}

+ 
{{htmlattrxref("muted","video")}}

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

- 
{{htmlattrxref("poster","video")}}

+ 
{{htmlattrxref("poster","video")}}

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

- 
{{htmlattrxref("preload","video")}}

+ 
{{htmlattrxref("preload","video")}}

  

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

 
@@ -164,15 +174,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:

 
 
    
- 
  • Элемент {{htmlelement ("audio")}} не поддерживает атрибуты width / height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
    • 
- 
  • Он также не поддерживает атрибут​​​​​ poster- опять же, из-за отсутствия визуального компонента. 
    • 
+ 
  • Элемент {{htmlelement ("audio")}} не поддерживает атрибуты width и height - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
    • 
+ 
  • Он также не поддерживает атрибут​​​​​ poster опять же, из-за отсутствия визуального компонента. 
    • 
 

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

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

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

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

 
 
    
  
  • У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).
    • 
@@ -180,20 +190,20 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
  
  • Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.
    • 
 

 
-
Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио / видео? Благодаря HTML5 видео, вы можете, с форматом WebVTT и элементом {{htmlelement ("track")}}.

+
Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом WebVTT и элементом {{htmlelement ("track")}}.

 
 

-
Замечание: "Транскрибировать" значит записывать устную речь в форме письменной.Получившийся в результате текст есть 'расшифровка'.

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

 

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

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

 
 

- 
субтитры

+ 
субтитры

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

- 
титры

+ 
титры

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

- 
рассчитанные описания

+ 
рассчитанные описания

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

 

 
@@ -232,15 +242,15 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 
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."

 
-
Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Ян Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.

+
Подробнее читайте в разделе добавление титров и субтитров к видео HTML5. Вы можете найти пример, который соответствует этой статье в Github, написанной Яном Девлином (см. также исходный код). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.

 
 

-
Примечание: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.

+
Примечание: Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.

 

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

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

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

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

 
@@ -248,7 +258,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 
 
    
  
  1. Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
    2. 
- 
  2. Создайте новый HTML файл в том же каталоге, и назвать его index.html.
    3. 
+ 
  3. Создайте новый HTML файл в том же каталоге и назовите его index.html.
    4. 
  
  4. Добавьте элементы <audio> и <video> на страницу; чтобы они отображали элементы управления браузером по умолчанию.
    5. 
  
  5. Введите оба варианта элемента <source>, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать type атрибуты.
    6. 
  
  6. Дайте элементу <video> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.
    7. 
diff --git "a/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html" "b/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html"
index 10ab133f74..a3a445dfc7 100644
--- "a/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html"
+++ "b/files/ru/learn/html/multimedia_and_embedding/\320\264\320\276\320\261\320\260\320\262\320\273\320\265\320\275\320\270\320\265_r_graphics_to_the_web/index.html"
@@ -57,7 +57,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th
 
 
    В качестве простого примера, следующий код создает круг и прямоугольник:
    
 
-
    <svg version="1.1"
+
    <svg version="1.1"
      baseProfile="full"
      width="300" height="200"
      xmlns="http://www.w3.org/2000/svg">
@@ -100,7 +100,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th
 
 
    Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут height или width (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы еще этого не делали, пожалуйста, прочтите Изображения в HTML.
    
 
-
    <img
+
    <img
     src="equilateral.svg"
     alt="triangle with all three sides equal"
     height="87px"
@@ -125,23 +125,23 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_th
 
 
    Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в src атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:
    
 
-
    <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
    
+
    <img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
    
 
 
    Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведенном коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
    
 
-
    background: url("fallback.png") no-repeat center;
+
    background: url("fallback.png") no-repeat center;
 background-image: url("image.svg");
 background-size: contain;
    
 
 
    Подобно методу <img>, описанному выше, вставка SVG с использлованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
    
 
-
    Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная сатья укажет вам верное направление.
    
+
    Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то данная статья укажет вам верное направление.
    
 
 
    Как включить SVG в ваш HTML код
    
 
 
    Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой прием иногда называют встраиванием SVG (SVG inline или inlining SVG). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <svg></svg> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
    
 
-
    <svg width="300" height="200">
+
    <svg width="300" height="200">
     <rect width="100%" height="100%" fill="green" />
 </svg>
 
    
@@ -173,7 +173,7 @@ background-size: contain;
    
 
 
    Вот краткий обзор:
    
 
-
    <iframe src="triangle.svg" width="500" height="500" sandbox>
+
    <iframe src="triangle.svg" width="500" height="500" sandbox>
     <img src="triangle.png" alt="Triangle with three unequal sides" />
 </iframe>
    
 
@@ -195,7 +195,7 @@ background-size: contain;
Предпосылки:Базовая компьютерная грамотность, установка базового ПО, базовые знания  работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML.Базовая компьютерная грамотность, установка базового ПО, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML.
Задача: