Как поставить проигрыватель на сайт — рассмотрим в общих чертах

  • Главная»
  • Уроки»
  • Для сайта»
  • Как добавить аудиокнопку на Ваш сайт?

В этом уроке Вы узнаете как вставить простую аудиокнопку на свой сайт с помощью аудиоплеера.


Аудиоплеер это простой бесплатный mp3 плеер основанный на технологии flash. Он выглядит как простая кнопка play.

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

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

Пример работы плеера


Скачать исходные файлы для этого плеера (Версия 0.9.3 от )

Ответы на частые вопросы:

Как добавить плеер на сайт?

Скачайте архив со всеми необходимыми для проигрывателя файлами. Распакуйте архив и перенесите эти файлы:

Это случай когда у Вас всего один плеер на страницу.

Если же Вам нужно несколько плееров, то Вам для каждого следующего нужно вставить такой же код, но в нем надо менять значение в конце строки ‘audioplay.swf?playerid=XXX‘ т.е. для второго включения поставьте 2, для третьего 3 и т.д.

Следующее, что Вам в этом случае надо будет сделать это изменить значение атрибута ‘playerid’ в файле config.xml.

В этом файле между строками

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

второго плеера, если он Вам нужен.

Блок: 1/2 | Кол-во символов: 1897
Источник: https://ruseller.com/lessons.php?id=86&rub=29

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

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

Смотреть

Блок: 2/9 | Кол-во символов: 127
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

5 последних уроков рубрики «Для сайта»


  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

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

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Блок: 2/2 | Кол-во символов: 1659
Источник: https://ruseller.com/lessons.php?id=86&rub=29

1. Введение

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

Краткие характеристики:

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

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

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

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

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

Блок: 3/9 | Кол-во символов: 847
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

Как вставить аудио (музыку) на сайт в html

1. На хостинге, где и располагается Ваш сайт, в корневом каталоге (папке, где индексный файл), соpдайте папку audio. В неё в дальнейшем будете помещать все аудио файлы.

2. Далее нужно скачать файлы плеера.

3. Теперь выберите нужные файлы, лучше в формате mp3. Создайте папку audio в корне сайта и закачайте их.

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

  

<script language="JavaScript" src="http://ваш_домен/audio/audio-player.js"></script>

<object type="application/x-shockwave-flash" data="http://ваш_домен/audio/player.swf" id="audioplayer1" height="25" width="290">

<param name="movie" value="http://ваш_домен/audio/player.swf">

<param name="FlashVars" value="playerID=1&amp;soundFile=http://ваш_домен/audio/название_аудио_файла.mp3">

<param name="quality" value="high">

<param name="menu" value="false">

<param name="wmode" value="transparent">

</object>

И всё готово! Можете посмотреть и работу примера.

Демонстрация

Блок: 2/4 | Кол-во символов: 1216
Источник: http://tradebenefit.ru/kak-vstavit-muziku-audio-v-html

Поддержка браузеров


Все браузеры, которые поддерживают тег <audio> — это IE9+, Chrome, Opera, Safari и Firefox. А вот ту есть ещё один нюанс, не все браузеры поддерживают все форматы аудио.

Например: IE9+ поддерживает только mp3 файлы, но не поддерживает wav и ogg.

Chrome после 6 версии поддерживает практически все форматы.

Opera 10+ не поддерживает mp3, честно, мне кажется что это её очень большой недостаток, такой популярный формат и не поддерживает. Но с wav и ogg справляется отлично.

С браузером Firefox та же самая история, что и с Оперой. За это ей огромный и жирный минус.

Safari поддерживает все форматы аудио кроме ogg.

Блок: 3/5 | Кол-во символов: 640
Источник: http://beloweb.ru/novichkam/kak-vstavit-na-sayt-audio-fayl-muzyiku-s-pomoshhyu-html5.html

Вставка видео

Формат видео-файлов:

  • MP4
  • WebM
  • Ogg
<video width="320" height="240" controls="controls" poster="logo.png"> 	<source src="movie.mp4" type="video/mp4"> 	<source src="movie.ogg" type="video/ogg"> Ваш браузер не поддерживает video. </video>

Результат в браузере:

Атрибуты тега для плеера:

Атрибут Значение Описание
audio muted Определяет по умолчанию состояние звука. В настоящий момент только «muted» разрешено
autoplay autoplay Если указан, видео начнет играть сразу как только оно будет готово
controls controls Если указан, кнопки управления будут показаны, такие как кнопка воспроизведения
height пиксели Указывает высоту видео плеера
loop loop Если указан, видео начнет проигрываться снова, как только закончится
poster url Указывает URL изображения, представляющего видео
preload auto

metadata

none
Если указан, видео будет загружено при загрузке страницы, и готово к запуску. Игнорируется, если «autoplay» указан
src url Адрес URL видео для проигрывания
width пиксели Указывает ширину видео плеера

Пример:

<video src="04.avi" loop="loop" audio="muted">

Другой вариант вставки видео (без плеера):

<a href="имя_файла.avi">Щелкни и смотри</a> <!-- Пример: --> <a href="ocean.qt"> Видеоклип 1 Мб</a>

* для форматов mpeg, avi

Блок: 3/4 | Кол-во символов: 1327
Источник: http://labs-org.ru/html-8/

Фавикон Favicon


Фавиконка отображается в адресной строке браузера перед URL страницы, также Фавикон можно заметить во вкладке браузера страницы. Поисковые системы передают Favicon вместе с результатами поиска.

  • файлы с расширением .ico
  • размер 16×16 пикселей
<html> <head> <link rel="icon" href="favicon.ico" type="image/x-icon"> </head>

Блок: 4/4 | Кол-во символов: 404
Источник: http://labs-org.ru/html-8/

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

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

jwplayer(«player»).setup({

file:»files/video.mp4″,

image:»files/pic.jpg»

});

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

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

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

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

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

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

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

Блок: 5/9 | Кол-во символов: 1425
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

5. Работа с playlist

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

jwplayer(«player»).setup({

width:»640″,

height:»480″,

listbar:{

position:’bottom’,//right

size:150

},

playlist:

});

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

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

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

title – заголовок файла;

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

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

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

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

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

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

jwplayer(«player»).setup({

width:»640″,

height:»480″,

listbar:{

position:’bottom’,//right

size:150

},

playlist:

}

]

});

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

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

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

title – заголовок;

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

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

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

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

Блок: 7/9 | Кол-во символов: 2614
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

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

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

WEBVTT

::—>::

<b>hello worldIam subtitle</b>

::—>::

<b>erdefsd</b><font color=»#3333CC»>fsdf sd</font>fsd fsd fsdf

jwplayer(«player»).setup({

file:»files/video.mp4″,

image:»files/pic.jpg»,

tracks:

});

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

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

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

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

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

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

WEBVTT

:—>:

0_0.jpg

:—>:

0_1.jpg

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

jwplayer(«player»).setup({

file:»files/video.mp4″,

image:»files/pic.jpg»,

tracks:[

{

file:»files/sub_th.vtt»,

kind:»thumbnails»

}

});

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

Блок: 8/9 | Кол-во символов: 1845
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

7. Работа с javaScript API

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

<ul>

<li onclick=»jwplayer(‘player’).play()»>Start</li>

<li onclick=»alert(jwplayer(‘player’).getVolume())»>Get volume</li>

<li onclick=»add_volume()»>Set volume</li>

</ul>

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

functionadd_volume(){

varvolume=jwplayer(‘player’).getVolume();

if(volume<100){

volume=volume+;

}

jwplayer(‘player’).setVolume(volume);

}

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

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

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

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

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

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

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

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

Смотреть

Блок: 9/9 | Кол-во символов: 2110
Источник: https://webformyself.com/ustanovka-video-pleera-na-sajte/

Кол-во блоков: 14 | Общее кол-во символов: 16111
Количество использованных доноров: 5
Информация по каждому донору:

  1. https://webformyself.com/ustanovka-video-pleera-na-sajte/: использовано 6 блоков из 9, кол-во символов 8968 (56%)
  2. http://tradebenefit.ru/kak-vstavit-muziku-audio-v-html: использовано 1 блоков из 4, кол-во символов 1216 (8%)
  3. http://labs-org.ru/html-8/: использовано 2 блоков из 4, кол-во символов 1731 (11%)
  4. http://beloweb.ru/novichkam/kak-vstavit-na-sayt-audio-fayl-muzyiku-s-pomoshhyu-html5.html: использовано 1 блоков из 5, кол-во символов 640 (4%)
  5. https://ruseller.com/lessons.php?id=86&rub=29: использовано 2 блоков из 2, кол-во символов 3556 (22%)



Поделитесь в соц.сетях:

Оцените статью:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий