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

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

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

Также в настройках мы можем отключить показ похожих видео в конце, просто убрав соответствующую галочку. Тогда в коде появляется дополнительный парамертр ?rel=0 . Смотрите на скриншоте:

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

Вот основные из них:

vq=hd720 – данный параметр позволяет сразу задать вашему видео высокое качество воспроизведения. Это удобно, так как по умолчанию Ютуб проигрывает видео в среднем качестве (360p или 480p). То есть, в том, которое без проблем потянет медленный интернет.

С другой стороны, если скорость интернета слабая, то качество 720p и выше будет тормозить видео и, вероятнее всего, его так и не досмотрят.

autoplay=1 – видео запускается автоматически. То есть, как только посетитель попадет на ваш сайт, ролик начнет воспроизводиться сразу, без дополнительных действий с его стороны.

start=N – воспроизведение с конкретной секунды, где вместо N мы просто указываем нужное значение. Например, команда start=120 задает показ видео со 2-ой минуты.

showinfo=0 – скрывает название и информацию о видео в верхней части:

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

modestbranding=1 – убирает логотип Youtube в нижней панели, но при этом он появляется сверху.

Даже если использовать последние три команды вместе (showinfo=0, controls=0, modestbranding=1), то логотип в правом нижнем углу все равно отображается. Так что, совсем его не убрать.

И еще несколько команд:

disablekb=1 – не позволяет управлять воспроизведением видео с клавиатуры, в частности останавливать его пробелом и прокручивать стрелками вперед-назад.

fs=0 – запрещает разворачивать видео на весь экран.

theme=light – делает панель управления светло-серой. Вот такой:

iv_load_policy=3 – отключает аннотации.

Теперь о том, как добавлять эти параметры в код видео.

Все очень просто. Первая команда указывается сразу после ссылки на ваш ролик, после вопросительного знака (?), а все последующие – после амперсанда (такого вот значка &).

Смотрите на примере моего кода:

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

Еще несколько слов об альтернативе…

У Юджина Боса есть такой бесплатный скрипт «Ютуб Профессионал». Он позволяет генерировать код видео с дополнительными параметрами автоматически. Правда, настроек в нем поменьше – только самые распространенные.

Пользоваться скриптом проще простого:

Ставим галочки напротив тех параметров, которые нам нужны.

Жмем сгенерировать код, и копируем его справа. Если вдруг видео не отображается, просто добавьте перед ссылкой http://

«Ютуб Профессионал» вместе с другими бесплатными скриптами можно скачать здесь .

И напоследок, посмотрите видео – наглядный вариант статьи:

Если появятся вопросы – пишите в комментариях. Всегда рада помочь.

P.S. На днях заметила, что после очередного обновления Ютуб, стало больше настроек плеера на сайте. Теперь во вкладке html-код, под кодом вставки видео, отображается надпись “ЕЩЕ”, кликая по ней, мы раскрываем дополнительные настройки. И здесь также можем скрывать панель управления, название видеоролика и информацию о нем.

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

Щёлкните по своему фото в правом верхнем углу YouTube и выберите «Настройки». Когда откроется новая страница, на левой панели кликните «Воспроизведение». Затем снимите флажок с опции «Показывать в видео аннотации и уведомления».

2. Выбирайте скорость воспроизведения

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

Чтобы настроить темп воспроизведения, кликните по шестерёнке в плеере YouTube, выберите «Скорость», а затем подходящее значение.

3. Отключайте автовоспроизведение

По умолчанию после завершения одного ролика YouTube автоматически воспроизводит следующий. При желании вы можете легко отключить эту функцию. Для этого в правом верхнем углу есть переключатель «Автовоспроизведение».

Кроме того, сервис автоматически воспроизводит ролик, как только вы открываете его страницу. Штатными средствами изменить такое поведение YouTube нельзя. Но вы можете воспользоваться расширением Enhancer for YouTube. Установите его и поставьте в настройках флажки возле пунктов «Автоматически приостанавливать видео открытые в фоновых вкладках» и «Также приостанавливать видео открытое в активной вкладке».

YouTube Enhancer предлагает и другие возможности, включая автовыбор разрешения и настройки цветовой схемы интерфейса. В качестве альтернативы можете попробовать другое кроссбраузерное расширение - Magic Actions for YouTube . Оно также позволяет блокировать автовоспроизведение и содержит ещё больше дополнительных функций. Но Magic Actions устроено сложнее и новичок может запутаться в многочисленных настройках расширения.

4. Просматривайте и загружайте текстовые расшифровки

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

Вы также можете просматривать субтитры в виде расшифровки ролика прямо в интерфейсе YouTube. Для этого нужно лишь нажать на три точки под роликом и выбрать «Посмотреть расшифровку видео».

5. Делитесь ссылками на нужный фрагмент

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

6. Зацикливайте воспроизведение

Иногда хочется зациклить воспроизведение музыкального клипа или другого видео, чтобы просмотреть его несколько раз подряд. Для этого достаточно кликнуть правой кнопкой мыши по видео и выбрать опцию «Повтор».

7. Скачивайте ролики

Существуют десятки различных способов загрузить видео с YouTube. Рассмотрим один из самых простых. От вас потребуется только вставить в адрес страницы с роликом буквы ss прямо перед словом youtube, и вы моментально будете перенаправлены на страницу загрузки.

8. Извлекайте аудио

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

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

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

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

Итак, первым делом мы объявляем тег audio и говорим ему где лежит наш mp3 файл с помощью параметра src, в нашем случае он лежит в корне, но вы можете положить его куда угодно главное чтобы вы не забыли правильно прописать путь к нему. Далее у нас идет блок из кнопок, каждая кнопка у нас реализуется по средствам тега button и соответственно мы можем, воспроизвести, приостановить, и сделать громче или тише.

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

Здесь у нас уже немного посложнее, но при этом как всегда просто. Так как не все браузеры поддерживают воспроизведение видео на HTML 5, нам пришлось вставить туда по старинке и Flash плеер, чтобы не получилось, что кто то видит, а кто то будет ругаться на «кривой сайт», но суть не в этом, что мы имеем?

С помощью тега video мы говорим браузеру, что здесь присутствует видео файл, размер окна воспроизведения задается стандартными параметрами width, height . Далее тегом source мы говорим браузеру браузеру откуда взять файл и собственно прописываем к нему путь src="__VIDEO__.MP4" с помощью параметра type мы говорим какой тип видео-файла ему необходимо воспроизводить. В этом примере мы встраиваем два видео формата, это mp4 и ogv. Начиная с тега object у нас идет подключение flash плеера, я подробно не буду описывать этот момент, так как я по нему писал целый урок: .

Вот что у меня получилось в итоге, я просматривал данный код браузером Google Chrome Версия 26.0.1410.43 m и все работало без подключения flash плеера:

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

Дата публикации:2013-04-10

• Tutorial

Ранее мы уже рассмотрели общие вопросы использования HTML5 Audio и Video и начали погружаться в детали, начав с задачи определения поддержки браузером нужного кодека . Сегодня мы рассмотрим задачу создания собственного видео-плеера на HTML5 Video.

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

API для управления воспроизведением

Интерфейс HTMLMediaElement

Состояние сети и готовность к работе
src — ссылка (url) на воспроизводимый контент
buffered — буферизованные куски видео

Воспроизведение и контролы
currentTime — текущий момент проигрывания (с.)
duration — длительность медиа-контента (с.)
paused — находится ли воспроизведение на паузе
ended — закончилось ли проигрывание
muted — включение/выключение звука
volume — уровень звука
play() — начать проигрывание
pause() — поставить на паузу

События
oncanplay — можно начать проигрывание
ontimeupdate — изменена позиция проигрывания
onplay — запущено проигрыв
onpause — нажата пауза
onended — воспроизведение закончилось

Важно: это далеко не все методы и свойства, выставляемые через интерфейс HTMLMediaElement.

Интерфейс HTMLVideoElement

Разница между width/height и videoWidth/videoHeight в том, что последние — это собственные характеристики видео, в частности, с учетом соотношения сторон и других характеристик, в то время как контейнер для видео может быть любых размеров (больше, меньше, с другой пропорцией).

Play & Pause

Первым делом нам необходим video-элемент, которым мы хотим управлять, и элемент на который можно нажимать для управления текущим состоянием:

#controls span { display:inline-block; } #playpause { background:#eee; color:#333; padding:0 5px; font-size:12pt; text-transform:uppercase; width:50px; }

Обратите внимание на инвертирование состояния кнопки (paused) и действия (play).

Теперь надо добавить немного js-кода, чтобы нажатие на кнопку play переключало ее состояние и соответственно запускало видео-ролик или ставило его на паузу:
$(document).ready(function(){ var controls = { video: $("#myvideo"), playpause: $("#playpause") }; var video = controls.video; controls.playpause.click(function(){ if (video.paused) { video.play(); $(this).text("Pause"); } else { video.pause(); $(this).text("Play"); } $(this).toggleClass("paused"); }); });

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

… казалось бы, все уже замечательно работает, но не тут-то было! Есть несколько мелочей, которые нам также нужно учесть.

Проигрывание сначала

Video.addEventListener("ended", function() { video.pause(); controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });

Контекстное меню

Video.addEventListener("play", function() { controls.playpause.text("Pause"); controls.playpause.toggleClass("paused"); }); video.addEventListener("pause", function() { controls.playpause.text("Play"); controls.playpause.toggleClass("paused"); });

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

Var controls = { ... togglePlayback: function() { (video.paused) ? video.play() : video.pause(); } ... }; controls.playpause.click(function(){ controls.togglePlayback(); });

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

Controls.video.click(function() { controls.togglePlayback(); });

Текущий результат:

Прогресс

​ 00:00 / 00:00

И соответствующие стили:

#progress { width:290px; } #total { width:100%; background:#999; } #buffered { background:#ccc; } #current { background:#eee; line-height:0; height:10px; } #time { color:#999; font-size:12pt; }
И несколько ссылок на соответствующие элементы для быстрого доступа в объект controls:
var controls = { ... total: $("#total"), buffered: $("#buffered"), progress: $("#current"), duration: $("#duration"), currentTime: $("#currenttime"), hasHours: false, ... };

Первым делом, нам нужно понять, какова длительность ролика — для этого у video-элемента есть свойство duration . Отследить это значение можно, например, в момент готовности ролика к проигрыванию — по событию oncanplay :

Video.addEventListener("canplay", function() { controls.hasHours = (video.duration / 3600) >= 1.0; controls.duration.text(formatTime(video.duration, controls.hasHours)); controls.currentTime.text(formatTime(0),controls.hasHours); }, false);

В данном случае, мы попутно определяем, нужно ли отображать количество часов в видео-плеере (кстати, вообще говоря, спецификация предполагает, что длительность ролика может изменяться — в этот момент срабатывает событие ondurationchange , и к тому же быть бесконечной — например, при стриминге радио).

Также мы используем специальную функцию formatTime для перевода секунд в формат HH:mm:ss или mm:ss:

Function formatTime(time, hours) { if (hours) { var h = Math.floor(time / 3600); time = time - h * 3600; var m = Math.floor(time / 60); var s = Math.floor(time % 60); return h.lead0(2) + ":" + m.lead0(2) + ":" + s.lead0(2); } else { var m = Math.floor(time / 60); var s = Math.floor(time % 60); return m.lead0(2) + ":" + s.lead0(2); } } Number.prototype.lead0 = function(n) { var nz = "" + this; while (nz.length < n) { nz = "0" + nz; } return nz; };

Для отображения процесса проигрывания нам понадобится событие ontimeupdate , срабатывающее при изменении текущего момента:

Video.addEventListener("timeupdate", function() { controls.currentTime.text(formatTime(video.currentTime, controls.hasHours)); var progress = Math.floor(video.currentTime) / Math.floor(video.duration); controls.progress.style.width = Math.floor(progress * controls.total.width()) + "px"; }, false);

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

Controls.total.click(function(e) { var x = (e.pageX - this.offsetLeft)/$(this).width(); video.currentTime = x * video.duration; });

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

Video.addEventListener("progress", function() { var buffered = Math.floor(video.buffered.end(0)) / Math.floor(video.duration); controls.buffered.style.width = Math.floor(buffered * controls.total.width()) + "px"; }, false);

Важный нюанс относительно свойства buffered , который нужно иметь в виду, заключается в том, что он предоставляет не просто время в секундах, а промежутки времени в виде объекта TimaRanges. В большинстве случаев это будет только один промежуток с индексом 0, и начинающийся с отметки 0c. Однако, если браузер использует HTTP range запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

Промежуточный результат:

Звук

С соответствующими стилями для включенного и выключенного состояний:
#dynamic { fill:#333; padding:0 5px; } #dynamic.off { fill:#ccc; }
Для переключения состояния динамика нам понадобится свойство mute :

Controls.dynamic.click(function() { var classes = this.getAttribute("class"); if (new RegExp("\\boff\\b").test(classes)) { classes = classes.replace(" off", ""); } else { classes = classes + " off"; } this.setAttribute("class", classes); video.muted = !video.muted; });
(Стандартные методы jQuery для переключения css-классов не работают с SVG-элементами.)
Если вы хотите также менять уровень громкости, то вам поможет свойство volume , принимающее значения в диапазоне .

Финальный результат:

Что еще...

• проверка поддержки браузером HMTL5 Video,

Недавно нашёл очень интересную программу SmoothVideo Project (SVP). Разработчики предлагают увеличить плавность видео за счёт удвоения частоты кадров. Например, если фильм идёт с частотой 30 кадров в секунду (fps), то он будет на лету переконвертирован в 60 fps.

Уже слышу возгласы, типа «да откуда возьмутся недостающие кадры!», «всё это фигня!» и т.п. Но, смею вас заверить, видео реально становится более плавным. SVP Manager перехватывает видеопоток в реальном времени, берёт два кадра и рисует между ними промежуточный кадр. По этой же технологии работают топовые 100-400 герцовые телевизоры. Теперь у вас есть возможность использовать интерполяцию у себя дома, причём абсолютно бесплатно! Разработчики также утверждают, что их алгоритмы превосходят те, что используются в дорогущих ЖК-панелях.

Установка SmoothVideo Project

Заходим на официальный сайт и скачиваем бесплатную версию пакета:

Как сделать плавное воспроизведение видео

Теперь всё что нам остаётся сделать, так это запустить любой фильм в плеере MPC-HC. Если всё работает, то в окне воспроизведения вы увидите сообщение о исходном и полученном fps для видео:

А значок SVP в системном трее примет соответствующий вид:

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

Программа поддерживают технологию OpenCL, благодаря которой часть обработки ложится на плечи видеокарты. Поддерживаются практически все видеокарты AMD (ATI), NVidia и некоторые интегрированные типа Intel HD, AMD HD. Проверьте чтобы у вас было включено OpenCL (правой кнопкой по иконке программы):

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

Интересная функция — подсветка полей как у Ambilight , по умолчанию включена. С её помощью, чёрные поля сверху и снизу заполняются светом, дополняя картинку.

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

Чтобы уплавнить видео с YouTube нужно , который можно скачать отдельно.