Loading





Форекс с Альпари

eTXT




Анкетка


Просмотр видео на web-странице с помощью фловплеера

Информация, представленная в этой статье ориентирована в первую очередь для начинающих web-мастеров.


На двух страницах.  Страница 1.  На следующую >>>

Возвращаясь к теме «Видео на web-странице», рассмотрим вариант воспроизведения видеофайлов с помощью flowplayer.

Фловплеер - бесплатный, красивый, минималистичный, но полнофункциональный видео плеер.

Flowplayer - это плеер для Web. Он позволяет осуществить просмотр видео непосредственно со страницы вашего сайта. Файл видео в этом случае загружен на ваш хостинг, поэтому он не будет кем-то, когда-то, удален не вовремя, как в случае с размещёнными на сайте видеороликами сервисов YouTube, Rutube и т.д. При работе с flowplayer все файлы плеера и видео - ваши навсегда, и только Вы можете ими распоряжаться по своему усмотрению.

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

Поддерживает форматы .flv, .swf, .mp3, .mp4, .avc, .jpg и .png.

На официальном сайте фловплеера //flowplayer.org, Вы можете заметить, что есть три варианта комплектации (если можно так сказать) - Minimalist, Functional и Playful. Сейчас мы рассматриваем первый вариант, поэтому в комплектации Minimalist присутствует минимум-миниморум функций и регулировок. Далее мы рассмотрим и другие варианты, а пока смотрите демо-пример работы Flowplayer-Minimalist.


Установка на сайт

Примечание: для корректной работы фловплеера на компьютере должен быть установлен Флеш-плеер. Самую последнюю версию Флеш-плеера можно скачать на сайте
//get.adobe.com/ru/flashplayer/

Установить плеер на сайт не сложно, тем более, что я объясню этот процесс и распишу пошагово.

1. После скачивания, распаковать архив в папку на компьютере. В папке flow находятся папки js и video, а также файлы плеера flowplayer-3.2.7.swf, flowplayer.controls-3.2.5.swf и HTML- файл.

2. Задача состоит в том, чтобы правильным образом закачать всё это на сервер своего сайта. Содержимое папки js закачиваем в одноименную папку в корне сайта. Таким же образом закачиваем содержимое папки video. (Видео внутри папки, в формате .mp4, можете заменить на свой вариант).

3. Два файла flowplayer-3.2.7.swf и flowplayer.controls-3.2.5.swf закачать в корневую папку сайта. Так будет удобнее для их дальнейшего использования.

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

   

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<title>Minimal Flowplayer setup</title>
<script type="text/javascript" 
src="/js/flowplayer-3.2.6.min.js"></script>	
</head>
<body>
<h1>flowplayer</h1>
<a href="/video/demoflow.mp4" 
style="display: block; width: 626px; height: 367px" id="player"></a> 
<script language="JavaScript">
flowplayer("player", "/flowplayer-3.2.7.swf");</script>	
</body>
</html>

          Подключение ява-скрипта. Скопируйте код, отмеченный маркером и вставьте в раздел head.

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


5. В последнем скопированном и вставленном коде доступны минимум изменений и регулировок:

 
<a href="/video/demoflow.mp4" 
style="display: block; width: 626px; height: 367px" id="player"></a> 
<script language="JavaScript">
flowplayer("player", "/flowplayer-3.2.7.swf");</script>	

          Путь к видеофайлу в коде плеера.

          Размеры плеера - ширина и высота. Выставляйте по своему усмотрению.

          Указание пути к файлу плеера. В нашем случае он подключается из корня сайта, о чём говорит символ слэш (/).

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


На двух страницах.  Конец страницы 1.  На следующую >>>


Работа в интернете с текстами




Ваш комментарий







  © 2015–2018  https://leonidmuzyka.com/  L.M. Служба поддержки RSS подписка подписка