Меню Рубрики

Установка плеера на страницу сайта

Установка видео плеера на сайте

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

В данном уроке мы с Вами будем говорить об одном из наиболее популярных и наиболее удобных видеоплееров под названием jwplayer.

1. Введение

Данный плеер обладает очень хорошим функционалом, поддерживает такие видео форматы как flv, mp4, аудио mp3, aac, также возможно проигрывание роликов с канала youtube. Поддерживается всеми известными браузерами, такими как Chrome, Firefox, IE, Opera, Safari, мобильный операционной системой Android, и такими устройствами как iPhone / iPad.

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Технологии FLASH и HTML5, то есть плеер легко отображается на всех устройствах.

Удобный и доступный JavaScript API

Поддержка потокового видео протокола RTMP и HTTP псевдо-потока.

Возможность загрузки скинов (только для платной версии).

Для работы нам потребуется небольшой тестовый сайт, либо одна интернет страница, на которой мы и будем выводить видео плеер. Данный сайт уже заранее подготовил, вот так он выглядит:

Думаю, приводить исходный код здесь по тексту нет необходимости, так как он очень простой, к тому же в исходных материалах к уроку он будет приведен.

Теперь давайте установим данный плеер.

2. Установка плеера jwplayer.

Первым делом необходимо скачать плеер. Для этого переходим на официальный сайт разработчика, по адресу: http://www.longtailvideo.com/.

Далее переходим по ссылке Get JW Player — открылась страница скачивания плеера.

Вводите адрес своего почтового ящика в поле e-mail и кликаете по ссылке FREE DOWNLOAD для скачивания. Обратите внимание, что данный плеер поставляется в двух версиях: платной и бесплатной. Бесплатная версия, обладает, конечно, ограниченным функционалом, но его вполне достаточно для нормального отображения видео и полноценной настройки под Ваши нужды. К примеру, в платной версии есть возможность выбора, различных скинов (внешний вид плеера), также шаринг в социальных сетях (ссылка поделиться данным видео) и т.д.

В результате скачивания мы получаем архив: jwplayer-3242.zip. Давайте его распакуем в папку js тестового сайта. В результате в данной папке мы получили следующие файлы:

Далее необходимо подключить файл jwplayer.js к нашему тестовому сайту. Для этого открываем файл index.php и пишем следующий код (между тегами head):

После этого необходимо создать блок, в котором будет выведен плеер, поэтому создадим блок div с идентификатором player:

Строка For player при загрузке плеера показана не будет. Далее, используя javascript необходимо прописать код, который будет выводить плеер в созданном блоке. Для этого можно создать отдельный файл и все кодирование вести в нем, или писать в этом же файле, открыв теги script. Но мне удобней использовать отдельный файл, поэтому давайте создадим пустой файл под названием script.js и сразу же его подключим. Только данный файл необходимо подключать после того как Вы создали блок, для отображения плеера. Поэтому подключаем данный файл:

Итак, установка плеера завершена, теперь осталось его вызвать для отображения на экране.

3. Воспроизведение видео.

Итак, давайте выведем плеер в указанном блоке, для этого открываем файл script.js и пишем следующий код:

Обратите внимание, что вызывается метод jwplayer() – данный метод входит в состав файла jwplayer.js и является основным при отображении плеера. То есть вызывая данный метод мы передаем ему параметром идентификатор того блока, в котором он должен быть отображен на экране. В нашем случае это блок div с идентификатором player. Затем вызываем метод setup – который определяет все основные параметры плеера:

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

image – путь к изображению, которое будет показано до начала воспроизведения видео (либо музыки, либо ролика канала youtube).

Теперь давайте сохраним изменения и посмотрим, что отображается на экране браузера.

Как Вы видите, плеер нормально отображается и если, нажать по кнопке воспроизвести, то начнется воспроизведение видео ролика. Теперь, если Вам необходимо воспроизвести аудио файл, для этого необходимо указать путь к этому файлу в параметре file:

Если необходимо отобразить видео-ролик из канала youtube, для этого ссылку на данный ролик также указываете в параметре file:

Согласитесь все очень просто. Теперь давайте поговорим о настройках данного плеера.

4. Настройка плеера.

Первым делом давайте настроим размеры данного плеера. Для этого необходимо указать два параметра width и height:

Думаю, что Вы уже догадались, что width это ширина, а height – высота. Размерность – пиксели. Теперь давайте посмотрим, что у нас получилось:

Как Вы видите, размеры плеера изменились. Теперь давайте добавим еще несколько настроек:

Давайте по-порядку рассмотрим каждый параметр:

controls:true – отвечает за отображение панели управления плеера. Если будет установлено значение false, то панель управления отображаться не будет. По умолчанию – true;

autostart:false – если установить значение true, то воспроизведение данного ролика начнется сразу же поле загрузки страницы с плеером. По умолчанию – false;

mute:false – если установить значение true, то при воспроизведении будет отключен звук (конечно, используя панель управления, плеером го можно включить). По умолчанию – false;

stretching:»uniform» – масштабирование видео в окне плеера. Имеет следующие значения: none – реальный размер видео; exactfit – видео бут растянуто по величине окна плеера (не пропорционально), при этом может наблюдаться потеря качества, то есть, видео может быть либо вытянутым, либо растянутым; uniform – масштабирование пропорционально, что бы видео поместилось в окно плеера; fill – пропорциональное масштабирование видео до размеров экрана, но если из-за формата видео, оно не будет помещаться в окно плеера, лишние части будут обрезаны. По умолчанию – uniform;

title:»hello world» – заголовок видео ролика.

Читайте также:  Установка блютуза на ноут

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Давайте сохраним изменения и посмотрим, что у нас получилось:

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

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

5. Работа с playlist.

Playlist – это заранее определенный список файлов, которые должны быть воспроизведены в плеере. Плеер jwplayer также поддерживает плейлисты, поэтому давайте научимся с ними работать, и добавим несколько файлов к воспроизведению. Для этого пишем следующий код:

Обратите внимание, что за отображение плейлиста отвечает параметр playlist, у которого так же есть свои параметры. Здесь будьте очень внимательны с синтаксисом. Смотрите код параметра playlist выделен квадратными скобками, а каждый новый файл плейлиста отделен фигурными скобками (позиции плейлиста). Теперь о параметрах playlist:

file – путь к файлу, для воспроизведения;

image – изображение, которое выводится перед указанным файлом;

description – краткое описание файла, что воспроизводится.

Теперь для того, что бы показать сам плейлист (список файлов), необходимо также указывать параметр listbar, у которого также есть две настройки:

position:’bottom’ – позиция отображения плейлиста. В данном случае внизу, также есть возможность расположить данный блок справа. Для этого необходимо указать значение right;

size:150 – размер блока в пикселях.

Теперь давайте посмотрим в браузере, что у нас получилось:

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

Как Вы видите, используется все тот же параметр playlist, но теперь он имеет всего лишь одну секцию (как бы всего одна позиция в списке воспроизведения). Описываем уже знакомые нам параметры title, image, description, но вместо параметра file, пишем параметр sources. Данный параметр определяет источники одного и того же видео файла и как Вы видите в нем также есть свои настройки:

file – путь к файлу для воспроизведения;

label – заголовок, который будет отображен в специальном меню выбора источников видео;

image – изображение, которое показано перед воспроизведением;

default – если установлено значение true, значит, данный источник показывается по умолчанию

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Как Вы видите, все нормально отображается. Теперь на панель управления плеером добавлена возможность выбора источников.

6. Отображение субтитров.

Плеер jwplayer поддерживает возможность отображения субтитров. Для этого нужно создать специальный текстовый файл, с расширением VTT, вот такого содержания:

Смотрите, вначале указываете ключевое слово WEBVTT, затем указываете временные интервалы и текст, который будет отображен в определенном интервале времени. При отображении текста можно использовать некоторые html теги. Для форматирования текста. К примеру, теги b — для придания жирности текста и font color=»#3333CC» для определения цвета текста. Для отображения субтитров необходимо добавить следующий код:

Как Вы видите, за работу с субтитрами отвечает параметр tracks. У каждого видео может быть несколько различный субтитров, к примеру, на разных языках, поэтому синтаксис данного параметра аналогичен параметру playlist, то есть, вначале указываем квадратные скобки, а затем настройки, относящиеся к определенному субтитру, отделяются фигурными скобками. Настройки параметра tracks:

file – путь к VTT файлу (текст субтитров и временные интервалы);

label – название субтитра на панели выбора субтитров;

default – если данная настройка имеет значение true, значит, субтитр выводится по умолчанию.

Теперь давайте перейдем в браузер и посмотрим, что у нас получилось:

Используя параметр tracks, можно облегчить навигацию по видео файлу, используя небольшие скриншоты видео ролика, показывающиеся, при наведении курсора мыши на временную панель плеера. Для этого необходимо в фале VTT, вместо текста, который отображался в субтитрах прописать имена фалов, которые должны отображаться в определенные интервалы времени, к примеру (файл sub_th.vtt):

Далее пишем следующий код:

Как Вы видите, необходимо указать путь к файлу VTT и задать настройке kind, значение «thumbnails» . Теперь давайте посмотрим, что у нас получилось:

7. Работа с javaScript API.

Плеер jwplayer содержит очень большой набор различных функций и методов, для работы, используя язык javaScript. Сейчас мы рассмотрим только несколько из них. Подробное описание данных функций и методов Вы найдете в официальной документации по плееру, по адресу http://www.longtailvideo.com/support/jw-player/28832/about-jw-player.

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

А в файле script.js, создадим функцию add_volume(), которая будет увеличивать громкость воспроизведения видео:

Смотрите, у плеера jwplayer есть метод play(), вызывая который мы начинаем воспроизведение, или останавливаем его (если оно уже началось). Что мы и делаем при нажатии кнопки Start. То есть описали для данной кнопки обработчик события onclick (он сработает, когда по тексту кликнуть мышью), другими словами, при нажатии по кнопке Start будет вызван метод play() (начало/останов воспроизведения).

Далее, при нажатии по кнопке Get volume – вызывается метод getVolume() – который возвращает текущую громкость плеера, ее мы и выводим на экран при помощи функции alert().

И последняя кнопка Set volume – используется для плавного увеличения громкости плеера. Для этого мы создали функцию add_volume(), которая вызывается при клике мышью по данной кнопке. Данная функция очень проста. Смотрите, вначале получаем текущую громкость и записываем ее в переменную volume. Проверяем, не вышла ли она за пределы максимального значения (значение 100). И используя метод setVolume(volume), устанавливаем новое значение громкости (новое значение передается параметром методу).

Теперь если проверить в браузере, то все работает нормально.

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

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

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Читайте также:  Установка концевой муфты смета

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

источник

Как создать плеер для сайта на HTML5 и JavaScript

Контент на сайте можно разнообразить с помощью видео или аудио. Учим использовать HTML5 video- и audio-плееры и работать с ними на JS.

Уже прошли те времена, когда для воспроизведения аудио или видео на сайте нужно было подключать сторонний плеер на Flash — в Adobe решили больше не поддерживать эту технологию, а значит, мы можем вздохнуть с облегчением, потому что HTML5 позволяет создавать плееры с помощью тегов и .

Как использовать audio и v >Чтобы создать плеер, достаточно такого кода для аудио:

Атрибут controls используется для того, чтобы отобразить элементы управления. Если его не указать, никакого интерфейса не будет: аудиоплеер не будет отображаться, а в видеоплеере просто будет показан кадр из видео или постер.

Обратите внимание, как указан источник. Для видео достаточно прописать атрибут src, а для аудио нужно прописывать дополнительные элементы source, чтобы указать пути и формат файлов. В коде выше добавлено два одинаковых файла, но в разных расширениях — это нужно для того, чтобы прослушать запись можно было на всех устройствах и во всех браузерах, потому что не все из них поддерживают mp3 или какой-то другой формат.

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

Вот список атрибутов, которые можно указать для плеера:

  • controls — панель управления;
  • autoplay — автовоспроизведение;
  • loop — цикличность;
  • muted — выключение звука;
  • poster — обложка видео. Если не указать, будет выбран случайный кадр;
  • preload — предварительная загрузка. Существует 3 значения: auto (полностью), metadata (небольшую часть, чтобы определить основные метаданные) и none (без загрузки);
  • src — ссылка на файл.

Также можно указать высоту и ширину.

Существует элемент , который размещается внутри плеера, — в нем указывается путь к текстовым файлам: субтитрам или метаданным. Для них прописываются следующие атрибуты:

  • default — указывает на дорожку, которая используется по умолчанию;
  • kind — тип файла, можно указать следующие значения:
  • subtitles — субтитры (стоит по умолчанию),
  • captions — субтитры для глухонемых,
  • chapters — название глав и их временные рамки,
  • descriptions — звуковое описание происходящего для слепых,
  • metadata — метаданные;
  • label — название дорожки;
  • src — путь к файлу;
  • srclang — язык дорожки.

Всего этого достаточно, чтобы вставить простой плеер на сайт, но некоторых функций у него все-таки нет:

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

Поэтому мы подключаем JS и пишем свой интерфейс.

Как написать плеер на JS

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

источник

Website-create.ru

Если Вы столкнулись с вопросом добавления видео ролика на страницы Вашего сайта или блога, но не знаете, как это сделать, то этот урок для Вас! В данном уроке мы рассмотрим 3 альтернативных способа добавления видео на сайт, и Вы сможете выбрать тот, который понравится Вам больше.

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

Так или иначе, будь то полезное видео с уроком или инструкцией, демонстрационное видео какого-либо продукта или развлекательное видео, призванное скрасить досуг пользователя, рано или поздно появляется необходимость внедрения этого видео в веб страницу.

Есть несколько способов сделать это. Сегодня мы рассмотрим 3 разных способа, которые помогут Вам справиться с этой задачей. Какой из них выбрать – решать Вам. Итак, поехали…

Как вставить видео на сайт

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

Это просто html5 файл, который содержит в себе несколько заголовков. Далее под каждым из них мы будет размещать соответствующий код.

Я также прописала некоторые стили для этой странички. Они хранятся в файле «style.css», который лежит в том же каталоге, что и html-файл. Содержимое файла «style.css» выглядит следующим образом:

Если открыть наш html-файл в браузере, то сейчас он будет выглядеть так:

Подготовка закончена, давайте перейдем к самой вставке видео на веб страницу.

Первый способ, который мы рассмотрим – это вставка видео при помощи сервиса Youtube.

1. Первое что нам нужно – это иметь какой-то видео-ролик, который мы хотим вставить. Допустим, что он у нас есть и хранится на нашем локальном компьютере.

Теперь переходим на сайт www.youtube.com. Здесь нам нужно нажать на кнопку «Войти», расположенную в верхнем правом углу. После этого нужно произвести вход при помощи Вашего аккаунта Google. Если вдруг у Вас его еще нет, то сначала нужно его завести.

2. После того, как Вы вошли в сервис под своим аккаунтом, нажмите на кнопку «Добавить видео». Сервис предложит Вам выбрать файл для загрузки, и Вы можете выбрать нужный файл, который хранится у Вас на компьютере.

Читайте также:  Установка аэраторов на наплавляемой кровле

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

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

Когда Вы перейдете по данной ссылке, то увидите Ваше видео, размещённое на сервисе Youtube.

3. Теперь нам нужно получить код, для вставки видео на нашу веб страницу. Для этого сразу под видео щелкните по вкладке «Поделиться», а в ней по вкладке «HTML-код».

Теперь Вы можете увидеть html-код, который понадобится нам для вставки. Здесь также можно задать и некоторые другие параметры, такие как: размер видео, показывать ли похожие видео после окончания просмотра и режим конфиденциальности.

Когда Вы настроите все параметры, то можете скопировать код и вставить его в Ваш html-файл. Я вставлю код в файл под соответствующим заголовком следующим образом:

И теперь, если мы посмотрим работу нашего html-файла в браузере, то увидим, что видео вставилось и его можно просмотреть (посмотреть код в действии Вы можете нажав на иконку «Демо» в начале статьи).

Здесь, я думаю, все понятно. Давайте перейдем к следующему способу.

Вставляем видео при помощи скрипта плеера.

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

Итак, у Вас должен быть видеоролик, который Вы будете загружать. Допустим, что он хранится в какой-то папке на Вашем сайте. Я сохраню видеофайл в папке с именем «video».

Теперь нам нужен сам плеер. На данный момент существует множество бесплатных плееров, с помощью которых можно вставить видео на сайт. Давайте воспользуемся плеером Flowplayer. Это бесплатный видеоплеер для веб, который разработан специально для владельцев сайтов.

1. Скачайте файлы плеера себе на компьютер нажав вот на эту ссылку: FlowPlayer

2. После того, как Вы скачали файлы плеера на свой компьютер, нужно их разархивировать в какую-либо папку на Вашем сайте. Я создала папку «flowplay» и разархивировала файлы туда.

3. Теперь перейдем в html-файл и займемся кодом.
Первое, что нам нужно сделать это подключить javascript-файл плеера к нашему html-файлу. Для этого внутри тега head, сразу после подключения таблицы стилей пропишите следующий код:

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

4. Теперь перейдем в тело нашего файла и разместим сам плеер с проигрываемым файлом. Я размещу его прямо под соответствующим заголовком, предварительно поместив в тег div, который выровняю по центру.

Здесь Вам нужно будет проверить пути до файлов и прописать свои. Делая это будьте внимательны.

Также здесь выставлены настройки, которые не дают видео запускаться автоматически, однако разрешают его загрузку. Если Вы хотите, чтобы видео запускалось автоматически, то после пути к файлу «flowplayer-3.2.2.swf» следует убрать запятую, закрыть круглую скобку и поставить «;» (без кавычек), а все остальное, что находится после этого и до закрывающего тега «/script» удалить.

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

Имейте в виду, что видео, загружаемое плеером должно иметь формат .mp4 или .flv.

Давайте опробуем еще один способ и попробуем загрузить тот же самый ролик, который хранится у нас на сервере, но только при помощи новых возможностей HTML5.

1. Найдите третий заголовок и прямо под ним пропишите следующий код:

Если вы откроете страницу в браузере, то увидите, что Ваше видео добавилось под третьим заголовком. Вот так просто! Всего одной строчкой.

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

Параметр «controls» добавляет панель управления для видео.

Если Вы хотите, чтобы Ваше видео воспроизводилось сразу после загрузки страницы, то нужно добавить параметр «autoplay».

Этот способ отвечает новым стандартам html5 и, я думаю, заинтересует разработчиков, желающих уже сегодня внедрять стандарты будущего.

Однако, здесь есть свои «подводные камни», например, разная поддержка браузерами разных форматов мультимедиа. Данный пример будет замечательно работать во всех новых браузерах, но не в браузере Опера. Чтобы этот код заработал в Опере мы должны конвертировать видео файл в формат «Ogg Theora» и немного поменять код, чтобы дать браузеру альтернативный выбор.

Конвертировать файл можно с помощью сервиса online-convert.com/ . После конвертации сохраните полученный файл в папку «video», а код для вставки видео поменяйте на следующий:

Теперь пример будет работать и в браузере Опера.

Однако, есть еще одна загвоздка, касающаяся старых браузеров, которые не понимают html5-теги. К сожалению, переход к новым стандартам также требует и умения находить обходные решения.

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

С таким кодом новые версии браузеров успешно обработают наш элемент «video», а если вдруг пользователь откроет страницу при помощи старого браузера, то незнакомый тег «video» будет проигнорирован, но тег «iframe» будет успешно обработан и видео подгрузится с Youtube.

Пожалуй, на этом буду заканчивать. Напоминаю, что все исходные материалы Вы можете скачать, щелкнув по иконке «Исходники» в начале статьи, а посмотреть работу всех трех примеров можно щелкнув по иконке «Демо» там же.

Оставляйте свои комментарии и делитесь этой статьей с друзьями при помощи кнопок социальных сетей. Буду Вам очень признательна.

Также подписывайтесь на обновления блога. Впереди много всего интересного и полезного по теме создания веб сайтов.

Желаю Вам хорошего настроения и успехов в Вашей работе!

источник