Бесплатные курсы по it-профессиям на FreeTutorials.ru.

х
Наверх

Размещение видео на сайте: обзор способов

Содержание:

Разместить на своём сайте ролик с популярного видеохостинга не трудно. Скажем, если ваш ресурс работает на WordPress, то для вставки видео с YouTube достаточно просто добавить в запись ссылку на него, и ролик встроится автоматически (при правке записи убедитесь, что редактор работает в визуальном режиме, и вставьте ссылку в текст). Но если вы хотите настроить некоторые параметры (например, задать ширину и высоту окна с роликом), или контент находится не на видеохостинге, а на самом сайте, или блог работает не на WordPress, тогда процедура становится немного другой.

Существует несколько способов добавления видеоролика на сайт:

  • фреймы;
  • скрипты;
  • тег video, появившийся в HTML5.

Их и рассмотрим.

Фреймы: вставка видео с YouTube

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

Для размещения видео с YouTube на своём интернет-ресурсе выполните ряд следующих действий.

  1. Откройте видео, которое хотите разместить.
  2. Под ним нажмите кнопку и щёлкните на вкладке .
    Вставка видео с youtube
  3. Скопируйте код из появившейся строки.
  4. Вставьте на страницу своего сайта. Куда вы добавите фрейм, там и появится видео.

Для настройки дополнительных параметров не обязательно копаться в коде. Нажмите расположенную под видео кнопку ЕЩЁ. Здесь вы можете посмотреть, как будет выглядеть вставленный на страницу ролик, а также изменить некоторые параметры.

Настройки видео

Размер видео. Из раскрывающегося списка выберите нужную ширину и высоту. Если подходящего варианта нет, то щёлкните на пункте Другой размер и задайте его в пикселях, введя значения в поля, появившиеся справа от списка.

Показать похожие видео после завершения просмотра. По умолчанию флажок установлен, а это значит, что когда ролик закончится, внутри фрейма появятся картинки со ссылками на другие ролики схожей тематики (релевантность определяет YouTube). Если вы не хотите этого, снимите флажок.

Показать панель управления. Снимите флажок, если не желаете, чтобы пользователь мог управлять роликом: перематывать его, ставить на паузу, регулировать громкость звука, разворачивать на весь экран, включать/отключать субтитры и менять другие настройки — если флажок снять, то расположенная в нижней части видео панель управления будет полностью отсутствовать.

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

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

Обратите внимание, как по мере настройки меняется HTML-код. По умолчанию он имеет вид:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Что это означает?

  • <iframe></iframe> — теги, создающие, собственно, фрейм — окно, в котором воспроизводится видео.
  • width — значение атрибута определяет ширину фрейма.
  • height — задаёт высоту.
  • src — содержит ссылку на видеоролик.
  • frameborder — устанавливает ширину рамок фрейма.
  • allowfullscreen — пустой атрибут, разрешающий пользователям разворачивать видео на весь экран. Если его убрать, то такой возможности у них не будет.

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

Единственный не рассмотренный, но важный момент — как сделать так, чтобы ролик воспроизводился автоматически сразу после загрузки страницы. Для этого к значению тега src (к адресу ролика) достаточно добавить &autoplay=1. Тогда вместо

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0" frameborder="0" allowfullscreen></iframe>

Мы получим:

<iframe width="560" height="315" src="https://www.youtube.com/embed/7Nxx6J_uWh0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Думаю, теперь-то у вас точно не осталось вопросов, и можно переходить к следующему методу вставки.

Скрипты

Для вставки видео на страницы можно использовать и специальные плеера — написанные, в основном, на JavaScript с использованием библиотеки JQuery, приложения. К минусам их эксплуатации относится относительная сложность установки, к плюсам — обилие настроек.

Проигрывателей видео для сайта разработано довольно много. В качестве примера популярных скриптов можно назвать FlowPlayer и JW Player.

В общем случае процесс подготовки веб-проигрывателей к работе выглядит так.

  1. Вы выбираете и скачиваете плеер.
  2. Загружаете библиотеки, которые необходимы ему для работы.
  3. Подключаете скрипты.
  4. Прописываете код вывода проигрывателя на экран.

К сожалению, подробное описание работы с Web-плеерами — тема отдельной статьи, поэтому дальше задерживаться на нём не буду, а опишу лучше третий метод.

HTML5

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

Самый простой код вставки видео будет таким:

<video src="film.webm"></video>

Где film.webm — ссылка на воспроизводимый ролик.

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

<video controls>

<source src="videos/play.mp4" type="video/mp4">

<source src="videos/play.ogv" type="video/ogg">

<source src="videos/play.webm" type="video/webm">

</video>

  • video — контейнер, отображающий ролик.
  • source — тег, содержащий информацию о видео. Обратите внимание, что в примере код содержит ссылки аж на три ролика разных форматов. Дело в том, что пока разные браузеры поддерживают не все кодеки, и возможные проблемы с воспроизведением решаются кодированием одного и того же ролика с помощью разных кодеков и одновременным добавлением файлов в тег.
  • controls — включает панель воспроизведения.
  • src — задаёт путь к проигрываемому ролику.
  • type — указывает тип контента, на который ссылается атрибут src.
  • Есть и дополнительные, не попавшие в код, атрибуты, позволяющие настроить проигрывание.
  • width — определяет ширину области отображения.
  • height — задаёт высоту.
  • autoplay — воспроизводит ролик автоматически после загрузки страницы.
  • loop — зацикливает воспроизведение.
  • preload — загружает видео вместе со страницей.
  • poster — содержит адрес изображения, которое будет показываться вместо ролика, если он вдруг по каким-либо причинам не воспроизведётся.

Заключение

Это основные, используемые в настоящее время (2017 год), способы вставки видео. Фреймы с YouTube — самое простое и удобное, что можно предложить, но не всем понравится, что их видео хранятся на стороннем ресурсе, где могут быть заблокированы или удалены. Использование HTML5 и вставка тега video — вариант чуть сложнее, но зато он универсален и позволяет проигрывать видео, хранящиеся где угодно. Использование скриптов, на мой взгляд, самый неуклюжий способ, но зато они позволяют веб-мастеру тонко настроить окно ролика, зачастую не прибегая для этого к изменению HTML и CSS.

Рекомендую:

Если хотите получить перспективную профессию или освоить новый навык (будь то SEO, HTML, веб-программирование или даже мобильная разработка), то посмотрите ТОП-3 лучших онлайн школ:

  • Нетология — одна из старейших школ интернет-профессий. Основные направления — маркетинг, управление, дизайн и программирование;
  • GeekBrains — специализируется, в первую очередь, на обучении программистов. После интеграции в Mail Group появились и другие профессии;
  • SkillBox — наиболее молодая из 3-х перечисленных школ, но обладает наибольшим ассортиментом специальностей. Если услышали о какой-либо экзотической профессии, то наверняка этому уже обучают в Skillbox.

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

Дата размещения/обновления информации: 22.01.2017 г.
Сообщить об ошибке
Смотрите также
Оставить свой комментарий
Комментарии 1
  • Даниил 10 Октября 2020 в 22:52

    Спасибо сайту так я понял как делать свой плеер на своем сайте
    вот кстати пример
    там где video.mp4 это файл к которому сайт будет обращаться если он конечно загружен туда на ваш хостинг
    планирую еще в код добавить html заголовок и еще добавить дату настоящую как к примеру 10.10.2020 и время 22:51:40 вот как то так
    Спасибо сайту SeoStop)
    <video autoplay loop width="800" height="600">

    <source src="video.mp4" type="video/mp4">

    </video>

    ответить