Как сделать воспроизведение. Как сделать собственный видео-плеер на HTML5 Video

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

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

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

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

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

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

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

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

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

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

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