Плеер для сайта html5 — 15 лучших решений

Содержание:

Как добавить видео — инструкция
HTML Tags
Вставка видео в HTML5 без плеера
What is Video Streaming and How Does it Work?
HTML Теги
Как использовать audio и video в HTML5
Создание функциональности с помощью JavaScript
Фреймы: вставка видео с YouTube
Basics
Definition and Usage
Управление цифровыми правами (зашифрованные мультимедийные расширения)
Атрибуты
HTML Tags
Что ещё можно сделать
HTML Tags
HTML Reference
HTML Tags
HTML Audio/Video Properties

Как добавить видео — инструкция

Заходим на Ютуб и находим видео, которое нас интересует. Находим под видео кнопку «Поделиться». Для вставки на сайт выбираем «HTML-код».

Можно сразу скопировать полученный код и добавить на блог, но я рекомендую перед этим перейти в настройки. Нажимаем «Еще».

Нам открывается раздел Youtube с настройками видео.

Поясню что они значат и какие из них вам нужны.

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

Помимо видимых настроек, есть те, которые скрыты — дополнительные настройки видео:

autoplay=1 — начинает воспроизводить видео сразу после загрузки страницы. Не рекомендую;
loop=1 — зацикливает видео;
fs=0 — запрещает разворачивать видео на весь экран. Убирает соответствующую кнопку на панели управления;
fmt=6 — задает качество видео. fmt=18 — среднее, fmt=22 — наилучшее. Полезно применять только если у вас красивый красочный ролик, смысл которого именно передать красоту. Во всех остальных случаях советую оставить это на выбор зрителя;
iv_load_policy=3 — один из самых полезных параметров. Отключает аннотации к видео, такие как ссылки на канал автора и его другие ролики. Но не отключает рекламу Google.

Добавлять параметры просто: в коде после идентификатора видео добавляем знак «?» и пишем параметры, перечисляя их через «&». Ниже правильный пример:

XHTML

1	<iframe width=»560″height=»315″src=»https://www.youtube.com/embed/aAhPaiajwDY?showinfo=0&autoplay=1&iv_load_policy=3″frameborder=»0″allowfullscreen></iframe>

После настроек, копируем полученный код и вставляем на страницу сайта, предварительно перейдя в режим html-кода. В админке WordPress переключается здесь:

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

Если у вас сайт написан на одном html, или это просто локальных html-файл — инструкция точно такая же. Повторяйте.

HTML Tags

Топ 5 open source html5 видеоплееров на 2018 год

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Вставка видео в HTML5 без плеера

Проверка скорости сайта — 15 лучших инструментов тестирования

А так можно вставить видео на страницу с HTML5, здесь атрибут poster — это путь к изображению-заставке:

<video width="400" height="300" controls poster="images/zastavka.png">
    <source src="papka/name.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"'>
    <p>Ваш браузер не поддерживает просмотр</p> 
    <a href="papka/name.mp4">Скачать видео</a>
</video>

Чтобы добиться воспроизведения ролика в различных браузерах, видео необходимо конвертировать, а в папку поместить 3 видеофайла в разных форматах. Это можно сделать онлайн, например, здесь: online-convert.com.

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

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

What is Video Streaming and How Does it Work?

Переводчик по фото: топ решений на все языки

Video streaming allows users to watch videos over the internet.

Since the 1990s, it’s been possible to access video media content from our internet browsers.

As a refresher, streaming a video is playing the video online. This process is unique in the sense that viewers can begin watching the video before it is completely downloaded, and the rest of the file downloads in real-time.

This process affords the viewer a steady stream of content, without making them wait for the entire file to download locally before viewing.

Over the years, the software technology behind this process has evolved to make the experience better for users. This has helped to better the video quality, reduce buffering, and improve the overall functionality of the video player.

That said, there are three methods for online video streaming. Let’s check them out.

1. Using a Proprietary Format

The first method for video streaming is using a proprietary format streamed from a particular website that is exclusive to that site.

This method refers to files like .mov, .rm, or .wmv. When broadcasters first presented videos via the internet, most browsers did not have built-in video players. In most cases, websites could choose the video format with which to work.

From there, they would just provide the player and the video on the web page itself. However, some formats required a dedicated player (such as Apple QuickTime for .mov formats). Even videos that worked without a dedicated player were not easy to share in those early streaming days.

This method is pretty much obsolete, but it is important to mention it since it is part of live streaming history.

2. Using an Intermediate Player

Another method for online streaming is using an intermediate player. YouTube is a perfect example.

YouTube was first launched in 2005, and over the following decade, the company has helped make streaming video mainstream. Fifteen years later, YouTube is still quite popular.

When users upload a video to YouTube, viewers access the content through YouTube’s embedded player. Likewise, viewers can share the video content via a code that YouTube provides.

However, modern browsers now include embedded video players of their own. This means that it’s not always necessary for a website to provide the player.

Although YouTube is free, the platform poses significant challenges for serious broadcasters and businesses. Naming only a few, these drawbacks include third-party branding with your video, loss of ownership of your content, and lack of monetization features.

These limitations pose the need for an alternate solution for broadcasters who want to live stream on their own site.

3. Using HTML5 Video Streaming

The most modern method is HTML5 video streaming. This is the most innovative approach and it makes it possible to stream on just about any sort of device.

With HTML5 video streaming, the website hosting the content uses native HTTP to directly stream the media to viewers.

Content tags (e.g., <video> tag) are part of the HTML code. Thus, using the <video> tag creates a native HTML5 video player within your browser. These tags provide direction to the HTTP protocol as to what to do with this content. HTTP displays the text and an audio player plays audio content.

Also, HTML tags have various attributes, or parameters, which provide further detail on how to present the content. For example, with the <img> tag, you can specify the size of the image.

More recently, HTML5 has expanded on the media capabilities of basic HTML. For example, enhancements to the <img> tag and the new <video> tag provide content creators more flexibility and ease in presenting media content.

This flexibility allows broadcasters to deliver media without worrying about which browser a given visitor uses.

HTML Теги

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><menu><menuitem><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Как использовать audio и video в HTML5

Чтобы создать плеер, достаточно такого кода для аудио:

И такого — для видео:

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

Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов

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

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

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

controls — панель управления;
autoplay — автовоспроизведение;
loop — цикличность;
muted — выключение звука;
poster — обложка видео. Если не указать, будет выбран случайный кадр;
preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент <track>, который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

default — указывает на дорожку, которая используется по умолчанию;
kind — тип файла, можно указать следующие значения:
subtitles — субтитры (стоит по умолчанию),
captions — субтитры для глухонемых,
chapters — название глав и их временные рамки,
descriptions — звуковое описание происходящего для слепых,
metadata — метаданные;
label — название дорожки;
src — путь к файлу;
srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

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

Поэтому мы подключаем JS и пишем свой интерфейс.

Создание функциональности с помощью JavaScript

На этом этапе вы должны снова сохранить проект, создать новый файл и назвать его «video-player.js». Сохраните файл в той папке, которую используете для этого проекта.

Затем нужно связать файл JavaScript с исходным файлом HTML5 строкой между тегом <link> и закрывающим тегом <head>. Например: <script type = «text / javascript» src = «video-player.js»> </ script>:

В приведенных выше строках JavaScript-кода я сосредоточился только на кнопке воспроизведения.

Сначала мы вводим идентификатор элемента, с которым хотим работать в первую очередь. В нашем случае это идентификатор «play-button». Затем необходимо прописать форму кнопке через GetElementbyID.

Далее, когда зритель нажимает на кнопку воспроизведения, мы обрабатываем «Click» с помощью метода addEventListener. Функция «playOrPause» заставляет кнопку «Воспроизвести» работать, как обычную кнопку воспроизведения, а также как кнопку «Пауза».

Затем в коде создания плеера для сайта вы описываете функцию playOrPause. Если видео приостановлено, нажатие кнопки активирует воспроизведение. Если не приостановлено (блок «else»), нажатие кнопки «Воспроизвести» остановит воспроизведение.

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

ВЛВиктория Лебедеваавтор-переводчик статьи «How to Build an HTML5 Video Player from Scratch»

Фреймы: вставка видео с YouTube

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

Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

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

Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

Размер видео. Из раскрывающегося списка выберите нужную ширину и высоту. Если подходящего варианта нет, то щёлкните на пункте Другой размер и задайте его в пикселях, введя значения в поля, появившиеся справа от списка.

Показать похожие видео после завершения просмотра. По умолчанию флажок установлен, а это значит, что когда ролик закончится, внутри фрейма появятся картинки со ссылками на другие ролики схожей тематики (релевантность определяет YouTube). Если вы не хотите этого, снимите флажок.

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

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

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

Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

Что это означает?

<iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
width — значение атрибута определяет ширину фрейма.
height — задаёт высоту.
src — содержит ссылку на видеоролик.
frameborder — устанавливает ширину рамок фрейма.
allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

Мы получим:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

Basics

1.1 Initial Document Setup

Go ahead and create a new html document and add the basic sytnax in it like so:

<!DOCTYPE html>
<html>
<head>
	<title>HTML5 Video Tag Example</title>
</head>
<body>

<!-- STYLE SECTION -->

<style type="text/css">

</style>

<!-- HTML SECTION -->

</body>
</html>

1.2 Understanding the Attributes

A Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.

If this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

The height of the video’s display area, in CSS pixels.

A Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.

A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.

A TimeRanges object indicating all the ranges of the video that have been played.

A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn’t specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.

The URL of the video to embed. This is optional; you may instead use the element within the video block to specify the video to embed.

The width of the video’s display area, in CSS pixels.

1.3 Media Formats Supported

1. WebM
The WebM format is based on a restricted version of the Matroska container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.

video/webm
A WebM media file containing video (and possibly audio as well).

2. Ogg Theora Vorbis
The Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.

WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5/3.6 don’t support WebM, but do support Ogg.)

video/ogg
An ogg file containing video (and possibly also audio).

3. MP4 H.264
The MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox/Firefox for Android/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.

1.4 A Basic Application

A very basic application where we insert a video into a webpage would be the following:

<!-- HTML SECTION  -->
<video src="videos/minions.mp4" controls></video>
<!-- src to locate the video, controls attribute to show video controls -->

In the top left side of your browser the video would show and require to press the play button to start:

Basic Video in HTML5

Definition and Usage

The attribute specifies the width of a video player, in pixels.

Tip: Always specify both the and
attributes for videos. If these attributes are set, the required space for the
video is reserved when the page is loaded. However, without these attributes,
the browser does not know the size of the video, and cannot reserve the
appropriate space to it. The effect will be that the page layout will change
during loading (while the video loads).

Note: Do not rescale video with the and attributes!
Downsizing a large video with these attributes forces a user to
download the original video (even if it looks small on the page). The correct
way to rescale a video is with a program, before using it on a web page.

Управление цифровыми правами (зашифрованные мультимедийные расширения)

HTML поддерживает управление цифровыми правами (DRM, ограничение использования контента) через HTML5 Encrypted Media Extensions (EME). Добавление DRM вызывает споры, потому что оно позволяет ограничить свободу пользователей использовать носители, ограниченные DRM, даже если добросовестное использование дает пользователям законное право на это. Главный аргумент в одобрении W3C EME заключался в том, что видеоконтент в противном случае доставлялся бы в плагинах и приложениях, а не в веб-браузере.

В 2013 году Netflix добавила поддержку видео HTML5 с использованием EME, помимо старого метода доставки с использованием плагина Silverlight (также с DRM).

Атрибуты

autoplay:

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

<video autoplay>
<video autoplay="autoplay">
<video autoplay="">

Пример »

controls:

Отображает элементы управления воспроизведением, включающие в себя: запуск, паузу, полосу прокрутки, громкость звука, включение полноэкранного режима, титры/субтитры (при наличии) и звуковую дорожку (при наличии). Значения для логического атрибута controls можно задавать следующими способами:

<video controls>
<video controls="controls">
<video controls="">

Пример »

height:

Устанавливает высоту видеоплеера в пикселях (пример: height=»200″).
Пример »

loop:

Указывает, что воспроизведение будет начинаться сначала, каждый раз, после завершения (повтор воспроизведения). Значения для логического атрибута loop можно задавать следующими способами:

<video loop>
<video loop="loop">
<video loop="">

Пример »

muted:

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

<video muted>
<video muted="muted">
<video muted="">

Пример »

Примечание: атрибут muted не поддерживается в IE9 и более ранних версиях.

poster:

Указывает URL-адрес изображения (картинки), которое будет отображаться пока видеофайл загружается или пока пользователь не нажмет кнопку воспроизведения. Если атрибут не установлен, то браузер отображает первый кадр видеоролика.
Пример »

preload:

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

auto — загрузка видеофайла начнется после загрузки страницы
metadata — сбор информации о видеофайле: размер, первый кадр, список воспроизведения, длительность
none — загрузка видеофайла начнется только после щелчка мыши по кнопке воспроизведение

Пример »

Примечание: атрибут preload не поддерживается браузером Internet Explorer.

src:

Определяет путь к нужному видеофайлу (путь может быть либо либо ).
Пример »

width:

Устанавливает ширину видеоплеера в пикселях (пример: width=»200″).
Пример »

Тег <video> так же поддерживает Глобальные атрибуты и События

HTML Tags

Что ещё можно сделать

Включить режим повышенной конфиденциальности

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

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

Обратите внимание, что Условия использования YouTube API и правила для разработчиков распространяются и на встроенный проигрыватель. Вот как включить режим повышенной конфиденциальности:

Вот как включить режим повышенной конфиденциальности:

В коде HTML измените домен встроенного видео с https://www.youtube.com на https://www.youtube.com.
Для администраторов сети: добавьте youtube.com в список разрешенных сайтов в настройках брандмауэра.
Если вы встраиваете видео в приложение, используйте экземпляр встроенного проигрывателя WebView

Режим повышенной конфиденциальности пока доступен только для встроенных проигрывателей на сайтах.

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

Пример:

До

frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>

После

frameborder=»0″ allow=»autoplay; encrypted-media» allowfullscreen></iframe>

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

Включить автоматическое воспроизведение

Чтобы видео воспроизводилось автоматически, вставьте в код фрагмент &autoplay=1. Он должен следовать за идентификатором ролика, который расположен после фрагмента embed/.

Автовоспроизведение не учитывается при подсчете просмотров видео.

Пример:

Настроить воспроизведение с определенного момента

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

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

Добавить субтитры

Чтобы во встроенном видео автоматически появлялись субтитры, добавьте в код фрагмент &cc_load_policy=1.

Можно указать язык субтитров. Вот пример для русского: &cc_lang_pref=ru&cc_load_policy=1.

Язык субтитров задается параметром «cc_lang_pref».
Фрагмент «cc_load_policy=1» означает, что субтитры будут включены по умолчанию.
«ru» – код русского языка. Двузначные языковые коды приведены в стандарте ISO 639-1.

Запретить встраивание ролика
Можно запретить пользователям встраивать ваше видео. Вот как это сделать:

Войдите в Творческую студию YouTube.
В меню слева нажмите Контент.
Выберите нужное видео и нажмите «Сведения» .
Нажмите Развернуть.
Снимите флажок «Разрешить встраивание видео» и нажмите Сохранить.

HTML Tags

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Audio/Video Properties

Property	Description
audioTracks	Returns an AudioTrackList object representing available audio tracks
autoplay	Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered	Returns a TimeRanges object representing the buffered parts of the audio/video
controller	Returns the MediaController object representing the current media controller of the audio/video
controls	Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin	Sets or returns the CORS settings of the audio/video
currentSrc	Returns the URL of the current audio/video
currentTime	Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted	Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate	Sets or returns the default speed of the audio/video playback
duration	Returns the length of the current audio/video (in seconds)
ended	Returns whether the playback of the audio/video has ended or not
error	Returns a MediaError object representing the error state of the audio/video
loop	Sets or returns whether the audio/video should start over again when finished
mediaGroup	Sets or returns the group the audio/video belongs to (used to link multiple audio/video elements)
muted	Sets or returns whether the audio/video is muted or not
networkState	Returns the current network state of the audio/video
paused	Returns whether the audio/video is paused or not
playbackRate	Sets or returns the speed of the audio/video playback
played	Returns a TimeRanges object representing the played parts of the audio/video
preload	Sets or returns whether the audio/video should be loaded when the page loads
readyState	Returns the current ready state of the audio/video
seekable	Returns a TimeRanges object representing the seekable parts of the audio/video
seeking	Returns whether the user is currently seeking in the audio/video
src	Sets or returns the current source of the audio/video element
startDate	Returns a Date object representing the current time offset
textTracks	Returns a TextTrackList object representing the available text tracks
videoTracks	Returns a VideoTrackList object representing the available video tracks
volume	Sets or returns the volume of the audio/video