Вставка видео html5: Как вставить видео в HTML

Содержание

Аудио и видео в HTML5

❮ Назад Вперед ❯

До появления HTML5 звуковые файлы добавляли на веб-страницы, интегрируя фоновый звук при помощи тега <bgsound>. Файл проигрывался во время просмотра страницы, и у пользователя не было возможности выключить. С появлением в HTML5 нового тега <audio> звуковые файлы добавляются со встроенным программным интерфейсом, и нет необходимости подключать сторонние модули.

Для добавления аудиофайлов на веб-страницу используется элемент <audio>. Путь к аудиофайлу указывается атрибутом src, а атрибут controls добавляет панель управления (кнопка запуска, прокрутка, регулятор громкости).

В коде выглядит это так:

<audio src="name.ogg" controls></audio>

Так как не все браузеры поддерживают все аудиоформаты, то аудифайл кодируют с помощью специальных кодеков (программ для преобразования цифровых данных в формат звукового файла или звукового потока) и добавляют файлы одновременно через тег <source> с атрибутом src.

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

<audio controls>
  <source src="name.ogg" type="audio/ogg">
  <source src="name.mp3" type="audio/mpeg">
</audio>

Самыми популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. Несмотря на популярность среди пользователей, телевизионные компании и радиостанции используют более современные кодеки ISO-MPEG, такие как AAC или MPEG-H.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, обеспечивает более высокое качество звучания при той же или более сильной степени сжатия.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, однако недостаточно широко поддерживается аппаратными проигрывателями.

До появления стандарта HTML5 для добавления видео на сайт использовались сторонние плагины вроде QuickTime, RealPlayer или Flash. В HTML5 появился новый тег <video>, который используется для вставки вставки видео на веб-страницу.

В коде это выглядит так:

<video src="example.webm." controls></video>

Атрибут src указывает путь файла, а атрибут controls используется для отображения элементов управления. (Подробнее об атрибутах тега <video>).

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

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

Пример

<video controls>
  <source src="video.mp4" type="video/mp4"><!-- для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7 -->
  <source src="video.webm" type="video/webm"><!-- для Firefox4, Opera, и Chrome -->
  <source src="video.ogv" type="video/ogg"><!-- для старых версий браузеров Firefox и Opera -->
</video>

На данный момент существует 3 основных формата видео: MP4/MPEG-4, OGG и WebM +. Для сжатия видеоданных и их восстановления используются кодеки.

Для видео файла формата MPEG-4 используются видео кодек Н.264 и аудио кодек ААС. Для использования кодеков необходимо получить лицензию.

Для видео файла Ogg используются видео кодек Theora и аудио кодек Vorbis с открытым кодом.

Для видео файлов в формате WebM + используются видео кодек VP8 и аудио кодек Vorbis. Для их использования не требуется лицензии.

Субтитры и заголовки к аудио и видео файлам добавляется при помощи элемента <track>, который используется в качестве дочернего элемента <audio> и <video>.

Для выравнивания видеоплеера на странице, поместите элемент <video> в контейнер <div>, присвойте класс, для которого задайте ширину и высоту, соответственно размерам вашего видео.

Вставка видео в HTML документ

HTML тег — <embed>

Возможные расширения видеофайлов для <EMBED>

.swf — файлы Macromedia Flash
.wmv — Microsoft Windows Media Video
.mov — Quick Time Movie, Apple
.mpeg — созданные Moving Pictures Expert Group.

Наиболее часто используются: .mpeg and .swf, так как это клмпактные форматы.

Атрибуты тега <EMBED>

autostart — автоматический старт просмотра по окончании загрузки странички. Может принимать значения: true или false.
hidden — скрывать или нет кнопки (true или false)
volume — громкость, может быть от 0 до 100
loop- разрешить автоматический повтор (неограниченное количесттво раз), может быть: true или false.
playcount — разрешить автоматический повтор несколько раз, например: playcount=»2″ означает, что видео проиграится 2 раза подряд.

HTML5 тег — <video>

В HTML5 для вставки видеоматериалов в документ удобно использовать тег <video>.

<video width=»320″ height=»240″ controls> <source src=»movie.mp4″ type=»video/mp4″> <source src=»movie.ogg» type=»video/ogg»> Your browser does not support the video tag. </video>

Сейчас HTML5 <video> tag, поддеоживает 3 типа видеофайлов:

mp4 — MIME-type video/mp4
webm — MIME-type video/webm
ogg — MIME-type video/ogg

Атрибуты тега video

autoplay — если присутствует, то видео начинает проигрываться сразу же после загрузки страницы.
autobuffer — если присутствует, то видео начнет загружаться с сервера, однако не начнет проигрываться до тех пор, пока пользователь не нажмет на кнопку play.
poster — указывает путь к изображению, которое показывается, когда видеофайл отсутствует или еще не запущен.
controls — Отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения/паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).
width — ширина области просмотра
height — высота области просмотра.

Поддержка браузеров. Кодеки.

Форматы аудио и видео для файлов, используемых в теге <video>

Браузеры компьютеров

Свойство	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	3. 0	3.5 (1.9.1)	9.0	10.50	3.1
<audio>: PCM in WAVE	(Yes)	3.5 (1.9.1)	No support	10.50	3.1
<audio>: Vorbis in WebM	(Yes)	4.0 (2.0)	No support	10.60	3.1[1]
<audio>: Streaming Vorbis/Opus in WebM via MSE	?	36.0 (36.0)[2]	?	?	?
<audio>: Vorbis in Ogg	(Yes)	3.5 (1.9.1)	No support	10. 50	No support
<audio>: MP3	(Yes)[4]	(Yes)[5]	9.0	(Yes)	3.1
<audio>: MP3 in MP4	?	?	?	?	(Yes)
<audio>: AAC in MP4	(Yes)[6]	(Yes)[7]	9.0	(Yes)	3.1
<audio>: Opus in Ogg	27.0	15.0 (15.0)	?	?	?
<audio>: FLAC	No support	51 (51)	No support	No support	No support
<audio>: FLAC in Ogg	No support	51 (51)	No support	No support	No support
<video>: VP8 and Vorbis in WebM	6. 0	4.0 (2.0)	9.0[8]	10.60	3.1[9]
<video>: VP9 and Opus in WebM	29.0	28.0 (28.0)[36]	?	(Yes)	?
<video>: Streaming WebM via MSE	?	42.0 (42.0)[35]	?	?	?
<video>: Theora and Vorbis in Ogg	(Yes)	3.5 (1.9.1)	No support	10.50	No support
<video>: H.264 and MP3 in MP4	(Yes)[4]	(Yes)[10]	9.0	(Yes)	(Yes)
<video>: H. 264 and AAC in MP4	(Yes)[4]	(Yes)[11]	9.0	(Yes)	3.1
<video>: FLAC in MP4	?	51 (51)	?	?	?

Браузеры мобильных устройств

Свойство	Android	Firefox Mobile (Gecko)	Firefox OS (Gecko)	IE Mobile	Opera Mobile	Opera Mini	Safari Mobile	Chrome for Android
Basic support	2.3	24.0	1.0.1	10.0	11.0	(Yes)[13]	3. 2	29.0
<audio>: PCM in WAVE	?	24.0	1.0.1	No support	No support	(Yes)[14]	3.2	?
<audio>: Vorbis in WebM	?	24.0	1.0.1	No support	11.0	(Yes)[15]	No support	?
<audio>: Streaming Vorbis in WebM via MSE	?	?	?	?	?	?	?	?
<audio>: Vorbis in Ogg	?	24.0	1.0.1	No support	11.0	(Yes)[16]	No support	?
<audio>: MP3	?	(Yes)[17]	(Yes)[18]	10. 0	?	(Yes)[19]	3.2	?
<audio>: MP3 in MP4	?	?	?	?	?	?	(Yes)	?
<audio>: AAC in MP4	?	(Yes)[20]	(Yes)[21]	10.0	?	(Yes)[22]	(Yes)	?
<audio>: Opus in Ogg	No support	24.0	No support	No support	No support	(Yes)[23]	No support	No support
<video>: VP8 and Vorbis in WebM	2.3	24. 0	1.0.1	No support	16.0	(Yes)[24]	No support	29.0
<video>: VP9 and Opus in WebM	?	?	?	?	?	?	?	?
<video>: Streaming WebM via MSE	?	42.0 (42.0)	?	?	?	?	?	?
<video>: Theora and Vorbis in Ogg	No support	24.0	1.0.1	No support	No support	(Yes)[25]	No support	No support
<video>: H. 264 and MP3 in MP4	(Yes)[26]	24.0[33]	(Yes)[27]	10.0	16.0[28]	(Yes)[29]	(Yes)	29.0
<video>: H.264 and AAC in MP4	(Yes)[30]	24.0[34]	(Yes)[31]	10.0	16.0[28]	(Yes)[32]	3.2	29.0
<video>: FLAC in MP4	?	51.0 (51)	?	?	?	?	?	?

Повышение производительности анимированных GIF-файлов с помощью HTML5-видео — Smashing Magazine

Чтение через 10 мин. Ролики, Средства массовой информации, Techniques
Поделиться в Twitter, LinkedIn

Об авторе

Айо Исайя — разработчик программного обеспечения, проявляющий большой интерес к веб-технологиям, безопасности и производительности. Увлекается спортом, книгами и техникой. Вы можете узнать больше… Больше о Ayo ↬

Мы обратили внимание на то, что эта статья представляет собой перефразированную версию статьи, опубликованной на сайте Google Web Fundamentals и написанной нашим другом Джереми Вагнером. Оригинал можно найти здесь, и мы рекомендуем его вам.

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

— Рэйчел Эндрю, от имени редакции

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

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

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

Даже если вы попытаетесь настроить качество и длину GIF-файла с помощью такого инструмента, как Gifsicle, может быть трудно сократить его до приемлемого размера. Это причина, по которой веб-сайты с большим количеством GIF, такие как Giphy, Imgur и им подобные, не используют фактический формат GIF, а скорее конвертируют его в видео HTML5 и вместо этого предоставляют его пользователям. Как обнаружила команда инженеров Pinterest, преобразование анимированных GIF-файлов в видео может сократить время загрузки и улучшить плавность воспроизведения, что сделает работу пользователя более приятной.

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

Преобразование анимированных файлов GIF в видео

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

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

Однако, поскольку 9Тег 0043

Давайте продолжим и конвертируем анимированный GIF в MP4 и WebM. Есть несколько онлайн-инструментов, которые могут помочь вам в этом, но многие из них используют ffmpeg под капотом, поэтому мы пропустим посредника и просто используем его. ffmpeg — это бесплатный инструмент командной строки с открытым исходным кодом, предназначенный для обработки видео- и аудиофайлов. Его также можно использовать для преобразования анимированного GIF в видеоформаты.

Чтобы узнать, есть ли на вашем компьютере ffmpeg , запустите терминал и выполните команду ffmpeg . Это должно отображать некоторую диагностическую информацию, в противном случае вам необходимо установить ее. Инструкции по установке для Windows, macOS и Linux можно найти на этой странице. Поскольку мы будем конвертировать в WebM, вам нужно убедиться, что любая сборка ffmpeg , которую вы устанавливаете, скомпилирована с помощью libvpx.

Чтобы следовать командам, включенным в эту статью, вы можете использовать любой анимированный GIF-файл, лежащий на вашем компьютере, или взять этот, размер которого составляет чуть более 28 МБ. Давайте начнем с преобразования GIF в MP4 в следующем разделе.

Преобразование GIF в MP4

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

 ffmpeg -i анимированный.gif video.mp4

Через несколько секунд в текущем каталоге должен появиться новый видеофайл, в зависимости от размера конвертируемого GIF-файла. Флаг -i указывает путь к входному файлу GIF, после чего указывается выходной файл (в данном случае video. mp4). Выполнение этой команды на моем 28-мегабайтном GIF-файле создает файл MP4 размером всего 536 КБ, 98% уменьшение размера файла при примерно том же визуальном качестве.

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

 ffmpeg -i анимированный.gif -b:v 0 -crf 25 video.mp4

Как видите, в приведенной выше команде есть пара новых флагов по сравнению с предыдущей. -b:v обычно используется для ограничения выходного битрейта, но при использовании режима CRF он должен быть установлен на 0. Флаг -crf управляет качеством выходного видео. Он принимает значение от 0 до 51; чем ниже значение, тем выше качество видео и размер файла.

Выполнение приведенной выше команды на тестовом GIF-файле урезает видеовыход до 386 КБ без заметной разницы в качестве. Если вы хотите еще больше обрезать размер, вы можете увеличить значение CRF. Просто имейте в виду, что более высокие значения снизят качество видеофайла.

Преобразование GIF в WebM

Вы можете преобразовать свой файл GIF в WebM, выполнив в терминале следующую команду:

 ffmpeg -i анимированный.gif -c vp9 -b:v 0 -crf 41 video.webm

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

Кроме того, в этом случае я установил значение CRF на 41, поскольку значения CRF не обязательно дают одинаковое качество для разных видеоформатов. Это конкретное значение приводит к тому, что файл WebM на 16 КБ меньше, чем MP4, с примерно таким же визуальным качеством.

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

Замена анимированных GIF-файлов видео в браузере

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

Они воспроизводятся автоматически
Они непрерывно зацикливаются
Они молчат

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

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

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

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

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

 <цикл автовоспроизведения видео без звука playsinline>
     webm" type="video/webm">
    
    Ваш браузер не поддерживает видео HTML5.
    Нажмите здесь, чтобы просмотреть оригинальный GIF

Или вы можете просто добавить файл GIF прямо в tag:

 <автовоспроизведение видео с отключенным звуком playsinline>

Теперь, когда мы рассмотрели, как эмулировать анимированные GIF-файлы в браузере с видео HTML5, давайте рассмотрим несколько потенциальных недостатков этого в следующем разделе.

Потенциальные недостатки

Есть несколько недостатков, которые необходимо учитывать, прежде чем использовать HTML5-видео в качестве замены GIF. Это явно не так удобно, как просто загрузить гифку на страницу и смотреть, как она работает везде. Сначала вам нужно закодировать его, и может быть сложно реализовать автоматизированное решение, которое хорошо работает во всех сценариях.

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

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

Кроме того, существует довольно много ограничений на автоматическое воспроизведение видео, особенно на мобильных устройствах. Атрибут muted на самом деле требуется для автоматического воспроизведения видео в Chrome для Android и iOS Safari, даже если видео не содержит звуковой дорожки, а если автовоспроизведение запрещено, пользователь увидит только пустое место там, где должно было быть видео. . Примером может служить режим экономии трафика в Chrome для Android, в котором автовоспроизведение видео не будет работать, даже если вы все настроили правильно.

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

Резюме

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

Есть веб-сайты, которые уже делают это:

Twitter конвертирует анимированные GIF-файлы в файлы MP4 при загрузке
Производительность GIF была улучшена на Pinterest путем преобразования их в видео

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

Как встроить самостоятельно размещенное видео HTML5

В январе 2015 года YouTube объявил, что по умолчанию отказывается от Flash для видео HTML5. Это означает, что теперь веб-мастера могут использовать встроенный проигрыватель YouTube для потоковой передачи видео на своих сайтах и быть уверенными, что не возникнет проблем с мобильным воспроизведением. Тем не менее, проигрыватель YouTube — не лучшее решение для показа видео на веб-сайте, если:

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

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

Подготовьте видеофайлы в нужных форматах

Спецификация HTML5 требует, чтобы видео было представлено в трех видеоформатах: MP4, WebM и OGG. Он обеспечивает совместимость со всеми основными браузерами.

Как видно из таблицы, формат MP4 поддерживается всеми основными браузерами. Тем не менее, не каждое видео в формате MP4 будет воспроизводиться с помощью HTML5-тега «

Для формата MP4 необходимо выбрать видеокодек H.264 и аудиокодек AAC, чтобы убедиться, что видео будет транслироваться во всех браузерах. Если звук закодирован кодеком MP3, видео MP4 будет воспроизводиться без звука в Safari и Firefox.

Поэтому для веб-интеграции также рекомендуется иметь как минимум два качества видео, например MP4 и WebM, или MP4, или OGG. Браузер будет использовать первый распознанный формат.

Для подготовки видеофайлов вы можете использовать Freemake Video Converter. Это бесплатное программное обеспечение имеет опцию «в HTML5», которая позволяет веб-мастерам получать файлы, совместимые с HTML5, в связке.

Загрузите файлы на свой сервер

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

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

Добавить проигрыватель HTML5 на веб-страницу

Существует множество способов получить проигрыватель HTML5 для встраивания. Давайте начнем с вашего ручного кодирования. Вот как выглядит пример веб-плеера HTML5:

<управление видео> Ваш браузер не поддерживает видео тег.

Вставив этот код между тегами и с соответствующими местами назначения видеофайлов, вы получите что-то вроде этого:

Настройте проигрыватель (необязательно)

Элемент ‘