Страница 9 из 11

[3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 18.09.2015 8:24
KEMnEP
Расширение и video bb соde на jquery для просмотра на сайте видео. Совместимо с [beta] Быстрый ответ: перезагрузка (QuickReply Reloaded)
Просьба тапками не кидать, всё равно с бронепоезда не слезу. Код Чихуахуа на "Стандарты", оптимизирован на минимальную нагрузку серверной части, поэтому лишён даже файлов локализации, всё по старинке в админке. Считаете что сделаете лучше? сразу выкладывайте готовый вариант, я переделывать не буду.
Конструктивная просьба, так как код в тестовом варианте, просьба кидать сюда нерабочие ссылки (если не противоречат настройкам приватности автора видео)
Дисклеймер, расширение и бб код предоставляются как есть и никто не за что не несёт никакой ответственности.

Описание; Связка расширение + ббкод позволяет просматривать видео на сайте. Не нарушая авторские права, и слушаясь настроек приватности самого видео. Также с youtube убираются настройки плей листов, То есть проигрывается просто видео от начало до конца, если не запрещено настройками приватности автора или самого ютюба. Адаптивность заключается в том что на малых экранах это просто кликабельные ссылки, на больших готовое вставленное видео.
Подключает https где это возможно.

Установка:
В администраторском разделе форума сообщения/BBcodes/Добавить BBcode
Использование BBCode [video]{URL}[/video]
Замена HTML <a class="videobbcode" href="{URL}">{URL}</a>
Подсказка Вставить видео [video]URL[/video]
Показывать на странице ответа галка
Если код не отображается в панеле, дополнительно выбрать "Группы, которые могут использовать BB-код".

Собственно установить расширение прикреплённое архивом к данному посту.

Поддерживает вставку аудио и видео со следующих сайтов:
youtube.com
vimeo.com
video.mail.ru
vk.com (Вконтакта)
lovi.tv
intv.ru (без https)
facebook.com
promodj.com
rutube.ru (без https)
twitch.tv
dailymotion.com
videochart.net
video.sibnet.ru
metacafe.com (без https)
coub.com
goodgame.ru
video.online.ua (без https)
tvforsite.ru (без https)
afreeca.tv (без https)
hitbox.tv (без https)
ipeye.ru (без https)
smotri.com (без https)
pleer.com
music.yandex.ru

Поддерживает html5 вставку контента обычным урл адресом.
mp3
ogv
webm
mp4
avi
(Так как используется "чистый" html5 код вставки, все форматы кроме пожалуй mp3 могут не открываться в разных браузерах)

Показывает видео на стандартных плеерах сайтов из списка, сохраняя полный их функционал (к примеру автоматический перевод субтитров youtube.com на разные языки мира)

Использование;

youtube.com, vimeo.com, video.mail.ru dailymotion.com video.online.ua video.sibnet.ru ipeye.ru вставить между [video][/video] url любой страницы с нужным изображением.

yotube.com Существует возможность вставки плейлиста целиком из ютюба, Для этого допишите адресу ютюба с плейлистом, слитно, &1
пример:
[video]http://www.youtube.com/watch?v=WPWJJsEnYEM&list=PLPYC---L3hwl7yImm5Rk3Iol0Efln7CDe&index=5&1[/video]
Внимание! Запоминает только сам плейлист и начинает с первого файла, если Вы хотите передать конкретный файл и/или его же с тайминогом, добавлять нечего ненужно, но и плейлист не передастся.
list1.jpg
list2.jpg
Также возможен просмотр сразу всех видео загруженных конкретным пользователем.
Пример: [video]http://www.youtube.com/user/yplandrew[/video]

vk.com найдите нужное видео на сайте vk.com, кликните по нему правой кнопкой мышки и нажмите левой на "копировать код видео"
4.jpg
После на сайте в комментарии жмём правой кнопкой мышки, выбираем, и левой нажимаем вставить.
5.jpg
Удаляем всё лишние кроме урл. После выделяем оставшиеся, и нажимаем кнопку video.
6.jpg
lovi.tv Поделиться/ссылка на видео
lovi.jpg
intv.ru Где присутствует "Постоянная ссылка" под видео.
intv.jpg
facebook.com Правой кнопкой на заинтересовавшем видео и там Get video URL
facebook.jpg
promodj.com вставить между [video][/video] url любой страницы с нужным изображением или музыкой. Единственное условие страница должна быть посвящена именно треку, а не списку треков. И не в разделе tv.
Пример страницы видео и отображения:
https://promodj.com/yaaman/videos/55139 ... ck_To_Stay
video.jpg
Пример страницы с аудио и отображения:
https://promodj.com/slamdjs/tracks/5107 ... ngrad_Like
tracks.jpg
Для вставки из раздела TV нужно нажать <> на самом видео.
1.jpg
После вставить в поле ответа из буфера обмена. очистить до вида URL (пример http://promodj.com/embed/5364879/big) и заключить в тег [video][/video]

rutube.ru Вставить между [video][/video] адрес отдельной страницы с самим видео.

twitch.tv Добавить url адрес стрима между тегами. Пример [video]http://www.twitch.tv/meteos[/video]
metacafe.com Копируем адрес странницы посвящённой самому видео. Пример:
[video]http://www.metacafe.com/watch/11324313/clumsy_reporter_knocks_down_jenga_tower/[/video]

coub.com Добавить URL видео. Который к примеру можно получить с самого видео.
coub2.jpg
goodgame.ru Вставить url канал стримера.

video.online.ua он же moevideo.net
Вставить адрес страницы с нужным видео.

tvforsite.ru Для использования, получите код встройки после на нужных Вам темах форума добавите только [video]URL[/video] из полученного кода.

afreeca.tv урл брать под стримом.
afreecatv.jpg
hitbox.tv Вставить ссылку страницы стрима между бб кодом.

Ещё раз повторюсь выкладываю только из за просьбы показать как сделал. В советах, кроме как нерабочих (на самом деле рабочих) ссылок не нуждаюсь.

Так же доступна версия newadapvideobbredy.zip с видео адаптацией под мобильные экраны вставки видео с сайтов
youtube.com vk.com rutube.ru vimeo.com mail.ru coub.com
В ней также реализован режим экономии мобильного трафика для youtube.com, изначально загружаются только изображения, после первого клика идёт подгрузка управления и подготовка видео, после второго клика только загрузка самого видео

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 9:31
misterleks
KEMnEP, он для всех будет работать? Или только с конкретным доменом? А то я заносил поддерживаемые домены в белый список.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 10:48
KEMnEP
Версия из поста Re: [3.1/3.2] videobbredy - адаптивный bb код видео будет работать со всеми поддерживаемыми доменами. Но в ней есть микро баг, который если честно не вижу причины устранять ибо не понимаю смысл вообще переходных страниц, ну да неважно. Проще говоря с той версией неподдерживаемые домены в бб коде видео будут обычными ссылками но с убранными возможностями екстернал.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:13
Beer
Кешь очистил, включал-выключал. Что-то у меня немножко не але... :oops:
81547b65-a9c0-42b8-a271-4315c7507af8.png
youtube:

Код: Выделить всё

<a href="/forum/link/http%253A%252F%252Fwww.youtube.com%252Fwatch%253Fv%253DWPWJJsEnYEM%2526amp%253Blist%253DPLPYC---L3hwl7yImm5Rk3Iol0Efln7CDe%2526amp%253Bindex%253D5%2526amp%253B1" class="exlinks" onclick="this.target='_blank';">http://www.youtube.com/watch?v=WPWJJsEn ... &index=5&1</a>
vimeo:

Код: Выделить всё

<a class="videobbcode exlinks" href="/forum/link/https%253A%252F%252Fvimeo.com%252F207466220" onclick="this.target='_blank';">https://vimeo.com/207466220</a>
Смысл екстернал - типо отсутствия спаскруга на лодке, т.е. чтобы народ больше проводил время на борту, и меньше сваливал, чтобы постил ссылки так, чтобы можно было смотреть на форуме, а не в один клик на другом сайте.
Мы же форумы держим никак не для развития ютуба или вимео - так ведь? :)

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:18
misterleks
Поставил, удалил из белого списка все сайты с видео, все работает. Но если левую ссылку в этот код заключить, ничего страшного не будет? В коде она видна, но не выводиться на форуме.

Отправлено спустя 10 минут 31 секунду:
Странно, на компьютере все хорошо, плеер и все работает как надо, а если смотреть тоже самое с мобильного, то просто ссылка.
Установлена версия из последнего сообщения.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:31
KEMnEP
misterleks,
misterleks писал(а): а если смотреть тоже самое с мобильного, то просто ссылка.
KEMnEP писал(а): Адаптивность заключается в том что на малых экранах это просто кликабельные ссылки, на больших готовое вставленное видео.
KEMnEP писал(а): Так же доступна версия newadapvideobbredy.zip с видео адаптацией под мобильные экраны вставки видео с сайтов
youtube.com vk.com rutube.ru vimeo.com mail.ru coub.com

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:36
misterleks
KEMnEP писал(а): В ней также реализован режим экономии мобильного трафика для youtube.com, изначально загружаются только изображения, после первого клика идёт подгрузка управления и подготовка видео, после второго клика только загрузка самого видео
Меня интересует именно это. Как понять, маленький экран или нет. Смотрю с 5и дюймов, разрешение ФуллХД.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:45
KEMnEP
Beer, misterleks, версия с убиранием влияния расширения External Links (кроме чёрного списка) на ббкод видео
в прошлом архве был баг и на мобильных
KEMnEP писал(а): Так же доступна версия newadapvideobbredy.zip с видео адаптацией под мобильные экраны вставки видео с сайтов
youtube.com vk.com rutube.ru vimeo.com mail.ru coub.com
не работало, исправил.
Отвечая на вопрос,
misterleks писал(а): Меня интересует именно это. Как понять, маленький экран или нет. Смотрю с 5и дюймов, разрешение ФуллХД.
маленьким считается физическое разрешение экрана меньше 600Х500 без учёта маркетингового преобразования "фул хд" в эту малость.

упд архив удалён, рабочая версия в посте Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:54
misterleks
Проверил на мобильном и на десктопе, все работает без включений доменов в белый список.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 11:56
Beer
misterleks, ставь видос в спойлер с постзагрузкой от ppk - лучшее мобильное решение.

KEMnEP, у меня только цвет ссылки изменился:

Код: Выделить всё

[video]http://www.youtube.com/watch?v=-lqfyXvx0_M[/video]

Код: Выделить всё

<a class="videobbcode" href="/forum/link/http://www.youtube.com/watch?v=-lqfyXvx0_M">/forum/link/http://www.youtube.com/watch?v=-lqfyXvx0_M</a>
80f8e4ea-a3cf-4cb4-903b-51e14b25b56a.png

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 12:00
KEMnEP
Beer, это должно и Вам помочь

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 10.03.2017 13:42
Beer
Супер! Перезагрузил страницу - все заработало! :)
Спасибо тебе большое KEMnEP!
Всегда уважал грамотных людей, осуществляющих ликбез для недостаточно умных... :P

Начинаю тестировать.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 28.04.2017 22:08
Beer
Результаты тестирования таковы: все работает просто супер! :P
Дополнительно добавил автоматический спойлер для видео от ppk.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 07.05.2017 14:03
va-spb
KEMnEP, спасибо за Вашу работу.
Я с Яндекс.Музыкой. Отдельные треки со ссылкой https://music.yandex.ru/track/23554003 вставляются и работают нормально. Но вот, захотелось вставлять сразу альбом целиком, ссылка у альбомов такая https://music.yandex.ru/album/3508363, HTML код такой

Код: Выделить всё

<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#album/3508363/white/C4EFF3/">Слушайте <a href='https://music.yandex.ru/album/3508363'>День Победы</a> — <a href='https://music.yandex.ru/artist/4379065'>Ансамбль песни и пляски Российской армии имени А. В. Александрова</a> на Яндекс.Музыке</iframe>
К Празднику подключил альбом пока без Вашего BBCode, на отдельной странице, вот так http://forum.prihozovka.ru/page/musik
Хотелось бы поиметь разбор ссылки альбомов и подключение их в Вашем BBCode.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 08.05.2017 3:49
KEMnEP
Сегодня занят, завтра посмотрю что можно сделать.

Re: [3.1/3.2] videobbredy - адаптивный bb код видео

Добавлено: 08.05.2017 10:41
va-spb
KEMnEP, чтобы сэкономить Ваше время, вот тексты ссылок и соответствующие им HTML-коды плееров.
Есть Альбомы, Плейлисты и Треки, они доступны для показа и проигрывания.
Альбомы, плейлисты, треки на Яндекс Музыке 

Код: Выделить всё

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head></head>
<body>
<h2>
<br>Альбом 2840980 с обложкой<br>
https://music.yandex.ru/album/2840980
<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#album/2840980/">Слушайте <a href='https://music.yandex.ru/album/2840980'>Как здорово, что все мы здесь сегодня собрались! (Четверть века спустя)</a> — <a href='https://music.yandex.ru/artist/218090'>Олег Митяев</a> на Яндекс.Музыке</iframe>


<br><br>Альбом 2840980 без обложки (hide/cover)<br>
https://music.yandex.ru/album/2840980
<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#album/2840980/hide/cover/">Слушайте <a href='https://music.yandex.ru/album/2840980'>Как здорово, что все мы здесь сегодня собрались! (Четверть века спустя)</a> — <a href='https://music.yandex.ru/artist/218090'>Олег Митяев</a> на Яндекс.Музыке</iframe>

<br><br>Альбом 2840980, с обложкой, Тема темная(black)<br>
https://music.yandex.ru/album/2840980
<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#album/2840980/black/">Слушайте <a href='https://music.yandex.ru/album/2840980'>Как здорово, что все мы здесь сегодня собрались! (Четверть века спустя)</a> — <a href='https://music.yandex.ru/artist/218090'>Олег Митяев</a> на Яндекс.Музыке</iframe>

<br><br>Плейлист 1034, юзера newyearplaylists, с обложкой, тема светлая (white), фон ECF3F7<br>
https://music.yandex.ru/users/newyearplaylists/playlists/1034
<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#playlist/newyearplaylists/1034/show/cover/description/white/ECF3F7/">Слушайте <a href='https://music.yandex.ru/users/newyearplaylists/playlists/1034'>Наши праздничные песни</a> — <a href='https://music.yandex.ru/users/newyearplaylists'>Новогодние песни</a> на Яндекс.Музыке</iframe>

<br><br>Плейлист 3, юзера va-spb (это я), с обложкой, тема светлая, <br>
Это мой плейлист "Мне нравится", он создается автоматом, треки попадают в него при клике на сердечко "Мне нравится". Этот плейлист будет постоянно меняться. Его номер 3, надо проверить под другими аккаунтами. Проверил, у других пользователей тоже номер 3, это первый плейлист, дается каждому пользователю.
<br>https://music.yandex.ru/users/va-spb/playlists/3
<iframe frameborder="0" style="border:none;width:100%;height:600;" width="100%" height="600" src="https://music.yandex.ru/iframe/#playlist/va-spb/3/show/cover/description/">Слушайте <a href='https://music.yandex.ru/users/va-spb/playlists/3'>Мне нравится</a> — <a href='https://music.yandex.ru/users/va-spb'>va-spb</a> на Яндекс.Музыке</iframe>

<br><br>Трек 31920858 из альбома 3879428 с обложкой
<br>https://music.yandex.ru/album/3879428/track/31920858
<iframe frameborder="0" style="border:none;width:100%;height:100;" width="100%" height="100" src="https://music.yandex.ru/iframe/#track/31920858/3879428/">Слушайте <a href='https://music.yandex.ru/album/3879428/track/31920858'>Ну, вот и всё</a> — <a href='https://music.yandex.ru/artist/391868'>Стас Михайлов</a> на Яндекс.Музыке</iframe>

<br><br>Трек 31920858 из альбома 3879428, без обложки (hide/cover), тема темная (black)
<br>https://music.yandex.ru/album/3879428/track/31920858
<iframe frameborder="0" style="border:none;width:100%;height:100;" width="100%" height="100" src="https://music.yandex.ru/iframe/#track/31920858/3879428/hide/cover/black/">Слушайте <a href='https://music.yandex.ru/album/3879428/track/31920858'>Ну, вот и всё</a> — <a href='https://music.yandex.ru/artist/391868'>Стас Михайлов</a> на Яндекс.Музыке</iframe>

</h2>
</body
</html
BBcode можно попробовать использовать с параметрами:
Ссылка оканчивается цифрами. Если добавлять руками в конце ссылки b, то тема будет black, если добавлять с(и рус и англ, так как выглядят одинаково), то будет показана обложка-cover.