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

Содержание:

Добавление видео на HTML страницу
Учимся добавлять на веб-ресурс видео
Плагин AllVideos
Атрибуты тега video
- Позиционирование изображений Сброс влево или вправо
- Когда использовать элемент изображения по сравнению с фоновым изображением
Фреймы: вставка видео с YouTube
Как вставить видео YouTube на сайт
Как загрузить видео через телефон и планшет
- Способ 1. Через мобильный браузер
- Способ 2. Через мобильное приложение YouTube
Как встроить видео
Как правильно выложить видео на Ютуб?
Использование плеера в интерфейсах
КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ
Встраивание проигрывателя на страницу
Заключение

Добавление видео на HTML страницу

Для начала давайте определимся, что из себя представляет формат видеофайла.Формат видеофайла – это определённая структура, в которой видеозапись хранится на носителе (запоминающее устройство) и определяется двумя состовляющими: файлом-контейнером, в котором хранится сама видеозапись, и кодеками, которые используются для обработки звука и изображения.

В настоящее время существует 3 поддерживаемых формата видео для элемента <video>:

Браузер	MP4	WebM	Ogg
Chrome	ДА	ДА	ДА
Firefox	ДА	ДА	ДА
Opera	ДА	ДА	ДА
Safari	ДА	НЕТ	НЕТ
IE	ДА	НЕТ	НЕТ
Edge	ДА	НЕТ	НЕТ

Контейнер MPEG-4 + видео кодек Н.264 + аудио кодек ААС. Это сочетание обычно называют «MPEG-4». Н.264 — высококачественный и гибкий видео кодек, но он запатентован и на его использование необходимо получить платную лицензию. Лицензионные требования стали основной причиной, почему браузеры отказываются его поддерживать.
Контейнер Ogg + видео кодек Theora + аудио кодек Vorbis. Как правило, формат называется «Ogg Theora». Все кодеки и контейнер в этом варианте с открытым исходным кодом и без патентных или лицензионных ограничений.
Контейнер WebM + видео кодек VP8 + аудио кодек Vorbis. «WebM» открытый формат мультимедиа, представленный компанией на конференции Google I/O 19 мая 2010 года. Формат не требует лицензионных отчислений, основан на открытых видео кодеках VP8 и VP9, аудио кодеке Vorbis и подмножестве медиа контейнера Matroska. Новый формат вместе с VP8 призван заменить проприетарный стандарт H.264/MPEG-4.

Теперь самое время рассмотреть пример в котором мы добавим видео-контент на веб-страницу и поговорим о некотрых нюансах:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <video></title>
	</head>
	<body>
		<h1>Видео в HTML5</h1>
		<video width = "320" height = "240" poster = "10.jpg" controls>
			<source src = "123.mp4" type = "video/mp4">
			<source src = "123.ogg" type = "video/ogg">
			<track src = "sub_en.vtt" kind = "subtitles" srclang = "en" label = "English">
			<track src = "sub_ru.vtt" kind = "subtitles" srclang = "ru" label = "Russian" default>
			Ваш браузер не поддерживает видео тег.
		</video>
	</body>
</html>

В этом примере мы:

Добавили на страницу видео (тег <video>) шириной 320 пикселей и высотой 240 пикселей (атрибуты width = «320» height = «240»), атрибут poster — указывает местоположение изображения, которое пользователь будет видеть перед запуском видео (если атрибут не указан, то отображается первый кадр видео). Часто этим атрибутом пользователей вводят в заблуждение (отсутствие того контента, которое изображено на картинке).

Атрибутом controls добавили отображение встроенных элементов управления мультимедийным файлом (кнопка воспроизведения / паузы, регулятор, позволяющий перейти к определенному фрагменту ролика, а также регулятор уровня громкости).

Использовали тег <source>, который позволяет указать несколько вариантов формата видео (в этом случае браузер сможет выбрать подходящий формат для загрузки и воспроизведения). Чтобы повысить эффективность работы клиента, при использовании нескольких форматов нужно указывать в тегах <source> атрибут type (MIME-типы для видео):

Формат	MIME-типы
MP4	video/mp4
Ogg	video/ogg
WebM	video/webm

Благодаря тегу <track> добавили субтитры к видео:

Добавили путь к файлу атрибутом src.
Установили тип дорожки — субтитры kind = «subtitles» (данный параметр устанавливается по умолчанию, также доступны навигационные параметры, метаданные и параметры для людей с ограниченными возможностями).
Установили язык дорожки srclang = «ru».
Отобразили названия двух дорожек label = «English», label = «Russian».
Выбрали дорожку по умолчанию атрибутом default.

Результат нашего примера:

Ваш браузер не поддерживает этот видео формат.

Допускается добавлять видео файлы с использование упрощенного синтаксиса (без использования тега <source>), но такая запись будет актуальна если все браузеры поддерживают данный формат видео:

Прочие, часто используемые атрибуты элемента <video>:

Атрибут	Значение атрибута
autoplay	Задает автоматическое воспроизведение видеоролика (старайтесь не использовать этот атрибут без необходимости – раздражает, когда за тебя решают, когда должно начаться воспроизведение видео контента).
loop	Зацикливает воспроизведение видеоролика (наша песня хороша – начинай сначала).
muted	Воспроизведение видеоролика с отключенным звуком.

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

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

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

Вставка видео из разных источников body { background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; } h1{ font-style: oblique; text-decoration: underline; } Вставка видео из разных источников body { background:#FFFAF0; color:#A52A2A; width:100%; margin:0; text-align:center; } h1{ font-style: oblique; text-decoration: underline; } Сохраните заготовку программы. При запуске файла в окне браузера откроется веб-страница с тремя стилизованными заголовками.

Плагин AllVideos

Как добавить сайт в поисковые системы

AllVideos — плагин для Joomla, призванный упростить вставку видео в контент страниц.

Данное расширение пользуется огромной популярностью в первую очередь благодаря тому, что является полностью бесплатным: на момент написания данного материала общая оценка AllVideos на JED составляет 4.5 из 5 на основании 278 (!) голосов. Но не спешите устанавливать расширение: сперва давайте разберёмся, так ли всё гладко.

Принцип работы AllVideos прост: устанавливаем и активируем плагин, после чего можем вставлять видеоролики в Joomla из YouTube и прочих сервисов с помощью шорткодов. И тут у неосведомленного пользователя может возникнуть вопрос: а каких шорткодов? Действительно, этот момент не столь очевиден, и расширение не предусматривает никаких кнопок в редакторе для упрощения добавления видео. На самом деле это совсем не проблема, и стоит лишь понять синтаксис (короткая инструкция ) и вставлять с помощью AllVideos больше не составит труда.

Пример шорткода вставки видео с YouTube:

{youtube}tj_V7BDHTxk{/youtube}

На выходе данный шорткод преобразуется в:

<div class="avPlayerWrapper avVideo">
 <div class="avPlayerContainer">
  <div id="AVPlayerID_0_0390e5e3928d306d1e22a07f2431470c" class="avPlayerBlock">
  <iframe src="https://www.youtube.com/embed/tj_V7BDHTxk?rel=0&fs=1&wmode=transparent" width="400" height="300" allowfullscreen="true" frameborder="0" scrolling="no" title="JoomlaWorks AllVideos Player"></iframe>
  </div>
  </div>
 </div>

Этот HTML-код и выводит на экран нужное нам видео.

Казалось бы: что может быть проще? Вставил часть URL-адреса в небольшой шорткод, а дальше — дело техники. Но не спешите радоваться! Если взглянуть за «занавес» веб-страницы, то можно увидеть целых 5 ресурсных файлов, которые добавляет к странице AllVideos:

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

Но это еще не самое страшное!

Внимание:

Опытным путём было установлено, что AllVideos конфликтует с плагином JCH Optimize (незаменим для оптимизации скорости загрузки сайтов на Joomla), мешая последнему правильно объединять JS-файлы, тем самым делая его вредным для сайта: файлы дублируются и размер страницы увеличивается вместе с временем её загрузки.

Атрибуты тега video

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

Давайте кратко пробежимся по атрибутам тега video . Как вы могли заметить, я прописал размер видео с помощью атрибутов width и height, но вообще это можно без проблем делать и через css. Остальные атрибуты:

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

Позиционирование изображений Сброс влево или вправо

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

controls — добавляет к видео элементы управления. То есть можно будет останавливать его, расширять, изменять громкость.
autoplay — если этот атрибут задан, то воспроизведение видео начнется сразу после загрузки веб-страницы. Учитывайте, что это может раздражать пользователей.
loop — если прописан этот параметр, то видео начнется сначала сразу после своего завершения. В некоторых случаях актуально, когда видео короткое, например.
preload — позволяет начать загрузку видео вместе с загрузкой веб-страницы. Спорная возможность. С одной стороны, так пользователь сможет кликнуть по видео и сразу начнется его воспроизведение. С другой, у многих людей ограничен трафик. Возможно, они и не хотят смотреть видео, а оно у них грузиться и забирает трафик. Так что смотрите сами, как вы будете использовать этот параметр.
poster — позволяет задать картинку-постер, которая будет выводиться, когда видео еще не включено.

Это все атрибуты этого тега. Естественно, все они необязательные.

Когда использовать элемент изображения по сравнению с фоновым изображением

Теперь мы будем использовать его для этой первоначальной цели. Плавающее изображение — это начало; тем не менее, все остальные материалы будут выровнены непосредственно против него. Существует два основных способа добавления изображений на веб-страницу. Любой вариант выполнит эту работу; Однако каждый из них имеет конкретные варианты использования.

Таким образом, это не имеет прямого отношения к содержимому страницы. Теперь, когда мы знаем, как добавлять и размещать изображения на странице, давайте рассмотрим наш веб-сайт «Стили» и посмотрим, где мы можем добавить несколько изображений. Воспроизведение видео с вашего собственного сайта легко, когда вы используете наш вариант внедрения.

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

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

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

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

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

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

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

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

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

Для того, чтобы добавить видео с YouTube на сайт, откройте страницу и найдите кнопку Поделиться под видеоплеером:

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

YouTube сгенерирует код для вставки автоматически. Тег iframe будет иметь URL исходного видео, высоту и ширину
плеера и еще несколько атрибутов:

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

https://youtube.com/watch?v=li_9PBrcOcQ

Все, что вам нужно сделать — это нажать Копировать и вставить этот код в HTML вашей страницы.

Как загрузить видео через телефон и планшет

Выложить видео в Ютуб с телефона или планшета можно 2 способами.

Способ 1. Через мобильный браузер

Просто заходите на сайт YouTube, открывается мобильная версия. Авторизуетесь в своём аккаунте.

После авторизации переходите во вкладку своего канала и в ней нажимаете на красный значок загрузки.

После этого выполняете обычную процедуру выкладывания видео, начиная с шага № 3 в инструкции выше.

Способ 2. Через мобильное приложение YouTube

Заходите в магазин приложений своей операционной системы, находите там приложение и устанавливаете его.

(iPhone, iPad)

Так как у меня только iPhone, покажу на его примере. В Андроид всё точно так же и выглядит оно как мобильная версия сайта, только кнопка “Загрузить видео” находится в правом нижнем углу.

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

Сразу в приложении его можно обрезать, наложить фильтры и музыку. Далее даём ему название и пишем описание.

Нажимаем “Загрузить” и ваше видео на канале. Просто и быстро. После загрузки с телефона я рекомендую зайти через компьютер и дооптимизировать его.

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

Откройте YouTube на компьютере и перейдите на страницу нужного видео.
Нажмите Поделиться под проигрывателем.
Выберите Встроить.
Скопируйте код.
Добавьте код в свой блог или на сайт.

Примечания

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

Обратите внимание, что действие Условий использования YouTube API и Правил для разработчиков распространяется и на встроенный проигрыватель

Как правильно выложить видео на Ютуб?

Я понимаю, что статью будут читать люди, которые никогда ещё этого не делали, поэтому начну для новичков с самого начала

Если у вас уже есть свой канал, то переходите сразу к шагу № 3-4, там самое важное и интересное

Используй фишки топовых блогеров Рунета, чтобы собрать первый миллион подписчиков!

Подробнее о курсе

Шаг 1. Регистрация или авторизация в Google

YouTube — это сервис-приложение от Google, поэтому, чтобы выкладывать на него видео, вам нужно иметь свой аккаунт в Гугл. Создать его поможет статья про регистрацию на YouTube.

Шаг 2. Создание своего YouTube-канала

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

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

Шаг 3. Загрузка видеофайла

Теперь, когда у нас всё готово, заходим на YouTube и в верхнем правом углу нажимаем на кнопку “Добавить видео”.

Открывается окно, в котором нам предлагают:

Загрузить файл с видео.
Запустить прямую трансляцию (стрим).
Создать слайд-шоу из картинок или фото.
Запустить онлайн-видеоредактор для монтажа.

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

Перед тем, как перетаскивать, не забудьте про первое правило оптимизации видео – переименуйте загружаемый файл правильно.

Шаг 4. Настройка видео

Далее начинается загрузка видео, во время которой можно его настроить.

Вверху мы видим 4 вкладки, которые нужно настроить:

Основная информация (самое важное).
Перевод.
Монетизация.
Расширенные настройки.

Давайте разберём, что в них нужно сделать.

Вкладка 1. Основная информация

Здесь обязательно настраиваете следующие параметры:

Название видео (Инструкция: Как назвать видео на Ютубе).
Описание (Инструкция: Как делать описание к видео).
Теги (Инструкция: Как подбирать теги к видео и что это такое).
Выбор значка или установка своего (Инструкция: Как сделать свой значок).
Выбор плейлиста или создание нового (Инструкция: Что такое плейлист на Ютубе и как его создать).
Настройка доступности ролика.

Есть 4 варианта доступа:

Вкладка 2. Перевод

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

Вкладка 3. Монетизация

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

Вкладка 4. Расширенные настройки

Здесь тоже есть много чего интересного.

Левый столбик настроек:

Правый столбик настроек:

Выбор категории видео.
Место съёмки (геотег, по которому ваше видео могут найти пользователи Ютуба).
Выбор языка видео.
Вкл/выкл доступа к субтитрам и метаданным.
Установка даты записи.
Показ статистики видео.
3D – если видео снято в формате 3D.
Заявление о прямой рекламе.

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

Шаг 5. Публикация

Как только вы всё настроите и дождётесь, пока видео загрузится и обработается, нажимаете кнопку “Сохранить”.

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

Шаг 6. Редактирование всех настроек после загрузки

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

Первый способ:

Заходите на свой канал. Вверху (сразу над шапкой канала) нажимаете “Менеджер видео”.
Выбираете нужное видео и нажимаете “Изменить”.

Здесь же можно его удалить.

Второй вариант: зайти в редактирование при просмотре ролика, сразу под ним есть меню.

Аннотации.
Конечная заставка.
Субтитры.
Подсказки.
Сделать цветокоррекцию и подрезку ролика.

Использование плеера в интерфейсах

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

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

Для этого нужно создать элемент <audio> без атрибута controls, задать ему id и запускать воспроизведение при каком-нибудь событии.

var buttonA = document.getElementsByid(‘button’);

var clickSound = document.getElementById(‘click-sound’);

function buttonClick() {

clickSound.currTime = 0;

clickSound.play();

}

buttonA.addEventListener(‘click’,buttonClick);

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

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

Также можно сделать удобный плеер для гифок:

Немного стилей:

.gif-player {

cursor:pointer;

}

.gif-player_pause {

opacity:0.8;

}

И сам скрипт:

var gifPlayer = document.getElementById(‘gif-player’);

function gifAct() {

if(gifPlayer.paused) {

gifPlayer.play();

gifPlayer.setAttribute(‘class’,’gif-player gif-player_play’);

} else {

gifPlayer.pause();

gifPlayer.currentTime = 0;

gifPlayer.setAttribute(‘class’,’gif-player gif-player_pause’);

}

gifPlayer.addEventListener(‘click’,gifAct);

Такую гифку можно поставить на паузу, поэтому она не загружает страницу. Также пользователь может вообще не запускать и даже не загружать ее.

КАК Я ИСПОЛЬЗУЮ YOUTUBE-ВИДЕО В БЛОГЕ

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

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

То есть, говоря простыми словами, одним видеороликом я убиваю сразу двух зайцев: и ютуб-канал развиваю, и свой онлайн-дневник. Ах да, и конечно, реализую свой творческий потенциал! В общем, куда не посмотри – одни плюсы.

Встраивание проигрывателя на страницу

Давайте рассмотрим следующий способ добавления видео с YouTube на страницы, но в этот раз мы будум добавлять видео не во фрейм, а на саму страницу. Для этого нам необходимо использовать HTML тег <object> или <embed>.

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

Элемент <object> — это универсальный способ внедрения в страницу мультимедийного контента — видео, flash-роликов, апплетов, изображений и даже веб-страниц. Он может содержать несколько элементов <param>, которые используются, чтобы определить параметры для плагинов, встроенных в элемент <object>.

Внутри элемента <object> также можно поместить резервный контент, который отображается, если не поддерживается мультимедийный файл. Атрибуты и параметры меняются в зависимости от типа объекта и иногда уникальны для сторонних плагинов, отображающих мультимедийный контент.

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

Он не входил в стандарт HTML 4, но поддерживался браузерами, официальный статус он обрёл лишь в спецификации HTML 5. Спецификация HTML 4.0 рекомендовала использовать тег <object> для загрузки внешних файлов, поэтому веб-мастера помещали тег <embed> внутрь тега элемент <object>, который применялся в качестве запасного варианта в элементе <object>, чтобы обеспечить поддержку более широкого круга браузеров и обеспечить валидность документа. В HTML 5 такой необходимоcти нет (элемент проходит валидацию).

Давайте рассмотрим пример их использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тегов <object> и <embed></title>
	</head>
	<body>
		<p>Размещение видео с YouTube</p>
		<!--внедряем в страницу видео с использованием парного тега <object>-->
		<object width = "320" height = "240" data = "https://www.youtube.com/embed/d9TpRfDdyU0">
		</object>
		<!--внедряем в страницу видео с использованием тега <embed>-->
		<embed  width = "320" height = "240" src = "https://www.youtube.com/embed/d9TpRfDdyU0">
	</body>
</html>

В этом примере мы разместили видео с видео хостинга YouTube с использованием тега и

Ширину и высоту видео задали с использовнием атрибутов width и height.
Обратите внимание, что тег парный и путь к видео необходимо указывать атрибутом data, a тег имеет синтаксис схожий с размещением обычного изображения (тег ) — использует атрибут src и не требует закрывающего тега

Результат нашего примера:

Рис. 54 Размещение видео на странице с использованием тегов <object> и <embed>.

Заключение

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

Профессиональный программист должен уметь писать именно такие приложения и сайты — удобные, эффективные и нетребовательные. Особенно в веб, где у любого пользователя может быть слабый компьютер или ужасное соединение с интернетом. Поэтому, если вы начинающий frontend-разработчик, запишитесь на курс, в котором всё объясняется от А до Я и который научит на практике находить лучшие решения своих задач.

Курс «Профессия frontend-разработчик»

С нуля до разработчика с зарплатой от 60 000 рублей за 6 месяцев. Научитесь верстать сайты и создавать интерфейсы, соберите два проекта в портфолио и получите современную профессию.

Живая обратная связь с преподавателями
Неограниченный доступ к материалам курса
Стажировка в компаниях-партнёрах
Дипломный проект от реального заказчика
Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы