|
| ||||||
|
Просмотр видео на 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. Установка на сайтПримечание: для корректной работы фловплеера на компьютере должен быть установлен Флеш-плеер. Самую последнюю версию Флеш-плеера можно скачать на сайте Установить плеер на сайт не сложно, тем более, что я объясню этот процесс и распишу пошагово. 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. На следующую >>> | |||||
| ||||||