Отдельная HTML — страница для рекламы какого-либо партнерского продукта будет более интересной, если на ней размещается видео.

playerJW

Самый простой способ вставить видео на сайт – это загрузить видеоролик на YouTube. Затем вставить код видеоролика на страницу вашего сайта. В этом случае видео будет просматриваться со ссылкой на YouTube, c логотипом YouTube, с рекламой, которая появляется над полосой проигрывания, а в конце воспроизведения видео, получить ссылки на сторонние ролики, которые уведут от темы публикации.

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

Рассмотрим установку одного из самых популярных — видео плеера JW Player.

JW Player поддерживает все наиболее известные видеоформаты: flv, mp4, аудио mp3, aac. Имеется возможность проигрывать ролики, вставляя ссылку с  канала youtube. При воспроизведении видео с YouYube  видео окно не захламляется атрибутами данного хостинга.

Установка плеера JW Player

1.    Скачать плеер с официального сайта разработчика.

http://www.jwplayer.com/about-jwplayer/

site

Переходим по ссылке TRY JW PLAYER FOR FREE

site1

 

Регистрируемся. Активируем аккаунт. Входим в свой аккаунт и скачиваем плеер по ссылке Get Your Player.

Скачиваем архив по ссылке Dowload Self-Hosted Player.

sire2

Результаты скачивания —  архив jwplayer-6.9.zip

Из этого архива нам потребуется всего три файла:

jwplayer.flash.swf

jwplayer.html5.js

jwplayer.js

Создаем на нашем хостинге в корневой папке домена папку. Например, с именем  js.

papka

Загружаем в папку js файлы

jwplayer.flash.swf

jwplayer.html5.js

jwplayer.js

Плеер на странице сайта мы будем показывать при помощи java-script-кода.  Для этого создаем отдельный файл script.js . Это файл с кодом для запуска плеера.

Файл script.js создадим с помощью программы Notepad++

Для начала можно создать пустой файл и сохранить его со следующими параметрами:

Имя файла – script

Тип файла – JavaScript file (*.js)

Кодировка – UTF-8

Загрузить созданный файл на хостинг в папку js.

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

1.    Подключаем файл jwplayer.js  к нашей странице. —

В файле index.html  между тегами <head> добавить следующий код:

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

2.    Создаем на странице пустой контейнер (блок), в котором будет отображаться данный плеер. Выбираем на нашей странице место, где мы хотим отобразить видеоплеер. Данному блоку обязательно присваиваем идентификатор, то есть добавляем атрибут id=”player”. В нужном месте web – страницы добавить блок, в который будет выведен плеер:

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

Данный блок с идентификатором player. Внутри блока можно написать любой текст. Например, For player.

Под этим блоком пишем код для запуска плеера:

 

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

Весь блок будет выглядеть так:

<div align="center">

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

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

  </div>

 

3.    Открываем файл script.js  и пишем следующий код:

 

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

В методе setup даем описание всем настройкам для нашего плеера:

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

image – путь к изображению (заставка для видео). Нужно заранее подготовить картинку, которая будет отображаться как заставка. Изображение нужно загрузить на хостинг.

Когда видео еще не начинает проигрываться, то вместо черного экрана должна отображаться какая-то картинка – заставка для нашего видео. В нашем случае в папку images загружено изображение igrushka1.jpg.

Настройки, отвечающие за размеры видеоплеера:

width:"600" – ширина

height:"338" – высота

Дополнительные настройки:

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

autostart:false –  определяем, будет или нет при загрузке страницы автоматически воспроизводится видео.

mute:false – если установим true, то при воспроизведении видео будет отключен звук.

stretching:"uniform" – эта настройка отвечает за масштабирование изображения.

uniform – пропорциональное масштабирование видео в окне плеера.

Плеер содержит большой набор различных функций. Подробное описание вы можете найти в официальной документации по адресу:

http://support.jwplayer.com/customer/portal/articles/1403727-what-is-jw-player-

Пример моей страницы с установленным JW Player:

http://art.lady-partner.ru/

Можно посмотреть похожие записи:

  • Нет похожих записей

Оставить комментарий

Страница 1 из 11