Тяжело представить себе современный интернет без самого популярного видео хостинга YouTube, который по данным сайта alexa.com на конец 2016 года явлется вторым сайтом в мире по количеству посетителей! Речь в этой статье пойдет о том как с использованием языка HTML добавить видео контент c этого знаменитого видео хостинга на Ваши страницы.
Встраивание проигрывателя во фрейм
Для начала предалагаю рассмотреть пример, в котором используется рекомендованный способ добавления видео. И так, для добавления видео на страницу сделайте по порядку следующие действия:
- Если вы хотите использовать на сайте ваше видео, то необходимо его предварительно загрузить на YouTube, для этого необходимо иметь аккаунт Google и провести минимальные настройки своего канала (будем считать что этот шаг Вами пройден).
- Запишите ID видео (последние символы в адресной строке ?v=VIDEO_ID).
- Определите размеры элемента на вашей веб-странице (атрибуты width и height ). Хочу сразу подчеркнуть, что встраивать проигрыватель с помощью элемента является лучшей практикой, таким образом вы предоставите пользователю оптимальные условия просмотра вне зависимости от типа его устройства или формата воспроизводимого файла). Если вы пропустили тему, посвященную фреймам в HTML, то рекомендую Вам к ней вернуться для изучения. Примечание из официальной документации: Окно просмотра встроенного проигрывателя должно быть не меньше 200 x 200 пикселей. Если в проигрывателе отображаются элементы управления, окно должно быть достаточно большим, чтобы полностью отобразить элементы управления, не сжимая окно просмотра меньше минимального размера. Минимальный размер окна просмотра для проигрывателей формата 16:9 составляет 480 х 270 пикселей.
- Добавьте путь к видео, используя атрибут src и записанный ранее ID необходимого видео (https://www.youtube.com/embed/VIDEO_ID). Справочно: Раньше региональные блокировки видео можно было обходить тем, что вместо /embed/ можно было указать /v/.
Давайте рассмотрим пример добавления видео с YouTube:
Как узнать url ссылку видео? Адрес видео
Размещение видео с YouTube Размещение видео с YouTube width = «320» height = «240» src = «https://www.youtube.com/embed/d9TpRfDdyU0?autoplay=1?loop=1color=white»>
- autoplay = «1» (видео автоматически запускается).
- loop = «1» (проигрыватель будет воспроизводить видео по кругу, в бесконечном цикле).
- start = «28» (определяет с какой секунды начнется воспроизведение видео, значение должно быть положительным целым числом).
- color = «white» (бегунок просмотренного отмеряет белым цветом, по умолчанию — красным).
Результат нашего примера:

Есть еще один способ, который позволяет формировать HTML код для размещения плеера YouTube с интересующим нас видео. Для этого необходимо найти на YouTube это видео, пролистать под описание к видео, найти и нажать на кнопку «Поделиться». После этого нам будет доступно меню в котором необходимо выбрать вкладку «HTML-код». У нас есть два варианта: сразу скопировать готовый код сформированный по умолчанию, либо нажать на вкладку «Еще» и провести более расширенную настройку:
Как Узнать URL Видео на YouTube

Рис. 53 Настройка фрейма на сайте YouTube.
В расширенных настройках, к примеру, можно включить режим повышенной конфиденциальности, который указывает, что YouTube должен сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.
Обратите внимание, что YouTube добавляет такие атрибуты как frameboarder , который отвечает за наличие, либо отсутствие рамки вокруг фрейма и атрибут allowfullscreen , который позволяет перевести плеер в полноэкранный режим. Обращаю ваше внимание, что этих атрибутов нет в спецификации HTML 5, не смотря на это атрибут frameboarder убирает границы фрейма, но при валидации документа быдет указана ошибка. В HTML 5 рекомендуется границы элемента добавлять, либо убирать средствами CSS, подробно об этом мы изучим в учебнике CSS в статье «Границы элемента в CSS».
Встраивание проигрывателя на страницу

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

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

Он не входил в стандарт HTML 4, но поддерживался браузерами, официальный статус он обрёл лишь в спецификации HTML 5. Спецификация HTML 4.0 рекомендовала использовать тег для загрузки внешних файлов, поэтому веб-мастера помещали тег внутрь тега элемент , который применялся в качестве запасного варианта в элементе , чтобы обеспечить поддержку более широкого круга браузеров и обеспечить валидность документа. В HTML 5 такой необходимоcти нет (элемент проходит валидацию).
Давайте рассмотрим пример их использования:
Пример использования тегов и Размещение видео с YouTube —> width = «320» height = «240» data = «https://www.youtube.com/embed/d9TpRfDdyU0»> —> width = «320» height = «240» src = «https://www.youtube.com/embed/d9TpRfDdyU0»>
В этом примере мы разместили видео с видео хостинга YouTube с использованием тега и . Ширину и высоту видео задали с использовнием атрибутов width и height . Обратите внимание, что тег парный и путь к видео необходимо указывать атрибутом data , a тег имеет синтаксис схожий с размещением обычного изображения (тег ) — использует атрибут src и не требует закрывающего тега.
Результат нашего примера:

Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

- Используя полученные знания составьте следующую страницу:

Практическое задание № 27.
- Чтобы получить значение цвета, который использует YouTube вы можете сделать PrintScreen экрана и в графическом редакторе, используя инструмент палитра (пипетка) получить значения цвета. Например, в Paint можно получить значение цвета в системе RGB. Как задавать цвета в системе RGB вы можете повторить в статье учебника «HTML Цвета». Кроме того, для этих целей существует множество плагинов для браузера.
- Укажите для боковой панели значение ширины равной 50% это позволит Вам получить два одинаковых блока с видео клипами и сделать наш пример адаптивным.
- Для выполнения задания Вам потребуются знания из статьи учебника «Теги разметки страницы».
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что результат вашего примера соответствует готовому примеру.
Видео и аудио контент
Метаданные
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
Источник: www.basicweb.ru
9 хитростей YouTube с URL, о которых вы должны знать
Хотя YouTube остается главным видеосайтом в Интернете, вы, вероятно, не особо задумываетесь о его настройке. Но независимо от того, являетесь ли вы обычным пользователем или просматриваете онлайн-видео каждый день, есть множество способов настроить YouTube.
Основная категория из них – специальные уловки со ссылками на YouTube. Давайте рассмотрим некоторые уловки YouTube с URL-адресами, которые помогут вам получить больше от сервиса, например, преобразование видео в GIF.
1. Ссылка на любую часть видео

Обычно, когда вы копируете ссылку на видео YouTube и открываете его, она начинается с самого начала. Но если вы хотите показать кому-то определенный раздел видео или пропустить длинное вступление, вы можете добавить метку времени к URL-адресу, чтобы запустить его в это время.
Вы можете сделать это двумя способами. Добавив вручную t=120
Если вы не хотите использовать ручной метод, приостановите видео в то время, когда вы хотите поделиться им, затем щелкните правой кнопкой мыши и выберите Копировать URL-адрес видео в текущее время .
2. Бесконечное зацикливание видео

YouTube – отличное место для прослушивания музыки, которую вы не найдете в другом месте, например саундтреков к видеоиграм для учебы . Если вам нравится песня и вы хотите слушать ее снова и снова, вы можете добавить повторитель после youtube в URL-адресе.
Это откроет видео на YouTubeRepeater.com , который зациклит его за вас.
Так что измените этот URL:
youtube.com/watch?v=shibvkpyb8E
Чтобы это зациклить:
youtuberepeater.com/watch?v=shibvkpyb8E
Используя параметры под видео на новой странице, вы можете изменить время начала или окончания видео, если хотите.
Хотя мы хотели выделить метод взлома URL, вы также можете сделать это прямо на YouTube. Просто щелкните правой кнопкой мыши видео YouTube и включите « Цикл», чтобы продолжить воспроизведение.
3. Обойти возрастные ограничения

YouTube имеет возрастные ограничения для определенных видео, отмеченных как содержащие контент для взрослых. Если у вас нет учетной записи YouTube или вы не хотите входить в систему, чтобы посмотреть ее, вы можете выполнить небольшую хитрость, чтобы обойти вход.
Возьмите URL-адрес YouTube для запрещенного видео, например:
youtube.com/watch?v=wvZ6nB3cl1w
Теперь добавьте nsfw перед частью ссылки на YouTube , как показано здесь:
nsfwyoutube.com/watch?v=wvZ6nB3cl1w
Видео откроется на новом сайте без возрастных ограничений. Если вы все еще видите сообщение об ограничении по возрасту, нажмите здесь, чтобы попробовать другой метод, текст вверху страницы. Это загрузит его на новую страницу, которая, надеюсь, успешно воспроизведет видео.
4. Пропустить определенную часть вступления
Подобно трюку с URL-адресом, который позволяет вам выбрать время начала видео, вы также можете пропустить определенное количество секунд в начале видео. Вы не можете указать минуты с этим, поэтому используйте 90 (секунды) для полутора минут.
Итак, чтобы пропустить первые 30 секунд этого видео:
youtube.com/watch?v=M03bTkQxVUg
Добавьте start=30
Это похоже на синхронизацию, но набирается немного быстрее и не требует запоминания определенной временной метки.
5. Заявить URL-адрес пользовательского канала YouTube.

Если у вас есть собственный канал YouTube и вы отвечаете определенным требованиям, вы можете установить для своей страницы персональный URL. Это намного легче запомнить, чем случайную строку символов по умолчанию, поэтому это стоит сделать, чтобы упростить ссылки в социальных сетях и на других сайтах.
Чтобы получить персонализированный URL, ваш канал должен соответствовать следующим критериям:
- Иметь не менее 100 подписчиков
- Быть не моложе 30 дней
- Загрузите фото профиля и обложку канала.
Если вас это устраивает , перейдите в YouTube Studio , щелкнув изображение своего профиля в правом верхнем углу YouTube и выбрав YouTube Studio . В меню слева нажмите « Настройка» , а затем « Основная информация» вверху.
На этой странице в разделе URL-адрес канала вы увидите обычный URL-адрес вашего канала, а также поле для установки пользовательского URL-адреса , если вы имеете право. Используйте это, чтобы выбрать тщеславный URL вашего канала.
У вас может быть только один настраиваемый URL. Если он у вас уже есть, вы не можете его изменить, но вы можете удалить текущий URL-адрес и создать новый, если он доступен. Этот вариант можно использовать только три раза в год, поэтому не меняйте его слишком часто.
После настройки вашего персонализированного URL-адреса любой желающий может перейти на youtube.com/[YourCustomURL], чтобы посетить ваш канал.
6. Переходите прямо к подпискам на YouTube
Часто предложения YouTube бесполезны. Независимо от того, наполнены ли ваши рекомендации странным контентом или домашняя страница содержит видео, которые вам не интересны, вы можете настроить лучшую целевую страницу YouTube.
Когда вы вошли в систему, попробуйте изменить закладку YouTube с главной страницы на страницу подписок, используя этот URL:
youtube.com/feed/subscriptions
Это позволяет вам просматривать новейшие видео с каналов, на которые вы подписаны, и не пропустить ни одного их нового контента. Таким образом, вы контролируете то, что видите, вместо того, чтобы решать за вас YouTube.
7. Сделайте эскиз любого видео.
При поиске изображений в Google часто встречаются изображения из видеороликов YouTube, обычно называемых maxresdefault . С помощью настройки URL-адреса вы можете легко просмотреть высококачественный эскиз любого видео YouTube (если он есть), посетив следующее:
img.youtube.com/vi/[VideoID]/maxresdefault.jpg
Замените [VideoID] текстом после v = в конце видео YouTube. Итак, чтобы просмотреть эскиз этого видео:
youtube.com/watch?v=YMbm_SFJugQ
Посетите эту ссылку:
img.youtube.com/vi/YMbm_SFJugQ/maxresdefault.jpg
8. Сделайте GIF из видео YouTube.

Нашли видео на YouTube, в котором есть момент, достойный GIF? Вы можете легко создать анимированный GIF из любой части видео, добавив gif перед ссылкой YouTube.
Итак, чтобы отредактировать это видео в GIF:
youtube.com/watch?v=gy1B3agGNxw
Измените URL-адрес на этот:
gifyoutube.com/watch?v=gy1B3agGNxw
Вы попадете на сайт gifs.com, где сможете добавить различные эффекты и обрезать GIF по своему вкусу. После этого поделитесь GIF в социальных сетях с помощью простой ссылки или загрузите его для сохранности.
Обратите внимание, что очень длинные видео не будут работать с этой службой.
9. Смешивание музыки из видео YouTube
Это не настоящий взлом URL-адресов, так как вы не можете посетить его прямо с YouTube. Однако он по-прежнему использует URL-адреса YouTube, поэтому мы включаем его. Посетите YouTube DJ, и вы можете добавить два URL-адреса YouTube, чтобы микшировать их музыку. Используйте элементы управления, чтобы установить точки быстрого доступа к различным частям песен и настроить затухание и скорость по своему усмотрению.
Если вы когда-либо думали, что две музыкальные композиции будут хорошо сочетаться, этот сайт для вас!
Получайте больше удовольствия от трюков с URL-адресами YouTube
Эти уловки позволят вам получить от YouTube еще больше. Некоторые из них встроены в сам YouTube, а другие полагаются на сторонние сервисы. Вполне возможно, что что-то из них может перестать работать в будущем, поэтому ваш пробег может меняться со временем.
Хотя это не взлом URL-адресов, знаете ли вы, что вы можете смотреть видео на YouTube вместе с далекими друзьями?
Кредит изображения: Bloomicon / Shutterstock
Источник: www.istocks.club
Как сделать ссылку на видео с компьютера
Как создать ссылку на видео или канал YouTube для публикации

Как создать ссылку на видео
- Включите воспроизведение видео на YouTube.
- Под видео нажмите Поделиться .
- Появится панель с доступными опциями обмена:

- Встроить: нажмите кнопку Встроить , чтобы сгенерировать код, с помощью которого вы можете разместить фильм на своем сайте.
- Социальные сети: нажмите на значок социальной сети (например, Facebook или Twitter), чтобы поделиться в ней фильмом.
- E-mail: нажмите на значок e-mail справа от иконок социальных сетей, чтобы отправить сообщение из программы по умолчанию для работы с электронной почтой на вашем компьютере.
- Скопировать ссылку: нажмите кнопку Копировать , чтобы скопировать ссылку на видео, которую вы можете вставить, например, в сообщение электронной почты.
- Начало: если вы хотите создать ссылку на конкретное место в фильме, перед копированием адреса установите этот флажок и введите время начала.
Создание ссылки на канал YouTube
- Откройте страницу канала.
- Скопируйте URL-адрес из адресной строки в браузере.
- Вставьте URL-адрес, где вы хотите его опубликовать.
Устройство с Android
Поделиться ссылкой на видео
Вы можете обмениваться видео, копируя ссылку на них или отправив ссылку в другое приложение на вашем телефоне. Вы также можете сделать это в приложении YouTube на вкладке Входящие → Уведомления.
Обмен видео через приложение YouTube:

- Откройте видео, которым хотите поделиться.
- Под плеером нажмите Поделиться .
Вы можете передавать фильмы и сообщать о них в приватном чате с одним человеком, входящим в число ваших контактов. Чтобы просмотреть все общие видео, откройте вкладку Уведомления.
Когда вы отправляете ссылку на видео кому-то из раздела «Вы можете их знать», эти люди получат приглашение присоединиться к вашим контактам. Однако, они не увидят ваших общих фильмов до тех пор, пока не примут приглашения.
Примечание: обмен в YouTube доступен только на смартфонах – не на планшетах.
Ссылка на видео и HTML-код для вставки видео на сайт c YouTube





Интерфес на YouTube поменялся и статья «Как получить HTML-код для вставки на сайт видео с YouTube» немного устарела, хотя все принципы получения HTML-кода видео для вставки на сайт остались прежними. К тому же хочется ещё затронуть вопрос о том, как получить просто ссылку на видео с Ютуба. Поэтому решил обновить материал и добавить в него информацию про ссылку на видео. Итак, обо всём по порядку:
Читать еще: Как сделать тетрадь для кукол
Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт c YouTube
Кнопка «Поделиться» для получения ссылки на видео и HTML-кода для вставки видео на сайт находится справа под заголовком видео YouTube (под самим видео). Рядом с кнопками лайков и прочими ссылками по пользовательскому управлению видео.
Для того, чтобы открыть панель со ссылкой на видео и HTML-кодом для вставки, нужно найти эту кнопку и кликнуть по ней один раз левой кнопкой мышки:

Как скопировать ссылку на видео YouTube
После того, как открыто всплывающее окно со ссылками, нужно обратить внимание на строчку типа:
Она находится под кнопками социальных сетей. Именно эта ссылка и является ссылкой на выбранное видео на Ютубе. Скопировать её можно выделив мышкой и нажав Ctrl + C , а можно просто кликнуть мышкой по кнопке «Копировать». После копирования ссылку можно отправить по электронной почте, в мессенждере, вставить в пост в соц.сетях или разместить в виде ссылки у себя на сайте. О том, что ссылка скопирована будет уведомление в нижнем левом углу экрана «Ссылка скопирована в буфер обмена»:

Как получить HTML-код для вставки на сайт видео с YouTube
Кнопка «Встроить» HTML-код с YouTube
Для того, чтобы получить HTML-код для вставки на сайт видео с YouTube нужно кликнуть левой кнопкой мышки один раз по кнопке в виде <> с названием «Встроить». Эта кнопка первая в верхнем ряду кнопок со ссылками на соц.сети:

с названием «Встроить»” width=”674″ height=”698″ />
Копирование HTML-кода для вставки на сайт видео с YouTube на широких экранах
На широких экранах при раскрытии нового всплывающего окна в нижнем правом углу будет ссылка-кнопка «Копировать». После клика по этой кнопке, HTML-код для вставки видео с Ютуба будет скопирован в буфер обмена. Об этом будет сообщено в надписи в нижнем правом углу экрана: «Ссылка скопирована в буфер обмена». После этого, полученный код можно вставлять в HTML-документ.
Читать еще: Как сделать круглый стол
Код выглядит например так:
Ну и конечно картинка, как найти эту кнопку «Копировать» на Ютубе:

Копирование HTML-кода для вставки на сайт видео с YouTube на узких экранах
На узких экранах кнопки «Копировать» почему-то дизайнерами YouTube не предусмотрено, поэтому HTML-код для вставки нужно скопировать вручную. Для этого нужно кликнуть один раз левой мышки в любое место, где расположен код:

После этого весь код для вставки на сайт выделится, останется нажать только Ctrl + C , чтобы он попал в буфер обмена, после этого его можно будет вставить в HTML-код страницы на сайте:

Для тех, кто привык пользоваться мышкой для копирования, нужно кликнуть правой кнопкой мышки по выделенному HTML-коду. Откроется контекстное меню браузера. Из него нужно выбрать пункт «Копировать»:

Резюме:
Таким образом можно быстро найти и скопировать либо ссылку на видео с YouTube, либо HTML-код для вставки на сайт видео.
Вставка и воспроизведение видеофайла с компьютера
В зависимости от используемой версии PowerPoint вы можете вставить внедренное видео (действие по умолчанию) или ссылку на видеофайл, хранящийся на компьютере.
Вставка внедренного видео удобна, но увеличивает размер презентации.
При использовании ссылок на видео размер файла презентации не увеличивается, но ссылки могут становиться недействительными. Рекомендуется хранить презентации и видеозаписи, на которые указывают ссылки, в одной папке.

Поддерживаемые форматы видео
В PowerPoint 2016 и более новых версиях рекомендуется использовать MP4-файлы с видео, закодированным в формате H.264 (или MPEG-4 AVC), и звуком в формате AAC.
Внедрение видео, сохраненного на компьютере
В обычном режиме выберите слайд, в который вы хотите добавить видео.
На вкладке Вставка щелкните стрелку под кнопкой Видео и выберите пункт Видео на компьютере.
В окне Вставка видеозаписи выберите видео и нажмите кнопку Вставить.
Создание ссылки на видео, сохраненное на компьютере
Чтобы избежать появления нерабочих ссылок, рекомендуем скопировать видео в одну папку с презентацией, а затем создать ссылку на него.
В обычном режиме щелкните слайд, в который вы хотите добавить ссылку на видео.
Читать еще: Что сделать чтобы не скрипела дверь
На вкладке Вставка щелкните стрелку под кнопкой Видео и выберите пункт Видео на компьютере.
В окне Вставка видеозаписи выберите нужное видео, щелкните стрелку вниз рядом с кнопкой Вставить и выберите Связь с файлом.
PowerPoint 2016 и более новые версии поддерживают воспроизведение видео с несколькими звуковыми дорожками, а также скрытые и обычные субтитры, внедренные в видеофайлы. Дополнительные сведения см. в статье Создание доступных презентаций PowerPoint.
Поиск места хранения связанного видео
Если на слайде есть видео, и вы хотите узнать, где оно хранится, на вкладке Файл выберите пункт Сведения. В разделе Оптимизация файлов мультимедиа для совместимости будет представлена информация обо всех файлах мультимедиа в презентации, независимо от того, доступны ли они по ссылке или встроены в файл. При наличии ссылок на видео в PowerPoint отобразится гиперссылка Просмотр ссылок. Щелкните ее, чтобы открыть диалоговое окно, в котором показано место хранения всех связанных файлов.
Видео на веб-сайте YouTube
Сведения о том, как вставить видео с веб-сайта YouTube, см. в статье Вставка видео или добавление ссылки на него на сайте YouTube.
Предварительный просмотр видео
При выделении видео на слайде под ним появляется панель инструментов с кнопкой “Воспроизведение/пауза”, индикатором выполнения операций, кнопками перехода вперед/назад, таймером и кнопкой громкости. Нажмите слева на этой панели инструментов кнопку Воспроизведение для предварительного просмотра видео.

Автоматическое воспроизведение видео или воспроизведение по щелчку
По умолчанию в режиме слайд-шоу видео воспроизводится в последовательности щелчков. Это означает, что видео воспроизводится, когда вы щелкаете в любом месте слайда для перехода к следующему действию (или нажимаете клавишу ПРОБЕЛ, Стрелка вправо или другие клавиши, выполняющие переход к следующему действию). Этот параметр запуска видео называется В последовательности щелчков.
Однако при желании вы можете включить автоматическое воспроизведение видео при его появлении на экране или воспроизведение по щелчку.
Выделите область видео.
На ленте на вкладке Средства работы с видео — воспроизведение откройте список Начало и выберите нужный параметр.
Источник: vsepomode39.ru