TarantinovFLV2
| TarantinovFLV228.09.2010 (последний раз редактировалось 21.11.2010) сайт: tarantinov условия использования: бесплатно
|
Что нового в данной версии плеера:
1) В первой версии плеера не было отображения хода загрузки, пользователь не понимал плеер грузит видео или что-то пошло не так. Серьёзный косяк, согласен, исправил и нарисовал по своему ибо надоело однообразие.
2) Более адекватная полоса перемотки видео с указанием позиции и времени видео в активном режиме, убрал не прицельный ползунок и добавил индикатор загрузки буфера при воспроизведении локальных и внешних видео фалов. По такому же принципу работает регулировка звука.
3) Пропорциональное масштабирование видеофрейма. В первой версии мне показалось клёвым - растягивать видео по периметру экрана монитора. Совершенно не подумав о том, что у всех он разный. Ну, первый блин - ком. Потом планировал сделать кнопку выбора режима по периметру или пропорционально. Знающие люди сказали что куча кнопок в панели плеера нехорошо и самое мудрое сделать пропорциональное масштабирование и на этом не мучать фрейм и юзеров. Далее, сглаживание видео и превью оставил с первой версии за этим косяков нет, только плюсы. Добавлено трансформирование панели, что позволяет уменьшать плеер до размеров баннера, в отличии от фиксированных минимальных размеров плеера в первой версии. Возможность установки и позиционирования своего логотипа.
4) Конечно же самое главное отличие плеера от первой версии это поддержка RTMP, благодаря которой смотреть видео стало возможным с любой позиции не дожидаясь полной загрузки буфера. Ещё одно значительное новшество, это добовление к нему новых возможностей, типа плагины, которые я собираюсь писать по итогам работы данного плеера. Теперь скачать видео традиционные софт граберы не могут. Только в режиме локального воспроизведения файов, тут уж никуда не деться - буфер.
Пример RTMP - воспроизведения
Пример локального воспроизведения файла с буферизацией.
Пример воспроизведения ролика с YouTube.
Пример работы плейлиста. Предыдущие примеры объединены в плейлист
Установка плеера:
Для установки плеера на сайт нужно:
1) Создать директорию (папку) для плеера и закачать в неё все файлы плеера
2) Относительно этой директории подключить в заголовок документа (страницы) TrSwfObj.js
3) Настроить файл конфигурации config.hs который находится в директории с плеером.
Пример установки:
Подключаем в заголовок <head>...</head> TrSwfObj.js
<head>
..........
<script type="text/javascript" src="путь к директории плеера/TrSwfObj.js"></script>
..........
</head>
Устанавливаем плеер в нужное место контента страницы <body>...</body>
<body>
...........
<script type="text/javascript">
var swf = new swfObj("путь к директории плеера/TarantinovFLV2.swf",700,300,"flvp");
swf.param("quality", "high");
swf.param("allowFullScreen","true");
swf.flashVar("vid","constantine.flv");
swf.flashVar("prev","/constantine.jpg");
swf.add();
</script>
...........
</body>
JavaScript-класс TrSwfObj
Ничего сверх навороченного я в него не писал, за исключением передачи переменных FlashVars.
Так как в обычном готовом классе SWFObject передать в переменную FlashVars URL адрес например video=http://www.site.ru/index.php?category=comedy&id=7854, будет проблемотично. Так как в данном примере "&id=" или если даже "&id=" будет передоваться как переменная Flash.
В моём классе параметр FlashVars будет передавать данный URL так, video=http://www.site.ru/index.php?category=comedyamp;id=7854. Тоесть "&id=" станет "amp;id=" и Flash переменная "video" передастся целиком ActionScript в TarantinovFLV2.swf и "amp;" понимается как "&" для URL. Так что этот лёгкий класс можно использовать для вставки swf файлов на страницу. Обработка переменной "amp;" для ActionScript очень проста для этого можно сделать аналог функции str_replace() в PHP:
function str_replace(searchfor, replacement, holder){
temparray = holder.split(searchfor);
holder = temparray.join(replacement);
return (holder);
};
var MyURLVar = str_replace("amp;", "&", MyURLVar);
SWF
Создаём swf объект на странице
var swf = new swfObj("путь к плееру", "ширина", "высота", "id/name для JavaScript");
Перечисляем параметры для swf
swf.param("имя параметра", "значение");
Перечисляем переменные FlashVars
swf.flashVar("имя переменной","значение");
Выводим swf
swf.add();
Для JavaScript
swf.obj(); возвращает элемент подобно document.getElementById("id плера")
Итак сами переменные для плеера:
vid - путь к файлу воспроизведения для RTMP или локального воспроизведения.
prev - путь к превью для видео .jpg, .gif, .png
conn - используется при необходимости воспроизводить файлы в двух режимах, об этом ниже.
Файл config.hs, настройка плеера
Вданном файле описывается в каком режиме будет работать плеер, какой логотип ему отображать и где, прятать ли его при просмотре видео итд.
Файл содержит в себе специальные теги со значениями. Теги разбиты на 2-ве группы, переменные <vars>...</vars> и плагины (дополнения) <plugins>...</plugins>.
По результатам работы плеера и надеюсь Ваших откликов я буду исправлять недоработки и создавать новые интересные дополнения к плееру ( <plugins> ). Пока же рассмотрим необходимые для работы плеера параметры <vars>...</vars>:
<vars>
<rtmp> rtmp://адрес канала</rtmp>
<LogoFile> logo.png </LogoFile>
<logoPos> RT </logoPos>
<logoHidden> Y </logoHidden>
<BufferTime> 15 </BufferTime>
<HiddenPanel> 5 </HiddenPanel>
</vars>
<plugins>
<plugin> apiYouTube </plugin>
</plugins>
<rtmp> - Задаёт RTMP адрес канала. Если планируется только обычное ( локальное ) воспроизведение FLV/MP4 то тег оставляется пустым
<LogoFile> - Задаёт логотип для плеера .gif, .jpg, .png и .swf. Логотип должен находиться в директории плеера размеры лого на усмотрение пользователя.
<logoPos> - Позиция логотипа. По умолчанию RT тоесть право-верх ( Right-Top ), RB - право-низ, LT - лево-верх и LB - лево-низ.
<logoHidden> - Прятать ли логотип во время просмотра видео вместе с панелью. Y - да, N - нет.
<BufferTime> - Время буферизации в сек. Используется только для режима локального воспроизведения, когда файл FLV загружается в буфер.
<HiddenPanel> - Время скрытия панели контроля воспроизвеления в сек. Если 0, то панель присудствует всегда, по умолчанию 5 сек.
<plugins> - здесь перечисляются плагины, загруженные в папку plugins
Работа плеера в двух режимах
Если в config.hs уже установлен режим RTMP но так же необходимо воспроизводить локальные файлы то, необходимо добавить в код вставки плеера на страницу строку
swf.flashVar("conn","local");
таким образом файл FLV будет воспроизводиться локально
<script type="text/javascript">
var swf = new swfObj("путь к директории плеера/TarantinovFLV2.swf",700,300,"flvp");
swf.param("quality", "high");
swf.param("allowFullScreen","true");
swf.flashVar("conn","local");
swf.flashVar("vid","constantine.flv");
swf.flashVar("prev","/constantine.jpg");
swf.add();
</script>
Переменная "vid" также способна переключать режимы плеера если указывается конкретный протокол, например HTTP или RTMP.
Плеер сразу включится в режим воспроизведения указанного протокола не принимая во внимание установленных переменных "rtmp" и "conn".
swf.flashVar("vid","http://webi.ru/js/tarantinov/1.flv");
или же выбор RTMP канала
swf.flashVar("vid","rtmp://www.webi.ru/1.flv");
Плейлист
Подгружается плейлист следующей командой
swf.flashVar("pListLoad", "Путь к файлу плейлиста");
Файл плейлиста имеет такую структуру (обязательно в юникоде)
<playlist>
<element>
<title>Заголовок видео</title>
<desc>Краткий текст описания</desc>
<prev>Путь к картинке превью на сервере</prev>
<link>Путь к видео файлу</link>
<playlist>Путь к загрузке нового плейлиста</playlist>
</element>
<element>
<title>Заголовок видео</title>
<desc>Краткий текст описания</desc>
<prev>Путь к картинке превью на сервере</prev>
<link>Путь к видео файлу</link>
<playlist>Путь к загрузке нового плейлиста</playlist>
</element>
<element>
<title>Заголовок видео</title>
<desc>Краткий текст описания</desc>
<prev>Путь к картинке превью на сервере</prev>
<link>Путь к видео файлу</link>
<playlist>Путь к загрузке нового плейлиста</playlist>
</element>
</playlist>
Работа с плагином apiYouTube
С помощью этого плагина можно воспроизводить ролики из youtube через api.
1) Скачивайте архив с плагином apiYouTube и распаковывайте содержимое архива в папку "plugins" в директории Вашего плеера. Если её нет то создайте.
2) Откройте файл конфигурации config.hs и пропишите плагин
<plugins>
<plugin> apiYouTube </plugin>
</plugins>
3) Пропишите воспроизведение нужного видео с YouTube в переменную "vid"
swf.flashVar("vid","http://www.youtube.com/watch?v=O6ExAru7s58");
переменную "prev" для превью устанавливать ненужно. Превью устанавливает YouTubeAPI
Комментарии
RSS комментарии
28.09.2010 серый
если этим плеером можно показывать видео с чужих сайтов, может подскажите, как с youtube ролики втыкать? чтобы показывать видео на своем сайте, а реально ролики на youtube.
29.09.2010 Михаил
серый Сам по себе он этого сделать несможет разуеется))
Но тем немение http://www.tarantinov.ru/portfolio/detail.php?ID=7
30.09.2010 Иван
А я вот почитал про JW Player 5 и что-то не понял, а если есть JW Player 5, то зачем еще что-то изобретать, зачем нужен этот плеер?
Мне кто-то может подсказать, чем этот плеер лучше, чем JW Player 5?
В JW Player 5 есть и поддержка RTMP потока и mpeg4 и flv и картинки и mp3, еще есть встроенная поддержка Youtube, можно показывать ролики из Youtube.
01.10.2010 Михаил
Иван а Вы напишите в RuTube.ru зачем они создали свой сервис если есть YouTube и вообще почему у них плеер не JW Player 5 зачем они что-то изобретают.
Мне обсолютно всёравно что такое JW Player 5 и что он умеет. Не нужно их сравнивать. Никто не претендует на место JW Player 5. И никто не никому ничего не навязывает, пользуете JW Player 5 и хорошо. Я просто люблю создавать новое и интересное. Я не утверждаю что он лучше. Мой плеер ещё далеко не конечный вариант. Он будет ещё дополняться всякими интересными фишками.
Я только начал дружище!!!
01.10.2010 Иван
Михаил, ну посмотрим чего из этого выйдет.
11.10.2010 вебмастер
а как плейлистом пользоваться? не могу понять как его вызвать
16.10.2010 Михаил
В TarantinovFLV2 теперь рализова работа с YouTubeAPI
21.11.2010 админ
вебмастер, загрузил обновленную версию с плейлистом.
23.12.2010 Виктор
Подскажите! я сделал себе плеер на уподе! туда только вставляешь ссылку на видео и он работает! но ссылки летят и приходится по новой искать новую ссылку! как добиться стабильности ссылки и возможно ли это с вашим плеером??
25.12.2010 админ
Виктор, а при чем тут плеер?
кто то удаляет файл и естественно ссылка не работает.
как же это вы хотите сделать стабильными чужие ссылки?
29.12.2010 Виктор
Да в том то и дело что файл не удаляют! а просто ссылка видоизменяется!
29.12.2010 админ
Виктор, так ее специально видоизменяют, чтобы не использовали на других сайтах.
Ведь это нагрузка на сайт, кому же это нужно.
Поэтому ставят различные защиты, в том числе и ссылку меняют время от времени.
С этим ничего не сделаешь.
11.05.2011 tradearea
Извините, не понял:
если планируется показывать только ПРЯМОЕ видео с частных видеокамер? С возможной записью?
Что и куда прописывать - не понял.
Установил на страницу код, загрузил файлы в отдельную папку. Начал настройку.. и что писать?
И ещё вопрос: что надо писать, если надо будет на одной странице сайта подключать несколько видеокамер?
12.05.2011 tradearea
И какую ссылку надо писать на внутреннюю свою видео камеру?
07.12.2011 Вв
Неужели нельзя было адаптивную установку сделать
10.10.2012 Igor
Добрый День
А можно этот плеэр на флэше у приставке дюна 301 запустить?
04.11.2012 Вася
Я тупой по ходу.Слов написано много,но вот реализовать все это дело мозгов не хватает..Одно дело читать,другое дело "пощупать"все своими руками.Было бы не плохо если бы вы выложили под этой статьей рабочий исходник (со всеми файлами,сам плеер,плейлист,скрипты и т.д.)Работа плеера в двух режимах..
Спс.Буду ждать исходника.
04.11.2012 Вася
Да забыл пояснить в предыдущем сообщении.Исходник который можно было бы сразу в браузере открыть(с файлом .html) и посмотреть работу плеера,а там уже настраивать потоковое видео под себя.
01.10.2013 Pager
Какой командой можно скрыть бегунок перемотки в панели? И можно ли вообще это сделать?
02.10.2013 Алексей
А RTSP сможет воспроизвести?
Добавить свой комментарий
|