HTML

• Tutorial

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

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

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

Стандарт HTML5 для работы с видео вводит в DOM новый интерфейс — HTMLVideoElement, наследующий в свою очередь интерфейс HTMLMediaElement.

Интерфейс HTMLMediaElement

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

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

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

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

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

Интерфейс HTMLVideoElement

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

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

Play & Pause

Создание нашего собственного видео-плеера мы начнем с простой задачи: научимся запускать видео на проигрывание и останавливать воспроизведение. Для этого нам понадобятся методы play() и pause() и несколько свойств, описывающих текущее состояние видео-потока (мы также будем использовать библиотеку jQuery, не забудьте ее подключить).

Первым делом нам необходим 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-стилей для кнопок управления и их различных состояний и...

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

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

Во-первых, нам нужно правильно обработать окончание проигрывания видео-ролика (если, конечно, оно не зациклено), и в этот момент нужно переключить кнопки управления так, чтобы вместо состояния «pause» было состояние «play»:

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

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

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

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 запросы к серверу, например, в ответ на попытки перейти к другим фрагментам видео-потока, промежутков может быть несколько. Также надо учитывать, что в зависимости от реализации браузер может удалять из буфера памяти уже проигранные куски видео.

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

Звук

Наконец, давайте добавим еще небольшой штрих к нашем видео-плееру — возможность включать и выключать звук. Для этого добавим небольшой контрол с динамиком (SVG-иконка взята с сайта The Noun Project):

С соответствующими стилями для включенного и выключенного состояний:
#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,

Преимущества списков воспроизведения

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

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

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

Для создания вашего собственного списка воспроизведения зайдите в Windows под своим пользователем. После этого выбирайте в меню Пуск пункт Программы (All Programs) и щелкайте на Windows Media Player. При этом загрузится программа Windows Media Player, которая и поможет сделать список воспроизведения.

Затем щелкайте на Библиотеке мультимедиа (Media Library) и выбирайте Создать список воспроизведения (New Playlist). В появившемся диалоговом окне щелкайте Создать список воспроизведения (New Playlist).

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

Теперь наступила очередь ввести названия музыкальных композиций, которые вы хотите включить в список. Выбирайте их и нажимайте на кнопку OK. При этом, чтобы создать список воспроизведения, не нужно закрывать Windows Media Player. Воспользуйтесь Проводником (Windows Explorer) для перехода в папку с песнями. После этого просто щелкайте правой клавишей мыши на название песни, а в открывшемся меню нажимайте на пункт Добавить в список воспроизведения (Add to Playlist).

Щелкайте по названиям композиций, которые вы хотите добавить в Windows Media Player. Их количество ничем не ограничивается, поэтому смело можете добавлять столько композиций, сколько имеется на вашем компьютере.

Чтобы начать воспроизведение, два раза щелкните по любой композиции из списка. Если вы хотите, чтобы они проигрывались в последовательном порядке, проследите за тем, чтобы кнопка Shuffle была отключена. Чтобы закрыть проигрыватель со списком воспроизведения, нажмите левой клавишей мыши на кнопку Закрыть (Close).

Все разделы сайта сайт

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

Замедление и ускорение видео

Видео-урок по видеомонтажу

Вы наверняка много раз видели в кинофильмах, так называемый эффект «замедленного времени » - это когда все движется медленно и плавно, и выглядит так, как будто кто-то волшебным образом замедлил время:-)

Или же, наоборот, видеоэффект «ускорение времени », когда все объекты двигаются намного быстрее, чем в остальном кино и жизни. Такие эффекты для видео можно научиться делать и в домашних условиях:-)

В кинофильмах для получения такого эффекта «замедленное время» используют «ускоренную съемку». Например, для того, что бы получить подобное видео со скорость в два раза медленнее нормальной, то камера должна снимать не 24 кадра в секунду, а 48. Тогда при воспроизведении видео с нормальной скоростью 24 кадра в секунду, мы получим замедленное движение.

А для эффекта «ускорения времени» камера наоборот делает меньше кадров в секунду, чем обычно и при воспроизведении, мы получим ускоренное движение.

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

В подобных случаях нам и помогают инструменты, которыми располагают программы для обработки и редактирования видео.

Итак, переходим к видео-уроку, где будет наглядно показано ускорение или замедление видео фрагментов в в известном редакторе....

Урок видеомонтажа

Как замедлить или ускорить клип или его часть
в программе Adobe Premiere Pro?

В этом видео-уроке Вы узнаете, как пользоваться функцией замедления и ускорения части клипа в программе Adobe Premiere Pro CS5

Кстати, в предыдущих версиях видеоредактора Adobe Premiere эта функция также имеется и прекрасно работает, так что, самое время ей воспользоваться, даже если у вас установлен на компьютере Adobe Premiere Pro CS4:-)

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

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

Как убыстрить или наоборот замедлить кусок видео ролика :

Посмотрев этот видео-урок вы сможете применить на практике актуальную тему укорачивания пассивной части своего фильма или видеоклипа!

Как можно быстро изменить скорость
видео при монтаже

Как сделать интересные видео эффекты в других программах? Как ускорить видео , замедлить , и воспроизвести в обратном направлении.

Рассмотрим самое простое решение как сделать ускорение (замедление) части клипа в известном видеоредакторе Sony Vegas PRO.

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

Например, самый простой способ - это нужно просто нажать клавишу “Ctrl”, затем подвести курсор к краю видеофайла и при помощи зажатой левой кнопкой мыши растянуть, или сжать видеофайл на дорожке (таймлайн).

То есть, чтобы равномерно увеличить скорость видео на протяжении всего фрагмента, нужно удерживая клавишу «ctrl», взяться за край клипа и потянуть его внутрь (как бы сжать данный фрагмент).

Посмотрите на эту анимированную картинку. Вот как действует этот способ сжатия видеофрагмента в видеоредакторе Sony Vegas PRO

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

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

Всё о видеомонтаже:

1. Как Создать Собственный Фильм От Импорта Видеоматериала В Компьютер До Изготовления DVD-Диска С Вашим Фильмом Прямо У Себя Дома! Полное и продвинутое в программе Adobe Premiere

3 . Как правильно собрать и настроить его.

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

Недавно нашёл очень интересную программу 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 нужно , который можно скачать отдельно.

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

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

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

Также в настройках мы можем отключить показ похожих видео в конце, просто убрав соответствующую галочку. Тогда в коде появляется дополнительный парамертр ?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-код, под кодом вставки видео, отображается надпись “ЕЩЕ”, кликая по ней, мы раскрываем дополнительные настройки. И здесь также можем скрывать панель управления, название видеоролика и информацию о нем.