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

Оцените материал
(0 голосов)

Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.
Самый простой в исполнении - первый способ. Однако у него есть как плюсы, так и минусы. В случае загрузки видео со специального видеосервиса нужно выполнить три пункта:
1. Зарегистрироваться на видеосервисе (Например: Youtube, Yandex video, Rutube)
2. После регистрации у Вас появится возможность загрузить видео
3. Получить код видео и вставить к себе на сайт

 


После этого Вы вставляете полученный код к себе на страницу. Получается примерно следующий отрезок кода:
Код HTML

 

 

  <objectwidth="470"height="353">     
<paramname="movie"value="http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d">     <paramname="wmode"value="window">     <paramname="allowFullScreen"value="true">     <embedsrc="http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d"
type="application/x-shockwave-flash"wmode="window"allowfullscreen="true"width="470"height="353">   </object>

 Просмотреть  пример

Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.
Второй способ покажется немного сложнее. Во-первых, видео целиком нужно залить на хостинг, а он, как известно, не резиновый, во-вторых, для проигрывания даного видео (кроссбраузерного - так, чтобы во всех браузерах всё было одинаково!) следует использовать видео-проигрыватель, который уже не надо скачивать, а достаточно только подключить в head Вашего документа.
Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer (скачать FlowPlayer). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:

Код HTML

<scripttype="text/javascript"src="flowplayer/flowplayer-3.2.2.min.js"></script>

Останется только на самой стране вставить код для проигрывания видео. В href не забудьте вставить путь к видео.

<ahref="путь_к_swf_видео"style="display: block; width:500px; height:400px;"id="player"></a>
<scriptlanguage="JavaScript">   flowplayer("player",{src :"http://адрес_вашего_сайта/flowplayer/flowplayer-3.2.2.swf", wmode:"transparent"});
</script>

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

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

 

Первое что нам нужно - это иметь какое-то видео-ролик, который мы хотим вставить. Предположим, что он у нас есть и сохраняется на нашем локальном компьютере.
 Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно провести вход с помощью учетной записи Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.
 
2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере. После того, как Вы выбрали нужный файл, он начнет загружаться. Нужно подождать немного, пока он полностью не загрузится.
 После того, как видео загрузилось полностью, Вы можете перейти по его ссылке (ее можно увидеть вверху, сразу после сообщения о том, что загрузка завершена).
Когда Вы перейдете по этой ссылке, то увидите Ваше видео, размещенное на сервисе Youtube.


3. Теперь нам нужно получить код для вставки видео на нашу веб-страницу. Для этого сразу под видео щелкните по вкладке «Поделиться», а в ней по вкладке «HTML-код».
 
Теперь Вы можете увидеть html-код, который понадобится нам для вставки. Здесь также можно задать и некоторые другие параметры, такие как: размер видео, показывать или похожие видео после окончания просмотра и режим конфиденциальности.

Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:
<h2> 1 Способ: Вставляем видео с помощью сервиса Youtube </ h2>
<Iframe width = "560" height = "315" src = "// www.youtube.com/embed/FkX88N4pCow?rel=0" frameborder = "0" allowfullscreen> </ iframe>
И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставить и его можно посмотреть.

 

Вставка видео или тег video в HTML5


Позволяет встраивать, воспроизводить и управлять настройками видеоролика на веб-странице.
Синтаксис

<video>
 <sourcesrc="URL">
</video>

Атрибуты тега video
autoplay - Видео начинает воспроизводиться автоматически после загрузки страницы.

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

Пример кода тега video

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

 Вставка видео с помощью в html-страницу при помощи embed

Элемент embed используется для загрузки и отображения объектов (например, видеофайлов, флэш-роликов, некоторых звуковых файлов и т.д.), которые исходно браузер не понимает. Чем метод отличается от предыдущих? В большинстве случаев, подобные объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.

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

<!DOCTYPE html><html>
  <head>
    <metacharset="utf-8">
    <title>Пример кода с тегом EMBED</title>
  </head>
  <body>
    <embedsrc="images/examle.swf"width="400"height="300"
           type="application/x-shockwave-flash"
           pluginspage="http://www.macromedia.com/go/getflashplayer">  
  </body></html>

Используемые атрибуты тега embed
align - определяет как объект будет выравниваться на странице и способ его обтекания текстом
height - высота объекта
hidden - указывает, скрыть объект на странице или нет
hspace - горизонтальный отступ от объекта до окружающего контента
pluginspage - Адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру
src - как и везде - это путь к файлу
type - MIME-тип объекта
vspace - вертикальный отступ от объекта до окружающего контента.
width - ширина объекта

Прочитано 2622 раз Последнее изменение Воскресенье, 19 февраля 2017 16:30
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+