ВВ-коды HTML5 плеера для прямых ссылок видео и аудио 1.0.1

[bm2k]

вот навел курсор на первую кнопку аудио

 

[Skaiman]

читай выше

 

[bm2k]

читай выше

да просто пока скрин размешал был уже написан ответ. Переписал путь к картинке и все отобразилось. спасибо за оперативность :)

 

[Skaiman]

Пользователь Skaiman обновил ресурс ВВ-коды HTML5 плеера для прямых ссылок видео и аудио новой записью:

Исправление пути до картинки

Исправил ошибку с расположением папок бб-кода

Узнать больше об этом обновлении...

 

[ProfSenja]

А если у вас стиль с Font Awesome.
У себя использую вот такой код в файле EXTRA.css

li a.redactor_btn_custom_video:before {
  content: "\f03d";
}
li a.redactor_btn_custom_audio:before {
  content: "\f001";
}

 

[Skaiman]

да просто пока скрин размешал был уже написан ответ. Переписал путь к картинке и все отобразилось. спасибо за оперативность :-)

Просто 30 скачавших и тишина, я и не проверял :) да даже если ошибку сами исправили, напишите сюда.

 

[torneio]

День добрый столкнулся с такой проблемой что после вставки кода и публикации сообщения он появляется на секунду и потом плавно исчезает и сообщение получается пустое. Только у меня такая проблема?

 

[bm2k]

День добрый столкнулся с такой проблемой что после вставки кода и публикации сообщения он появляется на секунду и потом плавно исчезает и сообщение получается пустое. Только у меня такая проблема?

ссылка кривая значит

 

[sexo]

Я так и не понял, если это HTML5 плеер, зачем требует flash?
вот скрин с мобильного


А вот и с браузера вивалди



В опере 12.17 совсем не отображается.

 

[Skaiman]

попробуй пользоваться нормальными браузерами :) про оперу вообще забыть можно, тем более мобильную, а требуют флеш плеер, потому что не могут проигрывать html5, вот и заменяют :)

 

[94KONG]

Ребят такая проблемка,установлен Font Awesome все иконки отображаютса нормально кроме этих двух (нужно сделать светлые иконки)
изначально их небыло (пути правильно прописаны) потом в EXTRA.css добавил код что выше написал ( anton ) пооявились но чорного цвета,крутил уже и так и сяк (и картинку перекрашивал) не пойму в чом загвоздка?
И если убрать пути до картинок то иконки опять пропадают,и Awesome не отображаютса

 

[Hope]

Ну подставьте выше, например: color: white;

li a.redactor_btn_custom_video:before {
  content: "\f03d";
  color: white;
}
li a.redactor_btn_custom_audio:before {
  content: "\f001";
  color: white;
}

 

[94KONG]

Тот же результат:unsure:
Забыл написать стиль Razor Blade (6 Colors Now!) - ThemesCorp.com

 

[Skaiman]

Ребят такая проблемка,установлен Font Awesome все иконки отображаютса нормально кроме этих двух (нужно сделать светлые иконки)
изначально их небыло (пути правильно прописаны) потом в EXTRA.css добавил код что выше написал ( anton ) пооявились но чорного цвета,крутил уже и так и сяк (и картинку перекрашивал) не пойму в чом загвоздка?
И если убрать пути до картинок то иконки опять пропадают,и Awesome не отображаютса

Если установлен Font Awesome для редактора, картинки видно не будет, хоть как перекрашивай :-), но в настройках вв-кода путь до картинки убирать нельзя, потому что сама кнопка пропадет. У тебя надо искать шаблон этого стиля где добавлены иконки редактора и там добавлять эти, так как приоритет шаблона этого стиля выше EXTRA.css.

Это шаблон razorblade.css, там найди:

html .redactor_toolbar li a.redactor_btn_bold:before       {content: "\f032";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_italic:before       {content: "\f033";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_underline:before     {content: "\f0cd";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_fontcolor:before     {content: "\f042";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_fontsize:before     {content: "\f034";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_fontfamily:before     {content: "\f031";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_createlink:before     {content: "\f0c1";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_unlink:before       {content: "\f127";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_alignment:before     {content: "\f036";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_unorderedlist:before     {content: "\f0ca";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_orderedlist:before     {content: "\f0cb";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_outdent:before       {content: "\f03b";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_indent:before       {content: "\f03c";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_smilies:before       {content: "\f118";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_image:before       {content: "\f03e";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_media:before       {content: "\f008";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_insert:before       {content: "\f067";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_custom_gallery:before     {content: "\f030";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_draft:before       {content: "\f0c7";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_undo:before       {content: "\f0e2";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_redo:before       {content: "\f01e";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_removeformat:before     {content: "\f12d";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_switchmode:before     {content: "\f0f6";color: #C5C5C5;}
html .redactor_dropdown a.alignLeft:before         {content: "\f036";color: #C5C5C5;}
html .redactor_dropdown a.alignCenter:before         {content: "\f037";color: #C5C5C5;}
html .redactor_dropdown a.alignRight:before         {content: "\f038";color: #C5C5C5;}
.redactor_dropdown a.quote:before           {content: "\f10d";color: #C5C5C5;}
.redactor_dropdown a.spoiler:before           {content: "\f024";color: #C5C5C5;}
.redactor_dropdown a.code:before           {content: "\f121";color: #C5C5C5;}
.redactor_dropdown a.strikethrough:before         {content: "\f0cc";color: #C5C5C5;}
.redactor_dropdown a.saveDraft:before           {content: "\f0c7";color: #C5C5C5;}
.redactor_dropdown a.deleteDraft:before           {content: "\f014";color: #C5C5C5;}

И после добавь:

html .redactor_toolbar li a.redactor_btn_custom_video:before       {content: "\f03d";color: #C5C5C5;}
html .redactor_toolbar li a.redactor_btn_custom_audio:before       {content: "\f001";color: #C5C5C5;}

 

[94KONG]

СП помогло!!!

 

[Sergey Miroshnichenko]

Одного не могу понять, почему для видео подключается скрипт <script src="styles/bb_code/js/html5media.min.js">, а для аудио нет. Понятно, что браузер сам mp3 понимает, без сторонних скриптов, но ведь и видео тоже воспроизводит...

 

[Skaiman]

Одного не могу понять, почему для видео подключается скрипт <script src="styles/bb_code/js/html5media.min.js">, а для аудио нет. Понятно, что браузер сам mp3 понимает, без сторонних скриптов, но ведь и видео тоже воспроизводит...

Давно все было :) Скрипт кастомизирует плеер и можно делать свою заставку, картинку ставить.

 

[Sergey Miroshnichenko]

Скрипт кастомизирует плеер и можно делать свою заставку, картинку ставить.

Ясно. )) Правда, какой-то разницы без скрипта не заметил. Может он для совместимости с разными браузерами нужен.
В общем, всё настроил (кроме оформления плеера) так, как мне нужно. А вот с оформлением не знаю что делать... Может кто-нить заморачивался?.. Цвет фона и элементов поменять хотя бы...

 

[Skaiman]

А вот с оформлением не знаю что делать

В интернете очень много вариантов

Sergey Miroshnichenko, вот какой для аудио сделал


Без флеш

В оформлении нет проблемы, проблема в том, что для каждого плеера надо свой id, так как обрабатывается ява скриптом, когда делается оформление. Можно добавлять переменную от поста, но тогда в пост один плеер. Вот такая накладочка :)

Может кто придумает цифровую переменную у которой при вставке в сообщение добавлялась единица :)

 

[Sergey Miroshnichenko]

вот какой для аудио сделал

Это он обложку и название из тегов аудиофайла берёт?.. Тогда круто!

так как обрабатывается ява скриптом

А через CSS никак не оформить?.. Прям в настройке BB-кода прописать, и всё. Не хотелось бы js-ы подключать.