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

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

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

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

План урока

    1. Введение.

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

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

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

    5. Работа с playlist.

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

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

Детали учебника

Тема: JS

Сложность: Средняя

Урок: Видео (.mp4)

Время: 00:56:15

Размер архива: 167 Mb

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

1. Введение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jwplayer.flash.swf

jwplayer.html5.js

jwplayer.js

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

<script type="text/javascript" src="js/jwplayer.js"></script>

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

<div id="player">For player</div>

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

<script type="text/javascript" src="js/script.js"></script>

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

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:

file:"files/1.mp3"

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

file:" http://www.youtube.com/watch?v=eLJ_O5Ekxqw"

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

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

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

jwplayer("player").setup({
	file:"files/1.mp3",
	image:"files/pic.jpg",
	width:"640",
	height:"480"
});

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

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

jwplayer("player").setup({
	file:"files/1.mp3",
	image:"files/pic.jpg",
	width:"640",
	height:"480",
	controls:true,
	autostart:false,
	mute:false,
	stretching:"uniform",
	title:"hello world",
});

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

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

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

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

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

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

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

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

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

5. Работа с playlist.

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

jwplayer("player").setup({
	width:"640",
	height:"480",
	listbar: {
		position:'bottom',//right
		size:150
	},
	playlist: [
			{
				file:"files/video.mp4",
				title:"hello world",
				image:"files/pic.jpg",
				description:"dsf sdjfhv sdjfhsdj fhsd vsdfj",
			},

			{
				file:"files/video1.mp4",
				title:"Second video",
				image:"files/pic1.jpg"
			},

			{
				file:"files/video2.mp4",
				title:" next video",
				image:"files/pic2.jpg"
			},

			{
				file:"files/1.mp3",
				title:"Music",
				image:"files/pic1.jpg"
			}

	]

});

Обратите внимание, что за отображение плейлиста отвечает параметр 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: [
		{

			title:"Sources",
			image:"files/pic2.jpg",
			description:"dsf sdjfhv sdjfhsdj fhsd vsdfj",
			sources : [

				{
					file:"files/video.mp4",
					label:"360p",
					title:"hello world",
					image:"files/pic.jpg",
				},
				{
					file:"files/video1.mp4",
					label:"780p",
					title:"second video",
					image:"files/pic2.jpg",
					default:true
				}

			]
		}

	]

});

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

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

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

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

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

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

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

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

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

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

WEBVTT

00:00:05 --> 00:00:08
<b>hello world I am subtitle</b>

00:00:10 --> 00:00:12
<b>erdefsd</b><font color="#3333CC"> fsdf sd</font> fsd fsd fsd f

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

jwplayer("player").setup({
	file:"files/video.mp4",
	image:"files/pic.jpg",
	tracks: [
					{
						file:"files/sub.vtt",
						label:"English"
					},
					{
						file:"files/sub.vtt",
						label:"Russian",
            					default:true
					}
			]
});

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

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

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

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

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

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

WEBVTT

00:00 --> 00:05
0_0.jpg

00:05 --> 00:10
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» . Теперь давайте посмотрим, что у нас получилось:

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

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

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

function add_volume() {
	var volume = jwplayer('player').getVolume();

	if(volume < 100) {
		volume = volume + 10;
	}
	jwplayer('player').setVolume(volume);
}

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

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

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

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

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

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

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

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (57)

  1. Lif

    Спасибо за информативный материал,но уменя возник вопрос:можно ли в плеер вставить сылку на видео взятую с другова jwpleera? для примера:(http://img.mail.ru/r/video2/player_v2.swf?movieSrc=mail/ehelt/_myvideo/5553)эту сылку не аткрывает. или для этого нужно какие еше дополнения?

    • Виктор Гавриленко

      Пожалуйста! Если нужно добавить видео с стороннего сервиса, то это можно сделать только с канала youtube

  2. Ольга

    Спасибо! очень просто и понятно))

  3. Николай

    как сделать чтоб следущее видео автоматически не проигровалось

  4. Сергей

    Спасибо за статью, Виктор! Подскажите, как сделать «резиновыми» размеры плеера для корректного отображения при изменении размеров окна браузера? Чтобы он не «вылазил» из позиции модуля, например, в Joomla?

    • Виктор Гавриленко

      Ну, для этих целей можно использовать javaScript, то есть получить ширину и высоту экрана пользователя, а затем зная эти данные, указать соответствующие размеры для плеера. Чтобы узнать ширину экрана можно использовать, инструкцию screen.width, для высоты — screen.height. Данные инструкции вернут Вам соответственно размеры экрана пользователя.

  5. Сергей

    Большое спасибо за урок, вот только видео с youtube в плейлисте не проигрывается
    {
    file: «http://www.youtube.com/watch?v=MUe0Uh10GPc»,
    title:»Старт»,
    image:»jwplayer/files/pic1.jpg»,
    description:»Друзья»
    },

    • Виктор Гавриленко

      Пожалуйста! Видео с youtube проигрывается в плейлисте, с одним условием, если первый элемент, в списке — это собственно видео с youtube. Кстати а Ваша ссылка на видео вообще не рабочая.

      • Сергей

        Спасибо за уточнение, ссылка была приведена для примера. Но заработала следующая конструкция
        {
        image: «jwplayer/files/pic1.jpg»,
        sources:
        [
        { file: "http://youtu.be/Jpdzjg1kh0I" }
        ],
        title: «Кто быстрее?»,
        description: «Мультфильм»
        },

        Имеет ли она право на жизнь?
        Ссылка рабочая :)

  6. Виолетта

    Виктор, все подробно, только в моем файле index.php нет тегов и вообще! Я новичок и очень сложно это. И где она вообще должна находиться?

    • Виктор Гавриленко

      Здравствуйте, Виолетта!
      Если в Вашем файле index.php нет html-тегов, значит сайт создан на основе готовой системы управления контентом, и весь шаблон сайта(внещний вид), содержится в одной из папок. В этой папке как раз и собраны файлы содержащие html теги. Вам нужно отыскать данную папку и уже с ней работать. К примеру если сайт реализован на WordPress, то его шаблон лежит в папке: /wp-content/themes/название темы.

  7. Виолетта

    Виктор, они в папке header.php. Но проблема в том, что когда вставляю между тегами head, то плеер отображается перед шапкой сайта. Даже если все коды я поставлю после тега body, получается то же самое. С комментариями от ВКонтакте та же петрушка. Как можно это исправить?

    • Виктор Гавриленко

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

  8. Алексей

    Добрый день!

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

    Согласно вашему описанию — все заработало, но в файле script.js мы уже описываем всего лишь ОДИН файл. В нем бы хорошо оставить настройки плеера, глобальные.

    А как сделать, чтобы в теге div указывать на разные файлы?

    Спасибо!

    • Виктор Гавриленко

      Здравствуйте!
      Данную проблему можно решить используя переменную в которой будет храниться имя видео файла, который нужно отображать на определенной странице. То есть вместо пути к видео файлу — пишите имя переменной в которой, собственно, и содержится путь к данному файлу.

  9. Павел

    Привет, виктор. я чайник. пытаюсь сделать сайт во frontpag 2003. прописал код как в примере. при просмотре на месте плеера появляется чёрное окно с надписью «error loading player. offline playback not supported». пытался повторно скачивать плеер, перепроверял код — не работает((( help!!!

    • Дмитрий

      Подскажите выскакивает такая ошибка, когда пытаюсь вставить видео с ютуба error loading player offline playback not supported

  10. Вадим

    Здравствуйте, Виктор. Мы своими силами сделали сайт bratetslis.ru и хотели поставить туда видеоплеер, руководствуясь Вашей инструкцией, но сколько ни старались — абсолютно ни чего не выходит. Не могли бы В хотя бы вскользь ознакомиться с кодом и дать какие-нибудь поправки и рекомендации?

    • Андрей Кудлай

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

      • Вадим

        В какой именно теме это лучше сделать?

        • Андрей Кудлай

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

    • Виолетта

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

  11. Lata

    Здравствуйте! Вопрос по данному плееру такой. Как изменить его внешний вид, чтобы можно было проигрывать короткие аудио-файлы (слова, фразы) для сайта по изучению английского языка, где картинкой служит просто треугольничек? Пример: ru.forvo.com

  12. Степан

    Спасибо большое, статья действительно полезная, Установил плеер все отлично работает

  13. Александр

    Подскажите, а как расположить несколько проигрывателей на странице в два и более рядов по горизонтали? Ни как не выходит — идут одной сплошной линией по вертикали. Пробовал заключать каждый ряд в отдельный div с заданной шириной и высотой — бесполезно :( .

    • Андрей Кудлай

      Укажите для div’а с отдельным плеером свойство float:left;

      • Александр

        Что-то не выходит. А можно пример для квадрата 2х2 из 4-х плейеров?

        • Андрей Кудлай

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

          • Александр

            #myElement1,#myElement2,#myElement3,#myElement4 {
            width: 425px;
            height: 344px;
            background: #FFFFFF;
            border: 1px solid #dadada;
            padding: 8px;
            margin: 5px 15px 10px 0px;
            }

            Загружается проигрыватель... Загружается проигрыватель...

            Загружается проигрыватель... Загружается проигрыватель...

            Что ещё неприятно — без   или после блока div последующий плейер наезжает на предыдущий :( .

          • Андрей Кудлай

            1. Я здесь не увидел совсем свойства float, о котором писал выше.
            2. Я говорил о том, что вопросы, касающиеся кода, проще решать на форуме и просил перенести общение туда.

  14. Александр

    А что здесь можно увидеть, если некорректно работает тег code — всё вырезано. Но я ваш намёк понял — прощайте.

    • Андрей Кудлай

      Именно потому я и говорил о переносе общения на форум.
      Всего доброго.

  15. Napster

    здравствуйте у меня такой вопрос есть сайт где хранятся видео клипы и туда пользователи загружают клипы типа как файлообменник . Можно как то сделать чтобы плеер показывал скриншот именно того клипа который проигрывается вместо картинки как вы указали в вашем коде ? (для конвектирование видео используем прогу FFmpeg) И второй вопрос можно сделать чтобы клип проигрывал клипы поочередно на этом плеере? сделать как бы кнопку для включения чтобы проигрывался и тд. если да помогите пожалуйста .

  16. I'm a NOoB!!

    я ниче понять не могу почему у меня ничего не работает!!!

    голова

    тело
    player

    точто в скрипте
    jwplayer(«player»).setup({

    file:»files/pristali.mp4″,
    image:»files/13.jpg»

    )};

    что ни так то!?

    • Виктор Гавриленко

      Здравствуйте!
      Посмотрите, правильно ли прописаны пути для подключаемых файлов. Так же посмотрите при помощи консоли ошибки JavaScript.
      Если не получится, то создайте тему в соответствующем разделе нашего форума — технические вопросы решаются именно там.

      • I'm a NOoB!!

        все было правильно прописано! я просматривал код элемента все водключено! единственное я на хостинг не выкладывл!

        • Виктор Гавриленко

          На локальном компьютере также должно работать. Сложно сказать почему не работает не видя кода. А ошибки смотрели?

  17. однако

    Здравствуйте.
    Как начать произведение видео с определённого времени, а не сначала?

    • Виктор Гавриленко

      Здравствуйте!
      Если Вы имеете ввиду автоматическое воспроизведение после загрузки плеера (странички), причем с определенного момента видео, то возможно данный функционал можно реализовать используя API данного плеера, я еще не сталкивался с данной задачей, поэтому точно сказать не могу, думаю данная страница Вам поможет: http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference

      • однако

        К сожалению, я в этом совсем не разбираюсь.
        Поэтому и возник вопрос о настройках плеера.
        Есть видеофильм.
        В нем несколько глав.
        И нужно дать ссылки на это видео, но с различными параметрами воспроизведения по времени.
        Один с начала, другой с 10 минуты, следующая ссылка с другого времени воспроизведения.
        Чтобы не разрезать видео на части.

        • Виктор Гавриленко

          На мой взгляд, все же лучше разбить фильм на части, и пользователям выкладывать ссылки именно на отдельные части фильма. Но если же Вы хотите реализовать задуманное, то что бы воспроизвести видео, скажем начиная с 20 секунды. То необходимо после описания всех параметров плеера, добавить следующую строку: jwplayer(‘player’).seek(20);
          Тем самым видео начнет воспроизводиться именно с 20 секунды. Передавая нужное время(в секундах) методу seek(), Вы сообщаете с какого момента начинать воспроизведение.
          Дальше Вам необходимо просто решить вопрос с ссылками на разные части Вашего фильма. Но скорее всего придется создать страницу обработчик, в которую Вы будете передавать нужное время воспроизведения.
          Если же будут еще вопросы, то предлагаю наше общение перенести на форум, так как технические вопросы удобнее решать именно там.

  18. Vlad

    Скачал с Вашего сайта файл исходников. А субтитры не отображаются. В чём причина?
    Спасибо

    • Виктор Гавриленко

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

      • Vlad

        Что-то не получатся все показывает и картинка, и видео, и панель с субтитрами, а их нет , только маленькая чёрная полоска.
        Путь к файлам прописан правильно, а субтитров нет. В полно экранном режиме тоже.
        Может где ошибка? Подскажите, пожалуйста.

        • Андрей Кудлай

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

  19. Юра

    Большущее спасибо, потратил 4 дня и 3 ночи, но только здесь нашёл. СПАСИБО!

  20. Мукасей

    Всё правильно и подробно, но сейчас можно вставлять видео без всяких плееров и гораздо проще. youtube.com/user/mukasei361

  21. Denis

    Как с вами связаться? Хочу получить консультацию, что мне лучше установить..есть требования, плеер должен поддерживать ADS для рекламы

  22. МАРИНА

    Мне нужен аудио плеер. Подскажите мои действия.

  23. Андрей

    Хороший урок и хороший плеер, только вот для бесплатной версии ограничение в 10 тыс просмотров в месяц, а в вашей статье не чего не сказано об этом ограничении или я что то не правильно делаю?

    • Виктор Гавриленко

      Здравствуйте, Андрей!
      Насколько я помню в то время когда записывался данный урок, таких ограничений не было. Как Вы видите, сейчас кликая по кнопке Get Started, сразу же перенаправляет на страницу выбора тарифного плана использования плеера. То есть скорее всего были введены изменения разработчиками.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree