Как добавить видео на лендинг при помощи тегов html5? Как вставить видео на сайт html


Тег | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 3.0+ 10.50+ 3.1+ 3.5+ 2.0+ 2.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Список поддерживаемых браузерами аудио и видеокодеков ограничен и приведен в табл. 1.

Табл. 1. Кодеки и браузеры Аудио кодеки Видео кодеки
Браузер Internet Explorer Chrome Opera Safari Firefox
ogg/vorbis
wav
mp3
AAC
ogg/theora
H.264
WebM

Для универсального воспроизведения в указанных браузерах видео кодируют с помощью разных кодеков и добавляют файлы одновременно (см. пример).

Синтаксис

<video> <source src="URL"> </video>

Атрибуты

autoplay Видео начинает воспроизводиться автоматически после загрузки страницы. controls Добавляет панель управления к видеоролику. height Задает высоту области для воспроизведения видеоролика. loop Повторяет воспроизведение видео с начала после его завершения. poster Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится. preload Используется для загрузки видео вместе с загрузкой веб-страницы. src Указывает путь к воспроизводимому видеоролику. width Задает ширину области для воспроизведения видеоролика.

Закрывающий тег

Обязателен.

Пример

HTML5IE 9CrOpSaFx

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video controls="controls" poster="video/duel.jpg"> <source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video/duel.webm" type='video/webm; codecs="vp8, vorbis"'> Тег video не поддерживается вашим браузером. <a href="video/duel.mp4">Скачайте видео</a>. </video> </body> </html>

Результат примера в браузере Opera показан на рис. 1.

Рис. 1. Воспроизведение видеофайла

Браузеры

Firefox поддерживает кодек WebM начиная с версии 4.0.

htmlbook.ru

Несколько способов, как вставить видео в HTML

Сайт в Интернете – это средство продвижения какой-то услуги или предмета. Но какой же веб-ресурс без медиа-контента? Практически на каждом сайте есть видеоролики, которые объясняют, привлекают, заинтересовывают. Поэтому владелец веб-ресурса стремится узнать, как вставить видео в HTML.

как вставить видео в html

Способы создания сайтов

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

  1. Использовать технологию блоггинга. Что это значит? Зарегистрироваться на сайте и получить доменное имя второго уровня. Благодаря такой возможности владелец сайта становится администрацией своего ресурса и получает доступ к специальной панели. При помощи нее можно трансформировать «детище» по своему вкусу.
  2. Воспользоваться разработанными многочисленными конструкторами сайтов, по типу ucoz.ru, jimdo.com, setup.ru, Wix.com, A5.ru, Fo.ru, rusedu.net и т. д.
  3. Разработать интернет-ресурс посредством CMS, т. е. системы управления сайтом.
  4. Спроектировать собственный дизайн «детища» и воссоздать его посредством языка программирования HTML.

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

Составные элементы части web-технологии

Технология web разделяется на следующие базовые компоненты:

  1. Различные по своему роду компьютерные сети взаимодействуют друг с другом по протоколу TCP/IP.
  2. Web стал одним из приложений Internet, которые предназначены для массового распространения разнообразной информации.
  3. В web-технологии носителями данных являются страницы, которые содержат медиа-контент (графику, видео, гиперссылки), поэтому нужно знать, как вставить видео в HTML.
  4. Чтобы передавать информацию-гипертекст технология web использует протокол HTTP.
  5. Для проектирования и создания веб-страниц применяется язык разметки гипертекста HTML.
  6. Чтобы просмотреть ресурсы в Internet, нужно воспользоваться браузером.

Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5

Существует несколько способов вставки видео контента на веб-страницу. Выделяют три варианта: вставка посредством HTML, плеера или YouTube. Для начала нужно создать обычный HTML5-файл, который будет содержать в себе стили страницы и несколько подзаголовков. После подготовки можно выбирать один из методов и наслаждаться результатом.

  1. Найти третий заголовок и прописать код прямо под ним:вставка видео с помощью html 5
  2. Открыть страницу в браузере и убедиться в появлении видео.
  3. Обязательно нужно правильно прописать путь к ролику.
  4. Чтобы вставка видео в HTML была грамотной, нужно разметить панель контроля видео. За это отвечает параметр controls.

Следует учесть, что такой способ примечателен не для всех. К примеру, в браузере Opera видео, размещенное таким способом, воспроизводиться не будет. Чтобы избежать такой ситуации, нужно конвертировать видеоролик в тип Ogg Theora, изменить код.

Конвертировать файл можно посредством сервиса online-convert.com. Затем нужно изменить код на такой:

вставка видео в html

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

вставка видео с помощью html 5

Способ № 2. Как вставить видео в HTML при помощи плеера

Видеоконтент можно вставлять в HTML без какой-либо преждевременной загрузки на видеосервис. Итак, можно воспользоваться скриптом плеера, чтобы выставить нужный ролик на сайт с расширением .mp4 или .flv. Прежде всего нужно выбрать сам ролик. Затем нужно выбрать один из множества бесплатных плееров. Как вариант, можно воспользоваться Flowplayer.

  1. Нужно скачать файлы указанного плеера на локальный компьютер.
  2. Разархивировать их в конкретную папку на создаваемом сайте.
  3. Открыть HTML-файл и подключить javascript-файл проигрывателя к подготовленному файлу. Для этого нужно прописать специальный код внутри тега HEAD. Важно: правильно указать путь к папке!вставка видео через плеер
  4. Нужно разместить плеер в HTML-файле. Здесь нужно правильно прописать путь к файлам. Тут же указываются настройки, запрещающие видео запускаться автоматически. Если нужно, чтобы видео запустилось «автоматом», следует после пути к файлу убрать запятую, закрыть скобку (круглую) и поставить точку с запятой.добавить видео в html

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

Способ № 3. Вставка видео в HTML с Ютуба

После создания подготовительного файла HTML5 можно приступать к вставке видеоконтента с сервиса YouTube.

  1. Для начала нужно выбрать видеоролик, который будет находиться на странице. Он должен храниться на локальном компьютере.
  2. Нужно перейти на сайт youtube.com. Следует создать свой аккаунт или войти в уже существующий.
  3. После входа на свою страницу в YouTube требуется нажать кнопку «Добавить видео», после чего выйдет окно, в котором будет предложено выбрать файл для загрузки. Выбранный видеоролик загрузится спустя некоторое время.
  4. Можно перейти по ссылке загруженного файла, которая находится вверху.
  5. Чтобы получить код для вставки видео, нужно нажать «Поделиться» и «HTML-код». Страница выдаст программный код, который необходим. Здесь можно указать такие параметры, как-то: режим конфиденциальности, размер видео, возможность показать похожие записи.
  6. После настройки параметров код копируется и вставляется в подготовленный HTML-файл.
  7. Все готово. Теперь понятно, как вставить видео в HTML с сервиса YouTube.

вставка видео в html с ютуба

Итак, были рассмотрены несколько способов вставки видео в HTML. Какой вариант выбрать – решать web-программисту или владельцу сайта.

fb.ru

обзор нового тега и его атрибутов

Как вставить видео в html5?

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

Что нам дает html5 для вставки видео?

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

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

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

Почему тегом video стоит пользоваться?

Возможно, вы знаете, что некоторые возможности HTML5 еще очень мало поддерживаются. Так вот, тег video относится к той части спецификации, которая поддерживается практически полностью. Конечно, не в IE6, но кому он сейчас нужен? Если говорить о нормальных, более менее современных браузерах, то все они смогут понять этот тег и правильно обработать его.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

От теории к делу

Ладно, переходим к практике. Как вставить видео на сайт? Как я уже говорил, для этого нужно использовать парный тег video. Напомню вам, что перед использованием html5 элементов полезно делать следующее:

1. Указать правильный доктайп:

2. Указать тип новых элементов как блочный: Video (и другие новые теги)

Теперь мы сделали достаточно, чтобы нормальные браузеры нормально отобразили эти элементы.

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

Например, Chrome (самый крутой браузер) поддерживает все форматы (ogg, mp4, webm), а IE только mp4. Так вот, если вы хотите кроссбраузерности, то придется указывать несколько форматов, то есть для начала нам нужно наше видео сконвертировать в 3 формата, потом забросить на сервер, и только после этого вставлять. Как? С помощью тегов source:

<video> <source src = "video.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src = "video.ogg" type = 'video/ogg; codecs="theora, vorbis"'> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> </video>

<video>

<source src = "video.mp4" type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

<source src = "video.ogg" type = 'video/ogg; codecs="theora, vorbis"'>

<source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>

</video>

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

Autoplay – пустой атрибут без значения. Если его указать, то воспроизведение начнется автоматически после полной загрузки страницы. Такой трюк часто делают на продающих страницах, чтобы моментально привлечь внимание человека.

Controls – очень важный параметр, тоже без значения. Он добавляет элементы управления. Собственно, он используется практически всегда, потому что нужно предоставить человеку возможность ставить видео на паузу или перематывать.

Loop – если этот параметр активен, воспроизведение начнется сначала после того, как оно завершилось. Иногда это вполне уместно. Например, если ролик очень интересный.

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

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

Poster – в качестве значения этому атрибуту передается путь к изображению, которое станет миниатюрой к ролику. В целом, это может иметь значение – красивая, привлекающая внимание картинка может побудить пользователя к просмотру. C помощью параметра poster можно задать путь к изображению, которое будет видно до начала воспроизведения нашего ролика. Например:

<video controls poster = "poster.png">

<video controls poster = "poster.png">

Все данные атрибуты записываются в контейнере video, а не в одинарных тегах source. В них нужно указывать только путь к файлу и типы MIME.

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

Как вставить видео с youtube

Но если видеоролик есть на youtube и его вам нужно вставить в свою запись, как это сделать? Тут я вижу как минимум два варианта. Во-первых, у самого ролика на youtube есть блок «Поделиться». Там можно взять html-код, который потом нужно вставить в редакторе (в режиме html).

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

webformyself.com

Видео на сайт при помощи тегов html5

вставка видео при помощи html5Добрый день!  Сегодня хотел бы рассказать вам о том, как встроить видео на лендинг пейдж. Это один из способов визуализации товара, повышающий конверсию. Не всегда картинка с текстом работают лучше, чем видео. И в некоторых нишах лучше использовать именно видео презентацию товара или услуги. Кроме того, вы можете комбинировать и тестировать что работает лучше именно у вас.

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

Как вставить видео на сайт при помощи тегов html5

В общем случае, для того чтобы встроить видео на сайт при помощи тега html5, достаточно одной строчки:

<video src="video/demo.mp4"> </video>

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

Для того, чтобы это исправить необходимо сохранить видео в нескольких форматах и дописать несколько строчек кода. Наиболее популярные это: mp4, webm, ogg. Или даже не наиболее популярные, а те, которые позволяют осуществить максимальный охват.  (Если будет интересна эта тема – пишите в комментариях, я сделаю обзор какой-нибудь программы для конвертирования видео)

<video poster="demo.jpg"> <source src="video/demo.mp4" type="video/mp4" /> <source src=" video/demo.webm" type="video/webm"/> <source src=" video/demo.ogv" type="video/ogg"/> Формат не поддерживается </video>

Таким образом, браузер пройдется по коду и выберет тот формат, который он может воспроизвести. Но это еще не все. Для того, чтобы сэкономить время, которое браузер тратит на поиск нужной строки (в которой находиться заветный формат) и попыток начать загрузку, мы указали атрибут “type”, в котором указан формат видео.

Дело в том, что браузер в первую очередь проверяет его.  Атрибут “poster” – задает изображение, которое будет выводиться до начала воспроизведения.(Если быть точным, то до определения того формата, который может воспроизвести)

Но и это еще не все.  Старые браузеры не поддерживают теги html5 (ну, или частично поддерживают). В таком случае нам необходимо подстраховаться и сказать браузеру, чтобы он пытался воспроизвести видео при помощи flash– плеера.

<video controls poster="demo.jpg"> <source src="demo.mp4" type="video/mp4" /> <source src="demo.webm" type="video/webm"/> <source src="demo.ogv" type="video/ogg"/> <object><embed src="demo.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" /></object> Формат не поддерживается </video>

Как вы могли заметить, я добавил атрибут «controls» — для того, чтобы появились элементы управления, такие как перемотка, пауза и т.д. А также тег <object>. Он говорит браузеру что нужно делать, если не один из форматов невозможно воспроизвести. В нашем случае — это попытка открыть видео во flash-плеере и, в случае неудачи, выдать сообщение о том, что формат не поддерживается.

Существуют и дополнительные атрибуты, которые можно задать тегу <video>. Вот основные из них:

  • autoplay — автоматическое начало воспроизведения видео.
  • height, width — высота и ширина.
  • preload — буферизация видео (предзагрузка как в ютубе)

А на сегодня — все. Теперь вы знаете, как добавить видео на сайт при помощи тегов html5. Скоро я расскажу вам, как встроить видео на сайт из Youtube. Пока!

smartlanding.biz

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

В этой статье мы поговорим о том, как вставить видео на сайт и научимся:

  1. Размещать свои файлы на видео хостингах и отображать их на сайте.
  2. Загружать видео на свой хостинг и отображать их на сайте с помощью плеера.

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

Как загрузить видео на Youtube:

  1. Первым делом Вам необходимо войти в свой аккаунт YouTube.
  2. Нажмите кнопку Добавить видео в верхней части страницы.
  3. Выберите ролик для загрузки. (Учитывайте, что видео не должно нарушать авторские права. Если Вы хотите наложить на видео известную музыку, то придется ее купить).
  4. Пока файл загружается заполните основную информацию о ролике и при необходимости дополнительные параметры.
  5. Чтобы добавить видео на YouTube, нажмите Опубликовать.
  6. Пока вы не нажмете кнопку Опубликовать, видео доступно только вам.

С более подробной инструкцией по загрузке видео на Youtube можете ознакомиться на странице supporta

Вставить на сайт видео с Youtube:

Чтобы вставить уже загруженное (имеющееся) на Youtube видео:youtube

  1. Откройте интересующее Вас видео на Youtube;
  2. Нажмите на находящуюся под видео кнопку «Поделиться»;
  3. Выберите вкладку «HTML» и скопируйте появившийся код; (Чтобы скопировать код быстрее: нажмите правой кнопкой мыши по видео и выберите пункт «Копировать HTML-код.)
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Vimeo:Vimeo

  1. Откройте понравившееся на Vimeo Вам видео;
  2. Нажмите на находящуюся под видео кнопку «Share»;
  3. В появившимся окошке в пункте «Embed» скопируйте код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

Вставить на сайт видео с Rutube:Rutube

  1. Откройте нужное на RuTube Вам видео;
  2. Нажмите на находящуюся под видео кнопку «поделиться»;
  3. Выберите вкладку «Код вставки»
  4. Скопируйте появившийся код;
  5. Вставьте скопированный код в нужную часть сайта.
  6. Сохраните изменения и обновите страницу.

Вставить на сайт видео с VK (Вконтакте):videovk

 

  1. Откройте видео; (Возможно понадобится авторизация).
  2. Нажмите на находящуюся под видео кнопку «Еще»;
  3. Выберите вкладку «Экспортировать»  в появившемся окне «Код для вставки» скопируйте появившийся код;
  4. Вставьте скопированный код в нужную часть сайта.
  5. Сохраните изменения и обновите страницу.

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

Теперь рассмотрим варианты воспроизведения видео с загруженным видео на свой сервер.

Вставить видео на сайт с помощью HTML5

Для этого способа Вам понадобится тег video

<span>&lt;<span>video</span>&gt;</span> <span>&lt;<span>source</span><span> src=<span>"URL"</span></span>&gt;</span> <span>&lt;/<span>video</span>&gt;</span>

<span>&lt;<span>video</span>&gt;</span>

<span>&lt;<span>source</span><span> src=<span>"URL"</span></span>&gt;</span>

<span>&lt;/<span>video</span>&gt;</span>

  1. Загружаем на сервер видео;
  2. Копируем вышеуказанный код;
  3. Вставляем в нужную нам часть сайта скопированный код;
  4. Изменяем URL на путь к файлу который мы разместили на хостинге
  5. Сохраняем изменения и обновляем страницу.

Для тега video существует несколько атрибутов, так же некоторые из них встречаются в кодах которые предлагают популярные видео хостинги.

В первую очередь хотелось бы сказать о таких атрибутах как height (высота), width  (ширина).

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

  • src — это самый важный атрибут, он указывает путь к видеоролику.
  • autoplay — воспроизведение видео сразу после загрузки страницы.
  • loop — повтор воспроизведения видео по завершению
  • poster  — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
  • preload — загрузка видео вместе с загрузкой веб-страницы.

Вставить видео на сайт с помощью плеера

Сейчас в интернете есть множество различных плееров которые вы можете использовать на своем сайте. В качестве примера я выбрал один из популярных flowplayer.

  1. Скачайте плеер, а затем его разархивируйте;
  2. Создайте папку и поместите в нее файлы из архива;
  3. Подключите javascript-файл плеера к html-файлу. Для этого внутри тега head, пропишите следующий код:

    <script src="flowplayer.min.js"></script>

    <script src="flowplayer.min.js"></script>

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

     <!-- the player --> <div data-swf="flowplayer.swf" data-ratio="0.4167"> <video> <source type="video/webm" src="https://путь к вашему видео файлу если он в формате .webm"> <source type="video/mp4" src="https://путь к вашему видео файлу если он в формате .mp4"> </video> </div>

     <!-- the player -->

    <div data-swf="flowplayer.swf" data-ratio="0.4167">

    <video>

    <source type="video/webm" src="https://путь к вашему видео файлу если он в формате .webm">

    <source type="video/mp4" src="https://путь к вашему видео файлу если он в формате .mp4">

    </video>

    </div>

Последнюю версию вы всегда можете скачать на официальном сайте.  Нужна авторизация.

Как вставить код видео в html

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

Традиционно вид большинства html страниц выглядит примерно следующим образом:

<!doctype html> <head> Здесь подключаются скрипты и прочие файлы </head> <body> Это тело сайта здесь размещается основной код страницы </body>

<!doctype html>

<head>

Здесь подключаются скрипты и прочие файлы

</head>

<body>

Это тело сайта здесь размещается основной код страницы

</body>

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

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

Например один из них div.

Мы можем разместить код нашего видео в блок и задать этому блоку нужные параметры … например выравнять по центру.

<div align="center"> </div>

<div align="center">

</div>

Теме оформления блоков можно посвятить не одну статью. Но сейчас не об этом.

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

После сохраните изменения и обновите страницу для проверки.

Как вставить видео в статью WordPress

Чтобы разместить видео в статье или в странице wordpress достаточно перейти в режим «текст» и вставить код в нужную вам часть (здесь же вы можете изменять значения атрибутом, таких height, width) после перехода в режим «визуально» будет отображаться плеер.

wordpress

На этом я заканчиваю статью надеюсь она была полезной для Вас.

mmechta.ru

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

html

Содержание:

Урок наглядно покажет: как вставить видео на веб-страницу любой версии html. Рассмотрим, для каждого способа вставки видео на сайт, имеющиеся у него плюсы и минусы.

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

Вначале о том, как вставить видео на страницу с любой версией HTML (4.01, HTML5, XHTML). Этот пример универсален и работает на 99.9%: пользователь сможет посмотреть видео в любом более-менее не старом браузере (IE не ниже v.9) и каким-бы устройством он не пользовался.

Для этого потребуется плеер, например: FlowPlayer, который без труда можно найти в сети. Этот плеер проигрывает видео в формате MP4 и FLV.

Код для вставки видео на страницу выглядит следующим образом (где «papka/name.…» — это путь к вашему видеофайлу, а «name» — его имя):

<video preload="auto" controls> <source src="papka/name.mp4" /> <source src="papka/name.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="papka/name.webm" type='video/webm; codecs="vp8, vorbis"' /> <object type="application/x-shockwave-flash"> <param name="movie" value="papka/flowplayer-3.2.6.swf" /> <param name="flashvars" value='config={"clip":"papka/name.mp4"}' /> </object> <p>Ваш браузер не поддерживает просмотр</p> <a href="papka/name.mp4">Скачать видео</a> </video>

Поместите FlowPlayer в ту же папку, где находятся видеофайлы. Атрибуты тега Видео в данном примере: preload="auto" — загружает видео вместе со страницей, если не использовать этот атрибут, то страница загрузится быстрее, а видео подгрузится при его включении пользователем; controls — показывает панель управления видео.

Замените пропорционально ширину и высоту видео (width и height — в двух местах) на свои, не забывая про соотношение его сторон: 4:3 или 16:9.

Последние две строчки: теги P и A с содержимым — позволят пользователю скачать видеофайл, если он всё-таки не сможет его просмотреть.

Вы сразу же сможете проверить работоспособность кода на вашем компьютере. Но для просмотра видео на сайте может потребоваться создать файл httpd.conf, поместить его в папку с видеофайлами — он должен содержать три строчки:

AddType video/ogg.ogv AddType video/mp4.mp4 AddType video/webm.webm

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

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

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

<video 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, где представлена инструкция по загрузке видео на сервис и правильном его оформлении. Этим способом можно продвигать любые товары и услуги в интернете, в т.ч. партнёрские инфопродукты.

Вставка аудио

Для того чтобы вставить аудио на страницу у нас в распоряжении опять 2 варианта: с mp3-плеером и без него — с помощью кода HTML5. У этого способа вставки аудио те же плюсы и минусы: он проще, но не поддерживается старыми браузерами (IE ниже v.9).

Способ 1. Код вставки аудио на страницу (где «papka/name.…» — путь к аудиофайлу, а «name» — его имя):

<audio controls> <source src="papka/name.mp3"> <source src="papka/name.ogg"> <source src="papka/name.wav"> <p>Ваш браузер не поддерживает прослушивание</p> <a href="papka/name.mp3">Скачать аудио</a> </audio>

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

Для снижения нагрузки на ваш сервер, желательно хранить аудиофайлы на стороннем ресурсе, таком как Я.Диск (см. ссылку выше).

Способ 2. Скачайте mp3-плеер (flv-mp3.com/ru) и поместите его в папку с аудиофайлами. На этом сайте есть возможность «собрать» плеер самому, т.е. задать ему свои настройки:

скачать mp3-плеер

При сборке аудио-плеера важны два параметра: адрес плеера — вы можете указать папку своего домена (что предпочтительнее), или подгружать его прямо с указанного сайта. Это отразится в коде, который вы сможете скопировать для вставки на веб-страницу, сразу после окончания сборки.

Второй параметр будет влиять на размеры и вид панели плеера, а так же надписи «Прослушать» — её вы измените на свою. Выглядеть панель будет как на следующем скриншоте, но вы сможете изменить цвет, форму и кнопки управления на более красивые:

вставка аудио

Если нужно — укажите автозапуск, а полученный код разместите на нужной странице — его, кстати, всегда можно будет отредактировать: вручную или снова посетив страницу сборки плеера.

Учимся делать видео для продвижения в интернете

Учимся делать видео для рекламы

Автор: С. Панфёров

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

Скачать книгу

Содержание:

webmastersam.ru

Как вставить видео на сайт? Универсальный HTML код

Всем привет. Сегодня будет коротенький пост, в котором я поделюсь с вами информацией, как вставить видео на сайт при помощи html кода. Конкретный пример будем рассматривать для CMS WordPress, но думаю, что такой способ подойдет и для обычных сайтов.

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

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

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

Как вставить видео на сайт? Снимаем нагрузку с движка

Конкретный пример вставки видео мы рассмотрим с сервиса ютуб, так как он самый популярный в рунете. Как произвести регистрацию и как вставлять видео при помощи плагина video embedder, надеюсь, вы знаете.

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

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

Приступим. Переходим на сайт ютуб, ищем видео, которое хотим вставить к себе в статью или просто на сайт. Затем нажимайте кнопку «поделиться», на скриншоте под номером 1.

Получение кода

2. Выбирайте HTML код;3. Копируйте полученный код.

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

Размер видео

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

Чтобы вставить код, нужно перейти в текстовый редактор, и в нужное место вставить код.

Текстовый редактор

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

Код записи

На скриншоте, код обведенный в красную рамку, параметры height и width задают ширину и высоту окна, их пожеланию можно изменить.

Еще я выровнял окно посредине. Делается это посредством заключения кода в блок div и придав атрибут align.

&lt;div align="center"&gt;код с ютуба&lt;/div&gt;

&lt;div align="center"&gt;код с ютуба&lt;/div&gt;

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

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

Новость. Вы слышали, что в Америке хотят сделать дефолт? У них всемирный долг составляет более 16 триллионов долларов. Нашел прикольную картинку.

Дефолт в америке

Как вам такие масштабы долга?))). Я думаю, что если произойдет дефолт, то будет всемирный переворот, а вы как думаете? Доллары еще в носках храните? :Ъ

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

С уважением, Михед Александр.

life-crazy.ru