Установка splash image для FlowPlayer
Введение
В данной статье описываются настройки FlowPlayer’а позволяющие не активировать плеер, пока пользователь не нажмет на изображение, которое выступает в роли заставки. Нажмите на картинку ниже чтобы увидеть, как работает плеер с картинкой-заставкой (splash image).
Преимущества
Такой способ обладает несколькими преимуществами:
- Ваши страницы загружаются быстрее. Флэш компоненты требуют вычислительной мощности компьютера пользователя, когда они инициализируются. Изображения намного быстрее, ведь браузеры более оптимизированы для работы с изображениями.
- Вместо видео вы можете поставить обложку для вашего видео. Поисковые системы понимают их лучше, ведь они научились индексировать картинки. И позволяет поставить описание в дег ALT у вашего изображения-заставки (IMG).
- Вы можете установить неограниченное число проигрывателей на одной странице без потери производительности.
- Вы можете добавить к видео изображение высокого качества, прежде чем пользователь просмотрит видео.
Для большого количества видео вы можете использовать FFMPEG (если он имеется на вашем хостинге), чтобы захватить изображения с видео файлов без монотонной ручной работы.
Установка контейнера для плеера
Этот процесс аналогичен описанному в статье «Основы установки FlowPlayer» с одним, но важным отличием: HTML код, помещенный в контейнер, выглядит следующим образом:
<!-- Этот код такой же, как и в статье "Основы установки FlowPlayer" -->
<a href="http://download.g63.ru/flowplayer/flowplayer-700.flv" id="player"
style="display:block;width:425px;height:300px">
<!-- Это код, который отвечает за вывод splash image -->
<img src="flow_eye.jpg" alt="Описание дружественное для поисковиков">
</a>Эта техника называется «splash image» (картинка-заставка). Этот термин немного вводит в заблуждение, потому что вы можете разместить любой HTML внутри контейнера, а не только IMG тег. Вы можете также использовать собственное фоновое изображение на CSS (background-image) для контейнера. Это дает Вам мощные возможности в оформление FlowPlayer’а.
Так же Вы можете посмотреть рабочий пример на отдельной демонстрационной странице.
Здравствуйте, уважаемый ! К сожалению не нашел вашего имени и обращаюсь к вам именно так. Судя по всему Вы большой специалист в области скриптов. Я же, увы, чайник. У меня такая проблема. Есть блог на WP, есть видео хостинг в iWowWe Туда можно практически безлемитно и бесплатно заливать видеоролики. Все они проигрываются в FP Я могу эти ролики вставлять в статью очень просто. Вот пример ролика. https://www.videocontrolpanel.net/viewer.aspx?url=http://d2ddaymx9x4dc2.cloudfront.net/178997/upload4202015213340585_.mp4 Я его сохраняю как Web сайт и потом открываю в Note++ и копирую на страницу блога как скрипт. Все замечательно, но он сразу начинает играть. Было бы отлично если бы я смог сделать так, чтобы как у вас было сказано- спокойно стояла бы картинка. а при назатии на нее начинал бы работать плеер. Не подскажете, как это сделать или где об этом почитать. Меня вот смущает слово «контейнер» Это что, содержание скрипта или как это понять ? Вообще есть где-нибудь материал по азбуке этого дела ?
Заранее благодарю за помощь
С наилучшими пожеланиями
Юрий Гончаров.
Добрый день!
В данном скрипте реализована проверка поддержки браузером Mp4 видео и если не поддерживается, то воспроизводится через FlowPlayer.
Вот там условие есть if (useFlash) — в первой час всё что относится к FlowPlayer. Там надо редактировать скрипт согласно статьи и поставить autoPlay: false.
Во второй части условия надо действовать согласно HTML5 спецификации. Краткая документация с примерами можно почитать на htmlbook или w3scool. И главное, чтобы не воспроизводилось видео само — убрать autoplay.