Установка параметров воспроизведения видео в презентации. Как сделать собственный видео-плеер на HTML5 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).

Автоматическое или ручное, несёт за собой некоторые системные изменения. Так и в случаях с медиа плеером, которые чаще используются в паре или количестве нескольких программ, обновления одного могут повлечь общие изменения в системе для остальных…

Как установить плеер воспроизведения по умолчанию?

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

Для того чтобы исправить программу для прослушивания потребуется проделать ряд простых действий:

1. Для начала откройте папку содержащую ваши музыкальные файлы.
2. Нажмите правой кнопкой любой аудио трек и выберите из контекстного меню пункт»Свойства».
3. Найдите строку которая указывает принадлежность выбранного формата файла к определённой программе и нажмите кнопку напротив «Изменить».
4. В появившемся окне из имеющегося списка программ выделите искомую (либо, если нет таковой нажмите «Обзор», чтобы вручную отыскать приложение).
   
   
   
5. После как программа выбрана, нажмите кнопку «ОК» внизу окна для того чтобы изменения вступили в силу.
6. И ещё раз «ОК», чтобы закрыть окно «Свойства», открытое изначально.

Вместо послесловия

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

• 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,

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

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

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

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

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