Как добавить видео в html и css

Как добавить видео на сайт?

Как правильно вставить видео на сайт? Верстаю макет.

Отслеживать
задан 3 апр 2018 в 16:09
437 2 2 серебряных знака 11 11 бронзовых знаков
Скорее всего, придётся задействовать HTML и CSS.
3 апр 2018 в 16:14
3 апр 2018 в 16:32

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

• Видео есть на YouTube. Нажимаем «Поделиться»->»HTML-код». Затем вставляем его на сайт.
• Используем video по следующему примеру:

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 3 апр 2018 в 16:24
Даниил Чижевский Даниил Чижевский
2,307 3 3 золотых знака 13 13 серебряных знаков 39 39 бронзовых знаков

• html
• css
• вёрстка

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

HTML: Видео

Как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент , который, как и , позволяет быстро добавить необходимое видео на страницу.

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

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

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

Тег имеет несколько важных атрибутов:

• controls — Добавляет элементы управления для видеоплеера
• autoplay — Автоматическое воспроизведение после загрузки видео
• width — Ширина видеоплеера
• height — Высота видеоплеера

Атрибуты width и height принимают значения в пикселях, при этом указывать единицу измерения не нужно.

Задание

Добавьте видео в формате mp4 на страницу:

• Ссылка на видео: https://www.w3schools.com/html/movie.mp4
• У видеоплеера должны быть элементы управления
• Высота плеера: 240
• Ширина плеера: 320
• Путь к файлу укажите в теге

На всякий случай сделайте звук потише, в видео есть звук 😉

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

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

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

Полезное

• Если используется один файл, то достаточно добавить атрибут src для тега . В остальных случаях используйте теги
• Формат mp4 корректно обрабатывается большинством браузеров. По возможности используйте именно его

Автоматическое воспроизведение видео после загрузки страницы

Как добавить видео на сайт, чтобы оно автоматически запускалось без пользователя, например как на сайте https://morgenshterntour.ru? Через какие ЯП это делается или это можно через верстку?

Отслеживать
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
задан 5 мая 2020 в 11:11
Daniil Apekalovsky Daniil Apekalovsky
63 1 1 серебряный знак 5 5 бронзовых знаков
посмотрите: htmlbook.ru/html/video/autoplay
5 мая 2020 в 11:20

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Атрибут autoplay — при наличии этого атрибута видео воспроизводится автоматически после загрузки страницы. Кроме этого, крайне важно также добавить и атрибут muted , иначе в некоторых браузерах автоматического воспроизведения не будет.

Отслеживать
ответ дан 5 мая 2020 в 11:33
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
Правильно. И важно не забыть muted , иначе некоторые браузеры не станут автоматически играть видео.
5 мая 2020 в 11:40
Там есть ещё атрибут, который говорит браузеру, что видео — это фон.
5 мая 2020 в 12:24
@Qwertiy, какой атрибут, я его не встречал и щас не нашел. Будь другом подскажи.
6 мая 2020 в 5:17
@Air, если б я помнил, я бы сразу написал.
6 мая 2020 в 7:10
@Qwertiy, OK.
6 мая 2020 в 7:45

Если говорится о видео фоне то достаточно html и css и в качестве атрибутов к тегу видео добавить autoplay muted preload

div.body < position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh; >video < display: block; min-width: 110vw; min-height: 100vh; position: absolute; top: 0px; left: -10px; object-fit: contain; >.play

Отслеживать
ответ дан 5 мая 2020 в 13:09
Резидент Казахстана Резидент Казахстана
13.5k 2 2 золотых знака 19 19 серебряных знаков 61 61 бронзовый знак
Я не уверен, что такая ссылка не умрёт через несколько дней
5 мая 2020 в 13:21
@andreymal я вообще не знаю где брать ссылки на видосы для демонстрации
5 мая 2020 в 13:23

@MaximLensky Как ты такую ссылку сделал и где их вообще брать? Я просто только начинающий и вообще не в чем не разбираюсь

5 мая 2020 в 18:12

@DaniilApekalovsky надо видео скачать просто и указать путь (src) у тебя в проекте, вот щас к примеру ссылка не рабочая

5 мая 2020 в 23:48
@andreymal, она уже умерла.
6 мая 2020 в 7:11

• javascript
• html
• css
• видео

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

1.13. HTML5-видео

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

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

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

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

• Содержание:
• 1. Элемент
• 2. Встраиваемый интерактивный контент
• 3. Видеокодеки
• 4. Видеоконтейнеры
• 5. Альтернативные медиа-ресурсы
• 6. Добавление субтитров и заголовков
• 7. Пример: размещаем видео на сайте
• 8. Видеоконвертеры

1. Элемент

Поддержка браузерами

IE: 9.0, атрибут muted — с 10.0
Edge: 12.0
Firefox: 3.5
Chrome: 4.0, атрибут muted — с 30.0
Safari: 4.0, атрибут muted — с 5.0
Opera: 11.5
iOS Safari: 3.2
Android Browser: 2.3
Chrome for Android: 44

В простом варианте HTML-разметка для размещения видеофайла на странице имеет следующий вид:

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

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

Таблица 1. Атрибуты тега

Атрибут	Описание, принимаемое значение
autoplay	Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы.
controls	Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость).
height	Задает высоту окна для отображения видеоданных, возможные значения: px или %
loop	Циклическое воспроизведение видеофайла.
muted	Выключает звук при воспроизведении видеофайла.
poster	URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла.
preload	Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла.
src	Содержит абсолютный или относительный URL-адрес видеофайла.
width	Задает ширину окна для отображения видеоданных, возможные значения: px или %

2. Встраиваемый интерактивный контент

Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :

Таблица 2. Атрибуты тега

Атрибут	Описание, принимаемое значение
height	Определяет высоту встраиваемого контента в px или % .
src	Содержит абсолютный или относительный URL-адрес медиафайла.
type	Определяет MIME-тип встраиваемого файла.
width	Определяет ширину встраиваемого контента в px или % .

3. Видеокодеки

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

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

H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.

Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.

VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.

4. Видеоконтейнеры

Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:

Ogg (.ogv, .oga, .ogx, .ogg) — формат-контейнер с открытым исходным кодом для видеокодека Theora и аудио Vorbis. Работает в Firefox, Chrome и Opera.
MIME-тип: video/ogg .

MPEG 4 (.mp4) — формат-контейнер для видеокодека H.264 и аудиокодека AAC. Работает в Safari и Chrome. Кодирует видео, в том числе высокой четкости, для полного спектра устройств, таких как iPhone, iPod и iPad.
MIME-тип: video/mp4 .

WebM (.webm) — формат-контейнер с открытым исходным кодом для видеокодека VP8 от Google и аудиокодека Ogg Vorbis. Работает в Firefox, Chrome, Opera и Adobe Flash Player.
MIME-тип: video/webm .

Audio Video Interleave (.avi) — формат предназначен для записи звука и движущихся изображений, соответствует спецификации RIFF.
MIME-тип: video/vnd.avi, video/avi, video/msvideo, video/x-msvideo .

Matroska (.mkv) — популярный видеоконтейнер, может содержать видео в формате H.264, VP8 или Theora.
MIME-тип: video/x-matroska, audio/x-matroska .

На данный момент браузеры поддерживают три основных видео формата:

Формат	Видеокодек	Аудиокодек
.mp4	H.264	AAC
.ogg/.ogv	Theora	Vorbis
.webm	VP8	Vorbis

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

5. Альтернативные медиа-ресурсы

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

Таблица 3. Атрибуты тега

Атрибут	Описание, принимаемое значение
media	Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src	Содержит абсолютный или относительный URL-адрес медиафайла.
type	Определяет MIME-тип медиафайла.

6. Добавление субтитров и заголовков

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

Таблица 4. Атрибуты тега

Атрибут	Описание, принимаемое значение
default	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент может содержать данный атрибут.
kind	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры ( subtitles ). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для невидящих пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src	Содержит абсолютный или относительный URL-адрес аудио- или видеофайла.
srclang	Язык воспроизводимой дорожки.

7. Пример: размещаем видео на сайте

Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:

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

8. Видеоконвертеры

Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.

ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.

Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.

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