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


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

Если на ваш сайт срочно потребовалось видео, но как сделать это с помощью HTML кода не знаете, то подробную инструкцию по созданию вы найдёте в этой статье. Обратите внимание, что залить видео предварительно нужно любой сервис: Youtube, Yandex video, Vimeo, Rutube, также подойдёт Mail. Только загрузив видео и получив на него прямую ссылку, вы сможете поместить его в код.

1

Зайдите на любой сервис по загрузке видео, в данной статье будет использован пример Youtube. Кликните на серую иконку загрузки справа вверху.

2

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

3

Дождитесь несколько минут, пока файл с видео загрузится. После этого скопируйте ссылку на него в поисковой строке сверху.

4

Теперь возьмём за пример такой код:

Где тег < h3 > Вставляем видео в код HTML < /h3 > — это ваш заголовок к видео, по желанию вы можете его не вставлять в файл вовсе, но с ним пояснение к видео файлу будет понятнее.

Тег <iframe width=»560″ height=»315″ … задаёт высоту и ширину окна видео ролика. Поменяйте его на другие значения, если вам не подходят шаблонные.

Далее строка src=»//https://www.youtube.com/watch?v=3CClOsC26Lw» задаёт ссылку на ваш видео ролик, эту строку вы должны были скопировать на третьем шаге.

И заканчивает код элемент — frameborder=»0″ allowfullscreen></iframe>. Это отменяет рамку видео и закрывает предыдущие теги.

Целый код принимает такой вид:

<h3> Вставляем видео в код HTML </h3><iframe width=»560″ height=»315″ src=»//https://www.youtube.com/watch?v=3CClOsC26Lw» frameborder=»0″ allowfullscreen></iframe>

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

Чтобы закрепить материал, посмотрите видео ролик ниже:

sovetclub.ru

Добавление видео на страницу при помощи HTML5

Тег <video> появился в HTML5, он позволяет добавлять и проигрывать видео на HTML-странице. Конечно, пока это будет работать только в некоторых браузерах: Safari 3,1 +, Firefox 3,5 +, и последние версии Оперы (и, возможно, в следующем выпуске Chrome).

html5video

"Старый" способ:

Брр, посмотрите этот ужасный код:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&amp;hl=en&amp;fs=1&amp;" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" src="http://www.youtube.com/v/oHg5SJYRHA0&amp;hl=en&amp;fs=1&amp;" allowscriptaccess="always" allowfullscreen="true"></embed></object>

И как вы, надеюсь, знаете, у Вас должен быть установлен Flash-плеер для того, чтобы видео проигрывалось. Или это часто вставлялось с помощью JavaScript, а поэтому данный способ не является совершенным.

HTML5 способ:

Хороший, чистый, минимальный код:

<video  src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer><p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p></video>  

Autoplay

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

<video src="abc.mov" autoplay></video>  

* Хотя автозапуск видео не нравится большинству посетителей сайтов и прежде чем добавить этот атрибут для вашего HTML 5 видео, хорошенько подумайте о необходимости автозапуска видео.

Download

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

Autobuffer

Атрибут autobuffer используется, когда функция автозапуска не используется. Видео загружается в фоновом режиме, поэтому, когда пользователь запускает видео, он сможет сразу же проиграть по крайней мере некоторую часть содержания. Если оба атрибута - автозапуск и автобуферизация используются, то автобуферизация игнорируется.

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

Poster

Используйте атрибут poster для отображения кадра видео (в формате. JPG,. PNG), в случае если видео не загружается по каким-либо причинам. Это могут быть локальные изображения или с другого веб-сайта.

<video src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png"><p>Try this page in Safari 4! Or you can <a href="http://www.youtube.com/demo/google_main.mp4">download the video</a> instead.</p></video>    

Вы должны использовать этот атрибут, если вы не хотите, чтобы пользователь ничего не увидел.

Controls

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

Текущие проблемы

Internet Explorer

Лидер рынка браузеров Internet Explorer не поддерживает на данный момент тег video, и это приходится учитывать при его использовании. Временным решением может быть сочетание старого способа вставки видео и нового, с помощью HTML5. Но код в таком случае выглядит ужасно:

<video src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png"><object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param value="http://www.youtube.com/demo/google_main.mp4"><param value="true"><param value="false"><embed src="http://www.youtube.com/demo/google_main.mp4"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed></object></video>    

Источник на англ. языке

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии:

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

www.webmasters.by

Как добавить видео на сайт — ТОП

Всем Привет !

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

 

Добавлять видео на свой Сайт, мы будем из Ютуба, поэтому зайдите на Сайт YouTube и выберите видео, которое вы хотели бы добавить на свой Сайт. Затем найдите под видео Вкладку — Поделиться, и нажмите на неё, затем у вас откроется Вкладка — HTML-код, то же нажмите на неё, у вас появится HTML-код, который нужно будет скопировать. (смотри фото)

18-06-2015 22-41-30

 

 

Теперь, после того как вы скопируете HTML-код интересующего вас видео, вам нужно зайти в свою админ-панель WordPress, и создать новую Запись или Страницу, куда вы будете добавлять своё видео. Либо можете открыть уже имеющиеся у вас на Сайте страницы или Записи для редактирования.

Затем вам нужно в Визуальном редакторе, справа, нажать на Вкладку Текст, и добавить на страницу HTML-код.

20-06-2015 13-38-09

 

 

Далее, перейдите Обратно во вкладку — Визуально, там у вас появится видео, которое отобразится на вашем сайте. Можете выставить видео по центру, добавить какое-либо описание к видео и т.д.

20-06-2015 13-38-44

 

 

Как изменить Размер Видео ?

 

Изменить размер видео можно 2 способами. 1 — Можете просто с помощью мышки, нажав на видео, потянуть за край видео, и тем самым изменить его размер в большую или меньшую сторону. 2 — Перейдите во вкладку Текст, и измените размер видео в самом HTML-коде.

20-06-2015 13-40-45

 

 

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

 

А у меня всё на этом, я надеюсь, что ответил на ваш Вопрос. До новых встреч, на страницах САМСАЙ !

У вас остались Вопросы ? тогда оставьте Комментарий к данной Записи !

 

info-effect.ru

info-effect.ru

Добавление видео

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

Тег <video> к сожалению работает только в HTML5. Служит для добавления, воспроизведения и управления настройками видеоролика на странице. Путь к видео файлу задается через параметр src или тег <source>. К сожалению нет браузера который поддерживает одновременно все кодеки, однако лидером в этом деле является Google Chrome. Чтобы видео воспроизводилось во всех браузерах, его необходимо кодировать с помощью различных кодеков и одновременно добавлять файлы различных форматов.

Тег <video> имеет следующие параметры:

  • autoplay - видео автоматически начинает проигрываться после загрузки веб-страницы.
  • controls - создает панель управления к вставленному видеоролику.
  • width - задает ширину области для воспроизведения видеоролика
  • height - задает высоту области для воспроизведения видеоролика
  • loop - после завершения видеоролика, проигрывает его сначала.
  • post - задает адрес изображения, которое будет отображаться, если видео недоступно или не может быть проиграно.
  • preload - задается для загрузки видеоролика вместе с загрузкой страницы.
  • src - указывает путь к файлу воспроизводимого видеоролика.

Пример вставки видео с различными кодеками в код HTML:

<html> <head> <title>video</title> </head> <body> <video controls="controls" poster="video.jpg"> <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'> </video> </body> </html>
Тег video не поддерживается вашим браузером. .

Еще один способ добавить видео на страничку, с помощью тега <img> и параметра dynsrc. Синтаксис:

<img dynsrc="C:\ваш файл.avi"> или <img dynsrc="http://Video/file.avi">
Появится небольшое окно, где будет воспроизводится ваше видео:

Добавление видео с YoTube и Vk

Однако, самый популярный и в тоже время простой способ вставить видео в ваш HTML код, это загрузить его на Youtube.com, если это видеоролик или клип или в Vk.com, если это объемное видео или фильм.

В случае с Youtube.com, загрузите видео на ваш канал или выберете уже готовое, кем-то закачанное, видео (авторское право при этом не нарушается). За тем под плеером нажмите вкладку "Поделиться" и "HTML-код". В результате появится код вроде этого:

<iframe src="//www.youtube.com/embed/8sbKVdHhz6U" frameborder="0" allowfullscreen></iframe>
Его можно отредактировать под ваш сайт, главное не изменять ссылку и вставлять в HTML код страницы. Выглядеть он будет так:

С vk.com все аналогично, под видео с правой стороны находится надпись - "Поделиться" за тем, жмете "Эскорт видеозаписи" и получаете код для вставки. Вид в браузере:

Коды видеороликов, как правило окружают парным тегом <center>, для того, чтобы окно плеера находилось по центру. Для более детальной настройки таких окон используется CSS. Параметры тега <iframe> будут рассмотрены тут - Iframe в HTML

phantomx5.ucoz.ru