Несколько способов, как вставить видео в HTML
Сайт в Интернете – это средство продвижения какой-то услуги или предмета. Но какой же веб-ресурс без медиа-контента? Практически на каждом сайте есть видеоролики, которые объясняют, привлекают, заинтересовывают. Поэтому владелец веб-ресурса стремится узнать, как вставить видео в HTML.
Способы создания сайтов
Итак, web-сайты – возможность представить информацию интерактивно. Как известно, интернет-ресурсы состоят из страниц, которые взаимосвязаны между собой гиперссылками. Как можно создать собственный сайт?
- Использовать технологию блоггинга. Что это значит? Зарегистрироваться на сайте и получить доменное имя второго уровня. Благодаря такой возможности владелец сайта становится администрацией своего ресурса и получает доступ к специальной панели. При помощи нее можно трансформировать «детище» по своему вкусу.
- Воспользоваться разработанными многочисленными конструкторами сайтов, по типу ucoz.ru, jimdo.com, setup.ru, Wix.com, A5.ru, Fo.ru, rusedu.net и т. д.
- Разработать интернет-ресурс посредством CMS, т. е. системы управления сайтом.
- Спроектировать собственный дизайн «детища» и воссоздать его посредством языка программирования HTML.
Однако сегодня создать полноценно функционирующий сайт на HTML практически невозможно, но, зная этот язык, разметки веб-страницы можно откорректировать, изменить структуру в готовых шаблонах.
Составные элементы части web-технологии
Технология web разделяется на следующие базовые компоненты:
- Различные по своему роду компьютерные сети взаимодействуют друг с другом по протоколу TCP/IP.
- Web стал одним из приложений Internet, которые предназначены для массового распространения разнообразной информации.
- В web-технологии носителями данных являются страницы, которые содержат медиа-контент (графику, видео, гиперссылки), поэтому нужно знать, как вставить видео в HTML.
- Чтобы передавать информацию-гипертекст технология web использует протокол HTTP.
- Для проектирования и создания веб-страниц применяется язык разметки гипертекста HTML.
- Чтобы просмотреть ресурсы в Internet, нужно воспользоваться браузером.
Способ № 1. Вставка медиа-контента (видео) посредством тегов HTML5
Существует несколько способов вставки видео контента на веб-страницу. Выделяют три варианта: вставка посредством HTML, плеера или YouTube. Для начала нужно создать обычный HTML5-файл, который будет содержать в себе стили страницы и несколько подзаголовков. После подготовки можно выбирать один из методов и наслаждаться результатом.
- Найти третий заголовок и прописать код прямо под ним:
- Открыть страницу в браузере и убедиться в появлении видео.
- Обязательно нужно правильно прописать путь к ролику.
- Чтобы вставка видео в HTML была грамотной, нужно разметить панель контроля видео. За это отвечает параметр controls.
Следует учесть, что такой способ примечателен не для всех. К примеру, в браузере Opera видео, размещенное таким способом, воспроизводиться не будет. Чтобы избежать такой ситуации, нужно конвертировать видеоролик в тип Ogg Theora, изменить код.
Конвертировать файл можно посредством сервиса online-convert.com. Затем нужно изменить код на такой:
Если старый браузер не понимает какой-то тег, тогда код может выглядеть следующим образом.
Способ № 2. Как вставить видео в HTML при помощи плеера
Видеоконтент можно вставлять в HTML без какой-либо преждевременной загрузки на видеосервис. Итак, можно воспользоваться скриптом плеера, чтобы выставить нужный ролик на сайт с расширением .mp4 или .flv. Прежде всего нужно выбрать сам ролик. Затем нужно выбрать один из множества бесплатных плееров. Как вариант, можно воспользоваться Flowplayer.
- Нужно скачать файлы указанного плеера на локальный компьютер.
- Разархивировать их в конкретную папку на создаваемом сайте.
- Открыть HTML-файл и подключить javascript-файл проигрывателя к подготовленному файлу. Для этого нужно прописать специальный код внутри тега HEAD. Важно: правильно указать путь к папке!
- Нужно разместить плеер в HTML-файле. Здесь нужно правильно прописать путь к файлам. Тут же указываются настройки, запрещающие видео запускаться автоматически. Если нужно, чтобы видео запустилось «автоматом», следует после пути к файлу убрать запятую, закрыть скобку (круглую) и поставить точку с запятой.
Такой способ довольно простой и понятный, чтобы добавить видео в HTML. Кстати, таким вариантом пользуются многие web-программисты.
Способ № 3. Вставка видео в HTML с Ютуба
После создания подготовительного файла HTML5 можно приступать к вставке видеоконтента с сервиса YouTube.
- Для начала нужно выбрать видеоролик, который будет находиться на странице. Он должен храниться на локальном компьютере.
- Нужно перейти на сайт youtube.com. Следует создать свой аккаунт или войти в уже существующий.
- После входа на свою страницу в YouTube требуется нажать кнопку «Добавить видео», после чего выйдет окно, в котором будет предложено выбрать файл для загрузки. Выбранный видеоролик загрузится спустя некоторое время.
- Можно перейти по ссылке загруженного файла, которая находится вверху.
- Чтобы получить код для вставки видео, нужно нажать «Поделиться» и «HTML-код». Страница выдаст программный код, который необходим. Здесь можно указать такие параметры, как-то: режим конфиденциальности, размер видео, возможность показать похожие записи.
- После настройки параметров код копируется и вставляется в подготовленный HTML-файл.
- Все готово. Теперь понятно, как вставить видео в HTML с сервиса YouTube.
Итак, были рассмотрены несколько способов вставки видео в HTML. Какой вариант выбрать – решать web-программисту или владельцу сайта.
Как вставить видео на сайт? Универсальный HTML код
Всем привет. Сегодня будет коротенький пост, в котором я поделюсь с вами информацией, как вставить видео на сайт при помощи html кода. Конкретный пример будем рассматривать для CMS WordPress, но думаю, что такой способ подойдет и для обычных сайтов.
Видео в контенте позволяет дольше задержать пользователя на вашем ресурсе, а чем дольше он проведет времени, тем лучше. На своем блоге я неоднократно говорю читателям, чтобы они делали уникальный и интересный контент + вставляли видео и картинки.
Такой вариант написания статей разбавит текст и сделает его более читабельным, а это нам и нужно. Чем проще и понятней вы излагаете свои мысли, тем больше людей вас поймут, и тем большим людям вы понравитесь. Поэтому, не стоит пренебрегать видео.
Как вставить видео на сайт? Снимаем нагрузку с движка
Конкретный пример вставки видео мы рассмотрим с сервиса ютуб, так как он самый популярный в рунете. Как произвести регистрацию и как вставлять видео при помощи плагина video embedder, надеюсь, вы знаете.
Но плагины создают дополнительную нагрузку на блог, и от этого он медленней открывается, а поисковые роботы очень любят, когда сайты шустрые.
Давайте же избавимся от плагина и научимся вставлять видео на сайт при помощи обычного html кода. Сразу хочу сказать, если вы до этого пользовались плагином, то все видео нужно будет вставлять сначала, так как после деактивации плагина, видео которое вставлялось ранее, отображаться не будет.
Приступим. Переходим на сайт ютуб, ищем видео, которое хотим вставить к себе в статью или просто на сайт. Затем нажимайте кнопку «поделиться», на скриншоте под номером 1.
2. Выбирайте HTML код;
3. Копируйте полученный код.
Также, здесь сразу можно задать размер окна для видео, выбирается в выпадающем меню, размеры задаются в зависимости от возможностей вашей темы.
Допустим, не один из предложенных размеров меня не устроил, поэтому, я задал свои цифры. Где их менять, читайте ниже.
Теперь, для вставки видео в статью, открывайте ее и ищите место, где его отображать, зачастую я размещаю их после основного текстового содержимого.
Чтобы вставить код, нужно перейти в текстовый редактор, и в нужное место вставить код.
В текстовом редакторе визуально не будет видно форматирования, вместо этого, будут отображаться различные html коды, не нужно бояться, вам необходимо найти те слова, после которых хотите видеть видео и вставить скопированный код с ютуба.
На скриншоте, код обведенный в красную рамку, параметры height и width задают ширину и высоту окна, их пожеланию можно изменить.Еще я выровнял окно посредине. Делается это посредством заключения кода в блок div и придав атрибут align.
<div align="center">код с ютуба</div> |
<div align=»center»>код с ютуба</div>
После вставки, не забудьте сохранить. Вот таким легким способом можно избавиться от плагина и ускорить работу своего блога.
Новость. Вы слышали, что в Америке хотят сделать дефолт? У них всемирный долг составляет более 16 триллионов долларов. Нашел прикольную картинку.
Как вам такие масштабы долга?))). Я думаю, что если произойдет дефолт, то будет всемирный переворот, а вы как думаете? Доллары еще в носках храните? :Ъ
Подписывайтесь на обновления блога, вскоре будет денежный кроссворд, призы получать самые шустрые, не пропустите.
С уважением, Михед Александр.
Как вставить флэш-ролики, видео и аудио файлы в HTML документ? Урок №18
Думаю, пришло время получить ответ на вопрос, как вставить флэш-ролики, видео и аудио файлы в HTML документ.
Покажу несколько способов, как вставить видео ролик или аудио файл.
Способ 1.
Видео и аудио файл можно вставить в HTML-документ с помощью тега <embed>.
<embed src="bloggood-ru.swf">
Закрывающий тег не требуется.
Возможно, когда вы проверите пример, ваш браузер может потребовать подключения к специальному плагину:
Вид плеера зависит от подключенного плагина и атрибутов тега <embed>.
Например, вот Google Chrome:
Или в Internet Explorer:
Атрибуты EMBED
height — высота плеера (в пикселях). Пример:
<embed src="bloggood-ru.swf">
width — ширина плеера (в пикселях). Пример:
<embed src="bloggood-ru.swf">
src — адрес флэш-ролика, видео или аудио файла. Пример:
<embed src="bloggood-ru.swf">
type — указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.
pluginspage — адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.
autostart — если параметр стоит «0», то это значит, что после загрузки веб-страницы, плеер будет остановлен. Если указать параметр «1», тогда после загрузки веб-страницы, плеер будет автоматически воспроизведен (работает в браузере IE). Пример:
<embed src="bloggood.swf" autostart="0">
title — вывод всплывающей подсказки при наведении курсора мышки на аудио или видео плеер. (Работает в браузере IE).
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <title>ТЕГ embed</title> </head> <body> <embed src="bloggood-ru.mp4" autostart="0" ENGINE="application/x-mplayer2" pluginspage="https://www.macromedia.com/go/getflashplayer"> </body> </html>
Результат в Google Chrome:
А можно вот так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>ТЕГ embed</title> <META HTTP-EQUIV="content-type" CONTENT="TEXT/HTML; CHARSET=windows-1251"> </head> <body> <embed src="bloggood-ru.mp4"> </body> </html>
Результат в Google Chrome:
Способ 2.
Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash можно вставить в HTML-документ с помощью тега <OBJECT>.
<OBJECT data="путь к объекту" type="тип объекта"></OBJECT>
Закрывающий тег обязателен.
Атрибуты OBJECT
data – указывает путь к файлу объекта;
type – тип обекта (не является обязательным). Например:
type=»application/x-shockwave-flash» или type=»image/png» и т.д.;
width – ширина;
height–высота
Также можно прописать текст между открывающими тегами <object> </object>. Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object.
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <title>Тег OBJECT</title> </head> <body> <object data="bloggood-ru.swf"> Ваш браузер не поддерживает тег object </object> </body> </html>
Результат данного примера в окне браузера, если он не поддерживает тег OBJECT:
Способ 3.
Вставить аудио на веб-страницу можно и тегом <AUDIO>:
<AUDIO SRC="sound.wav"></AUDIO>
Атрибуты тега AUDIO
autoplay — аудио воспроизводится автоматически сразу после загрузки веб-страницы;
controls — панель управления к аудио плееру;
height — высота аудио плеера;
loop — повтор воспроизведение аудио сначала после его завершения;
src — путь к аудио файлу
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <title>ТЕГ AUDIO</title> </head> <body> <AUDIO SRC="bloggood-ru.mp3" controls="controls" autoplay="autoplay" loop="loop"></AUDIO> </body> </html>
Результат:
Вставить видеоролик на веб-страницу можно и тегом <VIDEO>:
<VIDEO SRC="kino.ogg"></VIDEO>
Атрибуты тега VIDEO
autoplay — видео воспроизводится автоматически сразу после загрузки веб-страницы;
controls — панель управления к видео плееру;
height — высота видео плеера;
width — ширина видео плеера;
loop — повтор воспроизведение видео сначала после его завершения;
src — путь к видео файлу;
poster — адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.
Пример:
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <title>ТЕГ VIDEO</title> </head> <body> <video src="bloggood-ru.mp4" controls="controls" poster="kartinka.png"> Тег video не поддерживается вашим браузером. <a href="bloggood-ru.mp4">Скачайте видео</a>. </video> </body> </html>
Результат:
Вначале загружается картинка «kartinka.png».
Когда вы нажмете «плей», картинка исчезнет и заработает видео:
Если браузер не поддерживает тег <video>, вы увидите вот это:
Вот и все.
Если есть исправление, дополнение или вопросы по теме «как вставить флэш-ролики, видео и аудио файлы в HTML документ», пишите в комментарии, постараюсь ответить.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
Как вставить видео на сайт? Подробно!
В этой статье мы поговорим о том, как вставить видео на сайт и научимся:
- Размещать свои файлы на видео хостингах и отображать их на сайте.
- Загружать видео на свой хостинг и отображать их на сайте с помощью плеера.
Ни для кого не секрет, что видео с каждым годом становится все более популярным видом контента. Сегодня обычных пользователей уже не просто задержать на своем сайте или ресурсе только с помощью красивых картинок и хорошо написанных текстов, нужно видео которое сделает пребывание на сайте еще более интересным. Перейдем к инструкциям:
Как загрузить видео на Youtube:
- Первым делом Вам необходимо войти в свой аккаунт YouTube.
- Нажмите кнопку Добавить видео в верхней части страницы.
- Выберите ролик для загрузки. (Учитывайте, что видео не должно нарушать авторские права. Если Вы хотите наложить на видео известную музыку, то придется ее купить).
- Пока файл загружается заполните основную информацию о ролике и при необходимости дополнительные параметры.
- Чтобы добавить видео на YouTube, нажмите Опубликовать.
- Пока вы не нажмете кнопку Опубликовать, видео доступно только вам.
С более подробной инструкцией по загрузке видео на Youtube можете ознакомиться на странице supporta
Вставить на сайт видео с Youtube:
Чтобы вставить уже загруженное (имеющееся) на Youtube видео:
- Откройте интересующее Вас видео на Youtube;
- Нажмите на находящуюся под видео кнопку «Поделиться»;
- Выберите вкладку «HTML» и скопируйте появившийся код; (Чтобы скопировать код быстрее: нажмите правой кнопкой мыши по видео и выберите пункт «Копировать HTML-код.)
- Вставьте скопированный код в нужную часть сайта.
- Сохраните изменения и обновите страницу.
Вставить на сайт видео с Vimeo:
- Откройте понравившееся на Vimeo Вам видео;
- Нажмите на находящуюся под видео кнопку «Share»;
- В появившимся окошке в пункте «Embed» скопируйте код;
- Вставьте скопированный код в нужную часть сайта.
- Сохраните изменения и обновите страницу.
Вставить на сайт видео с Rutube:
- Откройте нужное на RuTube Вам видео;
- Нажмите на находящуюся под видео кнопку «поделиться»;
- Выберите вкладку «Код вставки»
- Скопируйте появившийся код;
- Вставьте скопированный код в нужную часть сайта.
- Сохраните изменения и обновите страницу.
Вставить на сайт видео с VK (Вконтакте):
- Откройте видео; (Возможно понадобится авторизация).
- Нажмите на находящуюся под видео кнопку «Еще»;
- Выберите вкладку «Экспортировать» в появившемся окне «Код для вставки» скопируйте появившийся код;
- Вставьте скопированный код в нужную часть сайта.
- Сохраните изменения и обновите страницу.
Мы рассмотрели несколько способов вставки кода с видео которые уже загружены на один из популярных видео хостингов.
Теперь рассмотрим варианты воспроизведения видео с загруженным видео на свой сервер.
Вставить видео на сайт с помощью HTML5
Для этого способа Вам понадобится тег video
<span><<span>video</span>></span> <span><<span>source</span><span> src=<span>»URL»</span></span>></span> <span></<span>video</span>></span>
<span><<span>video</span>></span> <span><<span>source</span><span> src=<span>»URL»</span></span>></span> <span></<span>video</span>></span> |
- Загружаем на сервер видео;
- Копируем вышеуказанный код;
- Вставляем в нужную нам часть сайта скопированный код;
- Изменяем URL на путь к файлу который мы разместили на хостинге
- Сохраняем изменения и обновляем страницу.
Для тега video существует несколько атрибутов, так же некоторые из них встречаются в кодах которые предлагают популярные видео хостинги.
В первую очередь хотелось бы сказать о таких атрибутах как height (высота), width (ширина).
С их помощью вы можете настроить высоту и ширину области для воспроизведения видеоролика.
- src — это самый важный атрибут, он указывает путь к видеоролику.
- autoplay — воспроизведение видео сразу после загрузки страницы.
- loop — повтор воспроизведения видео по завершению
- poster — указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.
- preload — загрузка видео вместе с загрузкой веб-страницы.
Вставить видео на сайт с помощью плеера
Сейчас в интернете есть множество различных плееров которые вы можете использовать на своем сайте. В качестве примера я выбрал один из популярных flowplayer.
- Скачайте плеер, а затем его разархивируйте;
- Создайте папку и поместите в нее файлы из архива;
- Подключите javascript-файл плеера к html-файлу. Для этого внутри тега head, пропишите следующий код:
<script src=»flowplayer.min.js»></script>
<script src=»flowplayer.min.js»></script>
Будьте внимательнее прописывая путь к файлу. Вы можете не создавать папку, а положить файл скрипта в любую другую папку например в папку с другими скриптами. - Теперь разместим сам плеер в коде страницы и соответственно видео файл.
<!— 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) после перехода в режим «визуально» будет отображаться плеер.
На этом я заканчиваю статью надеюсь она была полезной для Вас.
Как добавить видео на свой сайт с использованием тега video в html5
На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на youtube, скопировали код для размещения на своем сайте, все работает, все красиво, но вот во время просмотра всплывает реклама, которая очень не нужна в данном случае. Начали искать другие видео-ресурсы, на которых можно разместить свое видео, оказалось, что у всех показывается реклама во время просмотра видео. Тогда приняли решение разместить видео на своем хостинге и вывести его на странице с помощью тега <video>.
Самый простой способ вывести видео на странице это прописать такой код:
<video src="video/demidov-park-promo.mp4" poster="images/screenshot.jpg" controls="controls" preload="auto"></video>
Где указан
- id – идентификатор для тега, размеры видео (ширина, высота),
- src – путь к видеофайлу, poster – картинка, которая будет заставкой для окна видео,
- controls – подключение встроенной в браузер панели управления для видео (у каждого браузера свои элементы управления),
- preload – возможность начать загрузку видео сразу при при открытии страницы, что позволит запустить видео без задержек на загрузку, которая при стандартных настройках начнется только после нажатия кнопки Play.
Из всех этих параметров обязательным является только src – путь к файлу видео, остальные по желанию. Более подробно про тег <video> можно прочитать здесь.
Но во время размещения видео столкнулись с некоторыми проблемами, потому как разные браузеры поддерживают разные кодеки и поэтому не все воспроизводят видео в формате .mp4. Пришлось искать программы для конвертации видео в нужные форматы, помогли эти программы:
DVDVideoSoft Free Studio – программа для конвертации видео в формат .ogv
FreeWebMVideoConverter – программа для конвертации видео в формат .webm
И на сайте разместили по итогу такой код для вывода видео:
<video poster="images/screenshot.jpg" controls="controls" preload="auto"> <source src="video/demidov-park-promo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="video/demidov-park-promo.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="video/demidov-park-promo.ogv" type='video/ogg; codecs="theora, vorbis"' /> <object type="application/x-shockwave-flash" data="video/uppod.swf"> <param name="bgcolor" value="#ffffff" /> <param name="allowFullScreen" value="true" /> <param name="allowScriptAccess" value="always" /> <param name="movie" value="video/uppod.swf" /> <param name="flashvars" value="comment=video_flv&m=video&file=demidov-park-promo.mp4" /> </object> </video>
Благодаря такому коду видео будет воспроизводиться в любых браузерах, а если в каких-то и не откроется, тогда сработает последнее правило и видео откроется с помощью flash-проигрывателя.
Могут возникнуть проблемы с MIM-типами. MIM-типы – часть значения атрибута type у тега source. Но добавление атрибута type не является достаточным, вы также должны убедиться, что ваш веб-сервер включает в HTTP-заголовок Content-Type соответствующий MIME-тип.
Если вы применяете веб-сервер Apache или его производные, то можете использовать директиву AddType в httpd.conf или файле htaccess расположенный в той директории, где вы храните ваши видеофайлы. Если вы используете другой веб-сервер, обратитесь к документации вашего сервера о том, как установить HTTP-заголовок Content-Type для определенных типов файлов.
Добавьте в свой файл htaccess в корне сайта такие правила:
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm
Первая строка предназначена для видео в контейнере Ogg. Вторая строка для видео в контейнере MPEG-4. Третья для WebM. Установите это один раз и забудьте. Если вы не указали эти директивы, ваше видео может не играть в некоторых браузерах, даже если включены MIME-типы в атрибуте type вашего HTML-кода.
Вот так выглядит прогрыватель видео в Firefox:
Ссылка на видео и HTML-код для вставки видео на сайт c YouTube
Интерфес на YouTube поменялся и статья «Как получить HTML-код для вставки на сайт видео с YouTube» немного устарела, хотя все принципы получения HTML-кода видео для вставки на сайт остались прежними. К тому же хочется ещё затронуть вопрос о том, как получить просто ссылку на видео с Ютуба. Поэтому решил обновить материал и добавить в него информацию про ссылку на видео. Итак, обо всём по порядку:
Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт c YouTube
Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт находится справа под заголовком видео YouTube (под самим видео). Рядом с кнопками лайков и прочими ссылками по пользовательскому управлению видео.
Для того, чтобы открыть панель со ссылкой на видео и HTML-кодом для вставки, нужно найти эту кнопку и кликнуть по ней один раз левой кнопкой мышки:
Как скопировать ссылку на видео YouTube
После того, как открыто всплывающее окно со ссылками, нужно обратить внимание на строчку типа:
https://youtu.be/lNRu0M5jMyg
Она находится под кнопками социальных сетей. Именно эта ссылка и является ссылкой на выбранное видео на Ютубе. Скопировать её можно выделив мышкой и нажав Ctrl + C
, а можно просто кликнуть мышкой по кнопке «Копировать». После копирования ссылку можно отправить по электронной почте, в мессенждере, вставить в пост в соц.сетях или разместить в виде ссылки у себя на сайте. О том, что ссылка скопирована будет уведомление в нижнем левом углу экрана «Ссылка скопирована в буфер обмена»:
Как получить HTML-код для вставки на сайт видео с YouTube
Кнопка «Встроить» HTML-код с YouTube
Для того, чтобы получить HTML-код для вставки на сайт видео с YouTube нужно кликнуть левой кнопкой мышки один раз по кнопке в виде <>
с названием «Встроить». Эта кнопка первая в верхнем ряду кнопок со ссылками на соц.сети:
Копирование HTML-кода для вставки на сайт видео с YouTube на широких экранах
На широких экранах при раскрытии нового всплывающего окна в нижнем правом углу будет ссылка-кнопка «Копировать». После клика по этой кнопке, HTML-код для вставки видео с Ютуба будет скопирован в буфер обмена. Об этом будет сообщено в надписи в нижнем правом углу экрана: «Ссылка скопирована в буфер обмена». После этого, полученный код можно вставлять в HTML-документ.
Код выглядит например так:
<iframe src="https://www.youtube.com/embed/lNRu0M5jMyg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Ну и конечно картинка, как найти эту кнопку «Копировать» на Ютубе:
Копирование HTML-кода для вставки на сайт видео с YouTube на узких экранах
На узких экранах кнопки «Копировать» почему-то дизайнерами YouTube не предусмотрено, поэтому HTML-код для вставки нужно скопировать вручную. Для этого нужно кликнуть один раз левой мышки в любое место, где расположен код:
После этого весь код для вставки на сайт выделится, останется нажать только Ctrl + C
, чтобы он попал в буфер обмена, после этого его можно будет вставить в HTML-код страницы на сайте:
Для тех, кто привык пользоваться мышкой для копирования, нужно кликнуть правой кнопкой мышки по выделенному HTML-коду. Откроется контекстное меню браузера. Из него нужно выбрать пункт «Копировать»:
Резюме:
Таким образом можно быстро найти и скопировать либо ссылку на видео с YouTube, либо HTML-код для вставки на сайт видео.
Заберите ссылку на статью к себе, чтобы потом легко её найти 😉
Выберите, то, чем пользуетесь чаще всего:
Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )
Как вставить видео на сайт
Развивая свой сайт, любой начинающий веб-мастер, однажды придёт к тому, что газетно-журнальный формат сайта ему покажется недостаточно современным и скучноватым. Сайт можно оживить с помощью видео. Видео, для многих владельцев сайтов, просто необходимо. Учебные видеоролики, видео с описание товаров и услуг, видео для просмотра фильмов в режиме онлайн — часто является необходимым атрибутом сайта. Видео — очень удобный, современный и пользующийся популярностью способ подачи и оформления материала для сайта. Вставить видео на сайт можно разными способами, рассмотрим некоторые из них.
Вставка видео с помощью видеохостинга YouTube
Сущность этого способа вставки видео заключается в том, что файлы видео будут храниться на видеохостинге, а мы просто воспользуемся ссылкой на ролик, которую разместим на своём сайте.
В первую очередь нужно зарегистрироваться на сайте. Если у вас есть аккаунт Google, вы сможете воспользоваться им. Для этого пройдите по этой этой ссылке.
1. После успешной регистрации вы попадёте в свой аккаунт. Если у вас уже есть аккаунт Google, вам будет предложено создать канал для видео и после заполнения несложной формы вы сможете добавлять видео. Кликните по кнопке «Добавить видео».
2. Выберите файл на своём компьютере и нажмите «Загрузить». После загрузки изображения, под окном просмотра видеоролика, появится HTML-код, который нам необходим.
3. Скопируйте HTML-код плеера и вставьте на страницу своего сайта. Размеры плеера можно изменить с помощью атрибутов height и width (высота и ширина). Ниже можете увидеть ролик, который загружен мною для того, чтобы вы могли посмотреть, как это будет выглядеть.
Вставка видео с помощью видеохостинга RuTube
Сущность этого способа вставки видео идентична вышеописанному.
Для этого нужно пройти по этой ссылке и зарегистрироваться на сайте, заполнив небольшую анкету.
1. После успешной регистрации вы попадёте в свой аккаунт. Кликните по кнопке «Добавить ролик»
2. Через кнопку «Обзор» выберите файл на своём компьютере. Заполните представленную ниже форму (описание, категория). Нажмите «Загрузить»
3. После загрузки вернитесь на личную страницу и обновите её. Вы увидите загруженный ролик (если ролик находится в обработке, придётся немного подождать). Когда ролик будет готов к просмотру, кликните по нему мышью. В открывшемся окне начнёт воспроизводиться видеоролик. Под ним расположено небольшое меню. Перейдите на вкладку «Ссылка и код» и увидите код плеера.
4. Скопируйте код плеера и вставьте на сайт. Размеры плеера можно изменить, изменив в HTML-коде плеера параметры атрибутов height и width.
Мы рассмотрели два аналогичных способа вставки видео на сайт. Они отличаются простотой, но здесь есть небольшой недостаток — предложение просмотра других видео. Это значит, что посетитель вашего сайта, может увлечься другим видео и покинет ваш сайт. Ниже мы рассмотрим иной способ вставки видеороликов, не похожий на предыдущие.
Вставка видео с помощью сервиса Uppod.ru
В чём отличие этого сервиса для вставки видео на сайт? Сервис представляет конструктор плееров, которыми вы можете воспользоваться.
Конструктор плееров позволяет, быстро собрать индивидуальный плеер, без специальных знаний. Все файлы будут размещаться на вашем сайте. Работа плеера не контролируется сайтом, его предоставляющим и не содержит его рекламы. Видео вы будете хранить у себя на сайте.
Для начала нужно зарегистрироваться на сайте. После чего следует выполнить следующие действия:
- Создайте в корне вашего сайта (там где находится главная страница) три папки: video, styles, и player.
- Скачайте файл плеера, кликнув мышкой по ссылке «Скачать плеер», которая находится в левом верхнем углу.
- Распакуйте скачанный архив. Файл плеера uppod.swf закачайте в папку player, которая находится на вашем сайте.
1. После выполненных действий, зайдите в свой аккаунт. Перейдите на вкладку «Плеер» и нажмите «Видео»
>
2. Появится меню из трех пунктов Стили, Файлы и Плейлисты. Нажмите на «Стили», потом на «+»
3. Появится форма, в которую нужно ввести название стиля. Дайте название вашему стилю и нажмите «OK».
4. Подождите пока загрузиться и откроется визуальный редактор. Сделайте необходимые настройки для создания стиля. Нажмите кнопку «Сохранить».
5. Теперь можно скачать стиль. Для этого, сразу после сохранения стиля, нажмите на кнопку «Скачать стили». Или перейдите на вкладку «Плеер». Нажмите на «Видео» — «Стили». Кликните мышкой по названию созданного стиля и в открывшемся меню нажмите «Скачать»
6. Скачанный файл стиля закачайте в находящуюся на сайте папку styles.
7. Закачайте файл видео, который вы хотите разместить на сайте, в находящуюся на сайте папку video. Имя файла должно быть на латинице.
8. Теперь перейдите на вкладку «Файлы» и нажмите «+» (добавить). Нужно добавить файл, указав его название, ссылку и выбрав стиль плеера. Жмём «OK»
9. Чтобы проверить правильность путей, перейдите вкладку «Плеер» — «Настройки». Если вы собираетесь создавать плейлисты, создайте папку pl
10. Теперь нужно забрать код. Для этого перейдите в меню «Файл». Кликните мышкой по названию видеоролика и нажмите «Код». Полученный код вставьте на свой сайт.
Перед вами пример сконструированного плеера. С конструктором плееров очень удобно работать: плеер можно редактировать, вставлять рекламу. Интерфейс конструктора плеера прост и понятен, позволяет быстро освоить программу.
Мы рассмотрели несколько способов вставки видео на сайт. Существует ещё один, совершенно отличный от предыдущих, способ вставки видео. Это способ с использованием компонента AllVideos Reloaded. Но это материал для отдельной статьи.
У Вас недостаточно прав для добавления комментариев. Возможно, Вам необходимо зарегистрироваться на сайте.