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

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

Зачем сайту видео?

Люди, исповедующие консервативный взгляд на значение интернета в распространении информации, рассматривают его как цифровой вариант обычного печатного таблоида. Но прогрессивная часть пользовательской аудитории не готова мириться с таким мнением. Им мультимедийность подавай! Одним из таких веяний и является ретрансляция видео с Youtube на своем сайте.

  • Дополнительный источник дохода – за показ видеороликов владелец сайта получает деньги;
  • Дополнение к материалу – часто видео данные выступают дополнением к текстовому контенту. Это делает изложение информации более полным и исчерпывающим. Особенно эффективно использование такого дополнения во время обучающего процесса;
  • Как способ привлечения посетителей – можно вставить видео на сайт, чтобы увеличить популярность ресурса. Но для этого нужно использовать уникальные ролики, и лучше те, которых нет на популярных видео хостингах. Например, если вы являетесь автором какого-нибудь курса. И чтобы увеличить посещаемость своего сайта, бесплатно выкладываете на нем некоторые из уроков для просмотра;
  • В форме портфолио – подразумевается использование пространства ресурса для демонстрации своих возможностей как высококлассного специалиста в какой-либо сфере. Это могут быть видеоролики, в процессе съемки которых автор выступал режиссером и оператором. Или отснятая обстановка помещения, дизайн которой разрабатывался вами.
  • Как становится ясно из сказанного выше, видео на сайте может стать мощным инструментом популяризации, продвижения и заработка на своем ресурсе. Поэтому стоит более подробно ознакомиться со способами его размещения.

    Способы размещения видео на сайте

    Здесь мы рассмотрим наиболее популярные способы. Вот они:

    1. Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube . Он находится сразу под окном плеера во вкладке « HTML-код »:


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

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

    • width – задается длина окна фрейма;
    • height – устанавливается высота окна плавающего фрейма;
    • src – путь к файлу, содержимое которого будет воспроизводиться;
    • frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);
    • allowfullscreen – разрешение на полноэкранное отображение видео.

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

    Для демонстрации мы взяли шаблон простого двухстраничного сайта. Код плавающего фрейма вставляется в любой из блоков


    А вот как отображается видео в плеере на странице нашего шаблона:

    1. Использование тега — позволяет размещать, воспроизводить и проигрывать видео на веб-странице. Его атрибуты:
    • autoplay – воспроизведение видео начинается сразу после загрузки страницы сайта;
    • controls – к ролику добавляется панель управления проигрывателем;
    • width, height – отвечают за размеры окна видеоплеера;
    • loop – включает автоматическое повторение воспроизведения видео сразу после его окончания;
    • poster – устанавливает картинку, которая будет отображаться, пока идет загрузка видео. Или если его воспроизведение недоступно;
    • preload – включает предварительную загрузку видео во время загрузки браузером веб-страницы;
    • src – задает путь к видеоролику.
    Читайте также:  Как посмотреть пароль учетной записи win 10

    Как видно из примера, в тегах реализовано несколько вариантов источников. То есть перед тем, как вставить видео на сайт, его нужно будет « перегнать » в несколько форматов. В зависимости от поддерживаемого формата браузер сам выберет нужный ему вариант.

    Более детально о поддерживаемых различными браузерами форматах видео можно узнать из технической документации к языку html .

    Вот как это выглядит на нашем сайте:

    1. Использование видеоплееров на основе JavaScript и Flash – самый трудный для реализации вариант. « Вживления » кода таких плееров в ваш сайт требует специальных знаний и навыков. Наиболее оптимальным является бесплатный видеоплеер Spruto . На официальном сайте с помощью конструктора можно настроить его внешний вид и функционал приложения:.


    Затем нужно скачать его в виде архива или скрипта. При этом в комплект архива входит подробная документация для настройки и « безболезненной » интеграции видеоплеера на ваш ресурс:

    Интеграция видео на сайтах, развернутых на основе CMS

    1. WordPress – в этом популярном движке, начиная с версии 2.9, реализована поддержка вставки обычной ссылки на ролик, расположенный на одном из популярных видео хостингов. Для этого нужно всего лишь воспользоваться специальным шорткодом. Его синтаксис:

    • Заходим в админку сайта;
    • Слева в меню выбираем вкладку « Записи », « Добавить новую »;
    • Пишем заголовок записи;
    • Вставляем шорткод и ссылку на видео;
    • Справа жмем на « Опубликовать »:

    • Вот как выглядит добавленный видеоролик на странице сайта:


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

    Вот некоторые из них:

    • JW Player ;
    • Video.js ;
    • Spider Video Player .

    2. Joomla – с этим движком все обстоит не так просто. Поэтому лучше для вставки видео и аудио данных воспользоваться специализированными плагинами.

    Вот несколько проверенных:

    • AllVideos ;
    • Vidbox ;
    • AllVideos Reloaded .

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

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

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

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

    Форматы видеофайлов

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

    Наиболее распространенные форматы вам, вероятнее всего, известны. Это avi, asf, mov, mp4 (MPEG4), ogg и другие.

    Читайте также:  Как определить номер телефона если он скрыт

    Начнем с AVI (Audio-Video Interleaved). Этот формат был разработан корпорацией Microsoft и представляет собой контейнер, в который можно вложить видео, сжатое любым стандартом. Храниться может как один поток (например, только аудио или только видео), так и несколько.

    Правда существует ограничение: звуковых дорожек может быть много, а вот видеодорожка только одна. Думаю, с разбором avi проблем не возникнет, так как у каждого на компьютере есть фильм или клип с расширением .avi.

    ASF разработан все той же корпорацией Microsoft и работает с потоковыми документами типа видео и аудио. Преимущество ASF состоит в том, что он не требует от вас установки определенных кодеков. Таким образом, он указывает структуру потока переносимых данных, но не ограничивает в выборе метода кодирования видеоинформации. Может иметь расширения: .asf, .wma и .wmv.

    Контейнер MOV был разработан второй большой мировой корпорацией Apple специально для их приложения QuickTime. Хоть формат и рассчитан на операционную систему Mac OS X, он отлично воспроизводится и в Windows.

    Контейнер чрезвычайно удобен для редактирования лежащих в нем файлов, а также может в себе хранить не только несколько дорожек аудио- и видеоинформации, а еще и субтитры, панорамы и анимации. Среди расширений можно встретить .QT или .MOV.

    Mp4 – очень известный формат хранения видеофайлов. На самом деле это сокращение от названия стандарта сжатия – MPEG4. Это фильм или клип, который по своим возможностям не уступает предыдущему формату MOV.

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

    И наконец ogg. Данный формат является универсальным, бесплатным и доступным для всех желающих. Этот мультимедийный контейнер был разработан некоммерческой компанией Xiph.Org Foundation. Формат функционирует с различными кодеками и может хранить в себе любые виды мультимедиа. Расширение таких файлов выглядит .ogg.

    Учимся добавлять на веб-ресурс видео

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

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

    Если вы хотите усвоить данный материал, то советую вам не лениться, а собрать всю свою волю в кулак и проработать примеры самостоятельно. Хочу напомнить, если у вас нет профессиональной среды разработки или хотя бы Notepad ++, то вооружитесь программой «Блокнот».

    Итак, я научу вас вставлять видеодокументы тремя способами:

    • используя ссылку с YouTube;
    • загружая клипы с локального компьютера;
    • пользуясь стандартными механизмами html5.

    Но для начала нужно подготовить каркас будущей страницы. Для этого через блокнот создаем документ с расширением .html (как правильно создавать веб-страницы через «Блокнот» я писал в первых уроках) и вставляем туда ниже представленный код:

    Вставка видео из разных источников


    1. Как вставить видео на сайт средствами HTML?
    2. Короткий код вставки видео с Youtube на сайт

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

    Есть два вида вставки видео на сайт: видео с другого ресурса (Youtube, Yandex video, Rutube и другие) и видеофайл, который уже загружен на сайт и открывающийся прямой ссылкой.

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

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

    Читайте также:  Как отключить параметры разработчика на андроид

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

    Код HTML

    Настройки окна видео подстраиваете под себя: width (ширина в пикселях), height (высота в пикселях). В ссылке http://video.rutube.ru/7c806393a9705797d7e92c4a05493d5d при выборе другого видео достаточно поменять код видео, который подчёркнут. Тег embed используется для старых настроек браузеров, поэтому там также не забываем поменять размеры видео и тд, иначе при просмотре через другой браузер окно с видео будет отличаться.

    Второй способ покажется немного сложнее. Во-первых, видео целиком нужно залить на хостинг, а он, как известно, не резиновый, во-вторых, для проигрывания даного видео (кроссбраузерного — так, чтобы во всех браузерах всё было одинаково!) следует использовать видео-проигрыватель, который уже не надо скачивать, а достаточно только подключить в head Вашего документа.

    Поскольку простых путей не ищем, то предположим, что Вы хотите вставить SWF-файл. Существует множество плееров доступных он-лайн. Например, FlowPlayer ( скачать FlowPlayer ). После скачивания архива загрузите его на сайт в папку с соответствующим названием flowplayer. После этого надо прикрепить к странице с видео данный плеер, для этого вставляем в head следующую строку:

    Код HTML

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

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

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


    На этот случай достаточно одной строки кода с использованием iframe. В коде будет менять только http://www.youtube.com/embed/WRtAVxqacQM короткий идентификационный код для видео. Также по желанию можно изменить размеры окна видео: width (ширина в пикселях), height (высота в пикселях).

    Код HTML (вставляем куда угодно в body документа)

    И наслаждаемся клипом LP!)

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

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

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

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

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

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

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

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

    Спасибо за внимание! И успехов при вставке видео на сайт!)

    Adblock
    detector