Предварительно потренироваться можно с музыкальными MP3-плеерами (см. пост «Как сделать простой MP3-плеер в посте»)
В некоторых моих постах присутствуют такие простые видеоплееры:
Самое примечательное то, что ни видео, ни какой-либо другой файл загружать-перегружать-выгружать никуда не нужно. Расскажу «пошагово», как я это делаю, на примере плеера из поста с песней, которая будет представлять Украину — «To be Free». Очень подходящее название, «Быть свободным!» А мне будет очень приятно, если вы научитесь это делать: это совершенно не сложно, и я старался писать максимально подробно.
По большому счету, почти всё видео можно найти на YouTube и вставить HTML-код оттуда. Например, на страничке с указанной песней копируем код из окошка слева, над которым написано HTML:
Этот код нужно вставить в новый пост в простом редакторе или в расширенный (при включенной кнопке «Источник»).
Но в этом посте мы рассматриваем конструкцию автономного плеера. Сразу скажу, для вставки на Ли.ру подойдёт два вида кодов:
ВВ-код видео (вставляется в простом или расширенном редакторе, можно использовать на некоторых форумах)
[flash=480,290,http://poet.inf.ua/media/mediaplayer.swf?stretching=uniform&file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv&image=http://www.segodnya.ua/img/forall/a/141240/10.jpg]
HTML-код видео (вставляется на ваш сайт или на Ли.ру — в простом редакторе или расширенном редакторе при включенном «Источнике»)
Начинаем составлять ВВ-код для своего дневника
Его можно использовать в постах и эпиграфе. В комментариях с недавних пор появляется только «ссылка на flash-объект».
Итак, код состоит из нескольких частей:
[flash=480,290,
http://poet.inf.ua/media/mediaplayer.swf?
stretching=uniform&
file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv&
image=http://www.segodnya.ua/img/forall/a/141240/10.jpg]
Рассмотрим те, которые будем менять:
flash=480,290, — идентификатор объекта, флеш с размерами окна 480 на 290 пикселей
http://poet.inf.ua/media/mediaplayer.swf — адрес видеоплеера (в данном случае размещен на сайте poet.inf.ua, но вы можете скачать себе и загрузить на сайт или в пост — об этом подробно рассказано в посте про MP3-плеер)
file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv — адрес видеофайла формата FLV (самое сложное, его будем «добывать» ниже)
image=http://www.segodnya.ua/img/forall/a/141240/10.jpg — адрес изображения-заставки, которое показывается при выключенном воспроизведении видео (может быть кадром фильма или сторонней картинкой)
С адресом видеоплеера, надеюсь, вы разобрались: можете загрузить себе или не менять его.
Адрес изображения-заставки
Я нашел подходящую картинку на сайте «Сегодня», кликнул на ней правой кнопкой мыши и скопировал адрес изображения:
Вставляем адрес изображения в код:
[flash=480,290,http://poet.inf.ua/media/mediaplayer.swf?stretching=uniform&file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv&image=http://www.segodnya.ua/img/forall/a/141240/10.jpg]
Адрес видеофайла
Здесь прочитайте внимательно: ничего сложного нет, но первый раз что-то может показаться непонятным. Описанный ниже «фокус» проходит на подавляющем большинстве сайтов, но не на всех.
На том же сайте «Сегодня» нашей жертвой станет и видеоклип.
Замечаем, что сразу над окном видео есть текст «Студии Савика Шустера», запоминаем его, а лучше – копируем.
Кликаем правой кнопкой мыши на странице (не на видео!) и выбираем «Исходный код» (так в Opera, а в других браузерах пункт меню называется немного иначе). Намного проще нажать комбинацию клавиш CTRL и U.
В открывшемся окне с HTML-кодом страницы нужно найти текст со страницы: «Студии Савика Шустера». Проще всего это сделать так: нажимаем CTRL+F (поиск), вставляем скопированный текст — CTRL+V и нажимаем ENTER до тех пор, пока не найдем данный текст с идущим следом «волшебным словом» EMBED.
В данном случае, нас интересует адрес, заканчивающийся на расширение FLV:
embedFlash('/user/swf/video_player.swf', 'flv_file=/files/articles/141240/32/Alyosha - To_be_free Eurovision_Ukraine_2010.flv&jpg_file=/img/forall/a/141240/32.jpg', '1267433853', '100%','350', 90)
Адрес этот пока без «начала», он указывает относительный путь из корневой папки сайта… Короче, не запоминайте! :) Просто перед ним допишите полный адрес сайта, на котором храниться видеофайл (в нашем случае — segodnya.ua):
http://www.segodnya.ua/files/articles/141240/32/Alyosha — To_be_free Eurovision_Ukraine_2010.flv
Внимание!!! В адресе файла не должно быть пробелов!!!
А пробелы в нашем примере таки есть (дело в том, что на сайте код входит в состав java-скрипта, а нам нужен HTML-код). Но это не есть проблема! Вместо пробелов вставляем такую комбинацию символов — %20 — и получаем обновленный адрес (подробнее о кодировке):
http://www.segodnya.ua/files/articles/141240/32/Alyosha%20—%20To_be_free%20Eurovision_Ukraine_2010.flv
Кстати, по именно этой ссылке видеофайл можно скачать.
Этот адрес файла вставляем в наш ВВ-код:
[flash=480,290,http://poet.inf.ua/media/mediaplayer.swf?stretching=uniform&file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv&image=http://www.segodnya.ua/img/forall/a/141240/10.jpg]
Ну? И чего вы ждете? Код видеоплеера уже готов!
Если сами не сможете сделать HTML-код, я вам намекну:
«http://poet.inf.ua/media/mediaplayer.swf » width=»480″ height=»290″ type=»application/x-shockwave-flash» allowscriptaccess=»always» allowfullscreen=»true» flashvars=»stretching=uniform&file=http://www.segodnya.ua/files/articles/141240/32/Alyosha%20-%20To_be_free%20Eurovision_Ukraine_2010.flv&image=http://www.segodnya.ua/img/forall/a/141240/10.jpg» bgcolor=»#ffffff» wmode=»opaque» />
Спасибо за внимание и успехов!