Как вставить видео с компьютера в html – Как вставить флэш-ролики, видео и аудио файлы в HTML документ? Урок №18

Содержание

Несколько способов, как вставить видео в 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-программисту или владельцу сайта.

Как вставить видео на сайт? Универсальный 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">

Закрывающий тег не требуется.

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

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Вид плеера зависит от подключенного плагина и атрибутов тега <embed>.

Например, вот Google Chrome:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Или в Internet Explorer:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Атрибуты 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:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

А можно вот так:


<!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:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Способ 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:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Способ 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>

Результат:

Как вставить флэш-ролики, видео и аудио файлы в 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».

Как вставить флэш-ролики, видео и аудио файлы в HTML документ

Когда вы нажмете «плей», картинка исчезнет и заработает видео:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Если браузер не поддерживает тег <video>, вы увидите вот это:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ

Вот и все.
Если есть исправление, дополнение или вопросы по теме «как вставить флэш-ролики, видео и аудио файлы в HTML документ», пишите в комментарии, постараюсь ответить.

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


Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: html, основы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

  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) после перехода в режим «визуально» будет отображаться плеер.

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

Как добавить видео на свой сайт с использованием тега video в html5

Hosting CityHost

На одном из сайтов клиента понадобилось добавить видео на страницу. Вроде бы задача не сложная, загрузили видео на 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&amp;m=video&amp;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:
video-html5

Ссылка на видео и HTML-код для вставки видео на сайт c YouTube

Ссылка на видео и HTML-код для вставки видео на сайт c YouTube

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

Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт c YouTube

Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт находится справа под заголовком видео YouTube (под самим видео). Рядом с кнопками лайков и прочими ссылками по пользовательскому управлению видео.

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

Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт c YouTube

Как скопировать ссылку на видео YouTube

После того, как открыто всплывающее окно со ссылками, нужно обратить внимание на строчку типа:

https://youtu.be/lNRu0M5jMyg

Она находится под кнопками социальных сетей. Именно эта ссылка и является ссылкой на выбранное видео на Ютубе. Скопировать её можно выделив мышкой и нажав Ctrl + C, а можно просто кликнуть мышкой по кнопке «Копировать». После копирования ссылку можно отправить по электронной почте, в мессенждере, вставить в пост в соц.сетях или разместить в виде ссылки у себя на сайте. О том, что ссылка скопирована будет уведомление в нижнем левом углу экрана «Ссылка скопирована в буфер обмена»:

Как скопировать ссылку на видео YouTube

Как получить 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-код для вставки нужно скопировать вручную. Для этого нужно кликнуть один раз левой мышки в любое место, где расположен код:

нопки «Копировать» почему-то дизайнерами YouTube не предусмотрено

После этого весь код для вставки на сайт выделится, останется нажать только Ctrl + C, чтобы он попал в буфер обмена, после этого его можно будет вставить в HTML-код страницы на сайте:

Копирование HTML-кода для вставки на сайт видео с YouTube на узких экранах

Для тех, кто привык пользоваться мышкой для копирования, нужно кликнуть правой кнопкой мышки по выделенному 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. Но это материал для отдельной статьи.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *