How to put video in html
How to put video in html
HTML Video
The HTML element is used to show a video on a web page.
Example
The HTML Element
To show a video in HTML, use the element:
Example
How it Works
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the and tags will only be displayed in browsers that do not support the element.
HTML Autoplay
To start a video automatically, use the autoplay attribute:
Example
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted after autoplay to let your video start playing automatically (but muted):
Example
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | ||||
|---|---|---|---|---|
| 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Video Formats
There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
The HTML DOM defines methods, properties, and events for the element.
This allows you to load, play, and pause videos, as well as setting duration and volume.
There are also DOM events that can notify you when a video begins to play, is paused, etc.
Example: Using JavaScript
Play/Pause Big Small Normal
Your browser does not support HTML5 video.
For a full DOM reference, go to our HTML Audio/Video DOM Reference.
HTML5 Video — от А до Я
Пишем код
video >
source src =»movie.mp4″ type =’video/mp4; codecs=»avc1.42E01E, mp4a.40.2″‘ />
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
video > >
Само собой есть и более простой вариант вставки видео:
Остается надеется, что в ближайшем будущем для всех браузеров будет достаточно именно такого варианта.
Если же вы работает с Google App Engine, то для каждого видео формата в файл app.yaml вам надо добавить запись вида:
— url: /(.*\.ogv)
static_files: videos_folder/\1
mime_type: video/ogg
upload: videos_folder/(.*\.ogv)
И еще одна очень важная вещь, о которой стоит упомянуть. Надо указывать значения параметра type в тэге source, для того чтобы браузер автоматически смог распознать нужный формат и подгрузить именно его, что позволит увеличить производительность.
Форматы видео
На момент написания статьи (август 2010) наиболее правильным и полным кодом, для вставки видео является следующий:
Буря восторга пронеслась по интернету, когда вышел новый IE 9. Однако пока есть счастливые обладатели IE 6, приходиться изощряться. Пара возможных решений.
Chrome Frame
Преимущество использования плагина Chrome Frame состоит в том, что его можно поставить один раз, а все новые фишки HTML, JavaScript и CSS будут обязательно поддерживаться без какого-либо обновления. Этот плагин является спасением для веб-разработчиков, которые не будут заморачиваться и тратить время на написание IE-совместимой версии сайта. (Немного спорное заявление, особенно если вспомнить какой шум был в сети, когда вышел этот плагин.)
Назад к Flash
Шифруемся, или надо перекодировать видео
Плюшки
Так как видео мы встраиваем полноценным html способом, то значит мы можем использовать всю мощь веба для наших целей. Ниже опишу в чем это мощь состоит. (К сожалению опять без наглядных примеров, так что идем на сайт оригинала)
Video + HTML
Для начала, мы можем использовать различные HTML атрибуты. К примеру, параметр tabindex позволит задать положение. Есть пара параметров, которые есть и в аудио, это loop и autoplay. В параметре poster можно указать картинку, которая будет отображаться во время загрузки видео. Указав controls мы скажем браузеру — «Используй нативные контролы, мы тут ничего не придумали». Ну и еще есть preload, который позволяет подгружать видео фоном. В итоге получаем нечто подобное:
video poster =»star.png» autoplay loop controls tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
video poster =»star.png» autoplay =»autoplay» loop =»loop» controls =»controls» tabindex =»0″ >
source src =»movie.webm» type =’video/webm; codecs=»vp8, vorbis»‘ />
source src =»movie.ogv» type =’video/ogg; codecs=»theora, vorbis»‘ />
video >
Video + JS
Тэг video обладает рядом параметров, управлять которыми можно с помощью яваскрипта. Пример можно увидеть на сайте W3.
Для начала, как и любой html компонент, видео реагирует на все стандартные события, как например наведение мыши, перетаскивание и так далее. Но помимо них оно обладает рядом собственных, позволяющих определить, когда видео было запущено, остановлено и прочее. Уже с момента загрузки видео мы можем использовать целый ряд событий, связанных как с работой по сети (loadstart, progress, suspend, abort, error, emptied, stalled), так и с буферизацией (loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough). Простой пример, показывающий как можно настроить воспроизведение видео в тот момент, когда оно готово к проигрыванию:
В сети выложена уже появились уже и кастомные настройки, позволяющие управлять например скоростью воспроизведения или добавлять взаимодействие между 2 видео.
Video + CSS
Тут практически без комментариев — видео как элемент веб-страницы воспринимает всевозможные css штуки — начиная от border, opacity и заканчивая masks, gradients, transforms, transitions и animations. Тут все уже зависит исключительно от вашей фантазии.
Video + canvas
HTML5 принес в этом мир еще одну мощную вещь — canvas. И что же мешает нам использовать два этих нововведения вместе? Правильно — ничего.
Пример совместного использования canvas и video может быть следующим — получение скриншотов из проигрываемого видео. У canvas есть метод drawImage, позволяющий получать видео из 3х источников: из изображения как такового, из другого canvas и из video! А с помощью другого метода — toDataURL мы уже экспортируем изображение в нужно нам формате. Следующий листинг показывает как снимать скриншоты из видео каждые 1,5 секунды:
Я думаю люди с богатой фантазией уже представили, что можно тут придумать. Для них и все кого интересует возможность получения фреймов видео есть интересная вещь — WebGL.
Video + SVG
SVG предоставляет нам возможность программного управления отображения векторной графики. Но помимо этого есть такая замечательная штука как SVG filter effects. С помощью этих фильтров можно накладывать определенные эффекты на отдельные элементы веб-страницы. Выглядит это примерно таким образом:
svg id =’image’ version =»1.1″ xmlns =»http://www.w3.org/2000/svg» >
defs >
filter id =»myblur» >
feGaussianBlur stdDeviation =»1″ />
filter >
defs >
svg >
style >
video < filter:url(#myblur); border: 2px solid red; >
style >
Подобный inline-вариант обработки работает в Firefox 4 и IE9, для остальных браузеров уже необходим яваскрипт и css.
Заключение
Без сомнения уже многие сумели оценить плюсы от нового html компонента. В интернете (и на хабре — прим. пер.) выложена уже масса примеров (1, 2, 3, 4, 5, 6)
Радует то, что на достигнутом никто не собирается останавливаться и возможно в будущем нас ждет возможность работы с микрофоном и камерой и поддержка вещания.
Видео и аудио контент
Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами и ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.
| Предпосылки: | Базовая компьютерная грамотность, установка базового ПО, базовые знания работа с файлами, знакомство с основами HTML (как описано в Начало работы с HTML) и Изображения в HTML. |
|---|---|
| Задача: | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. |
Аудио и видео в Интернете
Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.
Примечание: Прежде всего, вы также должны знать, что есть немало OVPs (провайдеров онлайн-видео) вроде YouTube, Dailymotion и Vimeo, а также онлайн аудио-провайдеров вроде Soundcloud. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.
«>» title=»Permalink to Элемент «>Элемент
Элемент позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:
Встроенное видео будет выглядеть примерно так:
Поддержка нескольких форматов
Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!
Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются форматами контейнеров. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.
Например, файл WebM, содержащий фильм, имеет основную видеодорожку и одну дорожку с альтернативным ракурсом, плюс аудио для английского и испанского языков, в дополнение к аудио для дорожки с комментариями на английском языке. Также включены текстовые дорожки, содержащие закрытые субтитры для художественного фильма, испанские субтитры для фильма и английские субтитры для комментариев.
Аудио и видео треки также находятся в разных форматах, например:
Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.
Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.
Поддержка медиафайлов в браузерах
Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные кодеки, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.
Примечание: Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.
Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.
Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите выбор подходящего контейнера для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите выбор видеокодека и выбор аудиокодека для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.
Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.
Так как мы это сделаем? Взгляните на следующий обновлённый пример (и попробуйте живой пример):
Примечание: Наша статья о поддерживаемых медиаформатах описывает некоторые распространённые MIME types.
«>» title=»Permalink to Другие параметры «>Другие параметры
На выходе получим нечто, подобное этому:
Новые параметры:
width and height Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью CSS. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона. autoplay Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим. loop Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо. muted Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию. poster Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы. preload
этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:
» title=»Permalink to Элемент «>Элемент
В браузере это вызывает следующее:
Примечание: вы можете запустить аудио-демо в Github (см. также исходный код аудиоплеера.)
Отображение текстовых дорожек к видео
Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:
Замечание: «Транскрибировать» значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».
субтитры Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио. титры Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит. рассчитанные описания Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.
Типичный файл WebVTT будет выглядеть примерно так:
Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:
Это приведёт к просмотру видео с субтитрами, таким как:
Примечание: Текстовые треки также помогут вам с SEO, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
Активное обучение: Внедрение собственного аудио и видео
Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как Miro Video Converter и Audacity. Мы хотели бы, чтобы вы попробовали сделать это!
Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими образцами аудио и видео файлов для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.
Мы хотим, чтобы вы сделали следующие действия:
Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.
Краткое изложение
Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как (en-US) и (en-US).
How to Embed Audio and Video in HTML?
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is a combination of Hypertext and Markup language. HTML uses predefined tags and elements that tell the browser how to properly display the content on the screen. So, in this article, we will learn how to embed audio and video in HTML. In order to insert multimedia files on web pages, we already know how to insert images in HTML.
How to embed audio in HTML?
Syntax:
Attributes of tag
| Attribute | Value | Description |
|---|---|---|
| autoplay | autoplay | When the page is loaded. It specifies to play audio as soon as possible. |
| controls | controls | It displays audio control. |
| loop | loop | It will start the audio again when it is finished. |
| muted | muted | When the page is loaded audio will be automatically muted. |
| preload | It specifies how the author thinks the audio will be loaded when the page is ready. | |
| src | URL | It specifies the URL of the audio file. |
Example:
In this example, we will add an audio file to a webpage. To add audio files on the webpage, we need a notepad or another text editor.
Step 1: Open your notepad by searching notepad in your application list.
Step 3: Once the HTML file is saved, you can write HTML code inside this file. In this example, we have to embed an audio file so first keep ready an audio file and save it in the same directory where your HTML is saved. Then we write HTML code as shown below code snippet following by HTML code format.
Output:
Note: Before adding an audio source must be sure that the audio file is in the same directory and specified name.
How to embed video in HTML?
To embed video in HTML, we use the tag. It contains one or more video sources at a time using tag. It supports MP4, WebM, and Ogg in all modern browsers. Only Ogg video format doesn’t support in Safari browser.
1.13. HTML5-видео
Раньше, если вы хотели добавить видео на веб-страницу, вам приходилось использовать элемент
| Атрибут | Описание, принимаемое значение |
|---|---|
| autoplay | Автоматическое воспроизведение видеоофайла сразу же после загрузки страницы. |
| controls | Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (воспроизведение, пауза, громкость). |
| height | Задает высоту окна для отображения видеоданных, возможные значения: px или % |
| loop | Циклическое воспроизведение видеофайла. |
| muted | Выключает звук при воспроизведении видеофайла. |
| poster | URL файла изображения, которое будет отображаться во время загрузки видеофайла или до тех пор, пока пользователь не нажмет на кнопку PLAY. Если атрибут не задан, то будет отображаться первый кадр видеофайла. |
| preload | Атрибут, отвечающий за предварительную загрузку видеоконтента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения: auto — браузер загружает видеофайл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение. metadata — браузер загружает первую небольшую часть видеофайла, чтобы определить его основные характеристики. none — отсутствие автоматической загрузки видеофайла. |
| src | Содержит абсолютный или относительный URL-адрес видеофайла. |
| width | Задает ширину окна для отображения видеоданных, возможные значения: px или % |
2. Встраиваемый интерактивный контент
Элемент определяет контейнер для внешнего приложения или интерактивного содержимого (другими словами, плагина). Большинство браузеров поддерживало данный элемент на протяжении долгого времени. Тем не менее, данный тег не был включен в спецификацию HTML4, его добавили в спецификацию HTML5. С помощью на веб-страницы можно добавлять не только видеофайлы, но и векторные изображения в формате swf :
3. Видеокодеки
При просмотре видео проигрыватель должен его декодировать. Одни проигрыватели используют программное декодирование видеопотока, другие используют аппаратное декодирование.
Важно! Поскольку каждый браузер поддерживает определенный кодек, поэтому, чтобы обеспечить воспроизведение видео-контента во всех браузерах, видео-файл нужно размещать в нескольких форматах.
H.264 — высококачественный кодек от фирмы MPEG, делится на профили для поддержки как устройств с минимальными возможностями, так и устройств высокого разрешения.
Ogg Theora — открытый бесплатный стандарт для видео, качество и производительность несколько ниже стандарта H.264.
VP8 — открытый бесплатный кодек, сходный по качеству с H.264. Поддерживается в Firefox, Chrome и Opera.
4. Видеоконтейнеры
Любой видеофайл является файловым контейнером, в котором хранятся другие файлы. Аудио- и видеодорожки объединяются для воспроизведения видеоролика. Метаданные содержат информацию о данном видеоролике — изображение обложки, субтитры и пр. К популярным форматам видеоконтейнеров относятся следующие:
На данный момент браузеры поддерживают три основных видео формата:
| Формат | Видеокодек | Аудиокодек |
|---|---|---|
| .mp4 | H.264 | AAC |
| .ogg/.ogv | Theora | Vorbis |
| .webm | VP8 | Vorbis |
5. Альтернативные медиа-ресурсы
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл). |
| src | Содержит абсолютный или относительный URL-адрес медиафайла. |
| type | Определяет MIME-тип медиафайла. |
6. Добавление субтитров и заголовков
7. Пример: размещаем видео на сайте
Размещаем код для вставки видео на сайт с помощью HTML5-разметки, используя атрибуты для задания видео требуемых параметров:
Если вы хотите выровнять видеоплеер на странице, нужно обернуть элемент в контейнер
8. Видеоконвертеры
Movavi — позволяет конвертировать видео и аудио в необходимый вам формат. Сохраняет медиафайлы для проигрывания на мобильных устройствах. «Умные» готовые профили позволяют добиваться максимального качества.
ONLINE-CONVERT — бесплатный онлайн-конвертер, позволяющий конвертировать любые медиа-файлы из одного формата в другой.
Firefogg — модуль расширения для Firefox, может создавать видеофайлы Theora и WebM. Работает непосредственно в браузере, но вся работа выполняется локально без обращения к веб-серверу.
CloudConvert — онлайн-конвертер файлов. Поддерживает практически любой формат аудио, видео, документов, электронных книг, архивов, изображений, электронных таблиц или презентаций.