Автозамена ссылок на видео Youtube на код ролика + плеер Uppod или модальное окно 1.X

2189
Автоматическое преобразование ссылки на видео с ютуба, которая вставлена в посте блога, на стене, на форуме в плеер с этим видео.
Также рассмотрим вывод этого видеоролика в своем стилизованном плеере на базе Uppod плеера и вывод этого ролика в модальном окне используя имеющийся в коробке Инстанта Colorbox.

0. Бэкап файлов.
1. includes/bbcode/bbcode.lib.php
в функции autoLink

Это

Код PHP:
  1. $search = array(
  2. "~(\s|^)((?:http|https|ftp)://[^<\s]+[^<\.,:;?!\"»'+\-\s])~uim",
  3. "~(\s|^)(www\.[^<\s]+[^<\.,:;?!\"»'+\-\s])~uim",
  4. "'([^\w\d-\.]|^)([\w\d-\.][email protected][\w\d-\.]+\.[\w]+[^.,;\s<\"\'\)]+)'usi"
  5. );
  6. $replace = array(
  7. '$1<a href="/go/url=$2">$2</a>',
  8. '$1<a href="/go/url=http://$2">$2</a>',
  9. '$1<a href="mailto:$2">$2</a>'
  10. );
Заменил на это

Код PHP:
  1. $search = array(
  2. "/\s*[a-zA-Z\/\/:\.]*youtu(be.com\/watch\?v=|.be\/)([a-zA-Z0-9\-_]+)([a-zA-Z0-9\/\*\-\_\?\&\;\%\=\.]*)/i",
  3. "~(\s|^)((?:http|https|ftp)://[^<\s]+[^<\.,:;?!\"»'+\-\s])~uim",
  4. "~(\s|^)(www\.[^<\s]+[^<\.,:;?!\"»'+\-\s])~uim",
  5. "'([^\w\d-\.]|^)([\w\d-\.][email protected][\w\d-\.]+\.[\w]+[^.,;\s<\"\'\)]+)'usi"
  6.  
  7. );
  8. $replace = array(
  9. '<youtube>$2</youtube>',
  10. '$1<a href="/go/url=$2">$2</a>',
  11. '$1<a href="/go/url=http://$2">$2</a>',
  12. '$1<a href="mailto:$2">$2</a>'
  13.  
  14. );
Можно было бы конечно сразу здесь же заменять ссылку на полный код видеоролика с ютуба. Но я решил на этом этапе извлекать только Идентификатор видеоролика и в базу вместе с постом записывать только его обрамляя тегом <youtube></youtube>

Это оставляет больше возможностей для маневра на будущее. Например можно будет менять в любое время во врех роликах стандартный плеер Ютуб на свой, размер плеера, ну и если на самом Ютубе что то изменится, идентификатор ролика всё равно останется тот же скорее всего. Поэтому в базу пишется только ИД видео, а дальше придется в каждом компоненте описывать преобразование ИД ролика в плеер.

На примере стены пользователя я сделал это так:

2. core/classes/user.class.php

после
Код PHP:
  1. while($record = $inDB->fetch_assoc($result)){
  2. $record['is_today'] = time() - strtotime($record['pubdate']) < 86400;
  3. $record['fpubdate'] = $record['is_today'] ? cmsCore::dateDiffNow($record['pubdate']) : cmsCore::dateFormat($record['pubdate']);
  4. $record['avatar'] = cmsUser::getUserAvatarUrl($record['author_id'], 'small', $record['imageurl'], $record['is_deleted']);
а) вставил это
Код PHP:
  1.  
  2. $record['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<iframe width="560" height="315" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>', $record['content']);
для вывода плеера ютуб в его стандартном виде

******

б) или это

Код PHP:
  1. $record['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', ' <a class="iframe cboxElement" href="https://www.youtube.com/embed/$1"><img src="/images/play_video.png" style="width:300px; height:auto;" /></a>', $record['content']);
для вывода вместо плеера картинки иконки, при нажатии на которую видео откроется в Colorbox

******

в) или это

Код PHP:
  1. $record['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<div class="player" id="$1"></div><script type="text/javascript">this.player = new Uppod({m:"video",uid:"$1",file:"https://www.youtube.com/embed/$1"});</script>', $record['content']);

для вывода видео в html5 плеере от uppod http://uppod.ru/help/html5

******

г) а если плеер будет со своим и стилями то вот так
Код PHP:
  1.  
  2. $record['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<div class="player" id="$1"></div><script type="text/javascript">this.player = new Uppod({m:"video",uid:"$1",file:"https://www.youtube.com/embed/$1",st:"uppodvideo"});</script>', $record['content']);
******

для блогов


При этом для uppod в <head> секцию сайта нужно добавить js вызова плеера Uppod и js вызова стилей для плеера Uppod (если они используются). О подключении стилей Uppod html5 читайте здесь http://uppod.ru/help/q=styles-html5


Действия из пункта 2 придется повторить для блогов, комментов, форума.

Вот что получается

Ссылка вставленная на стену превратилась в плеер

Автозамена ссылок на видео Youtube на код ролика + плеер Uppod или модальное окно


Оно же но с использованием Uppod

Автозамена ссылок на видео Youtube на код ролика + плеер Uppod или модальное окно

Вместо ссылки картинка со ссылкой на видео.

Автозамена ссылок на видео Youtube на код ролика + плеер Uppod или модальное окно

по клику на картинку открывается видео в колорбоксе.

Автозамена ссылок на видео Youtube на код ролика + плеер Uppod или модальное окно



P.S. в файле стилей можно задать стиль для блока <youtube>
например скрыть там где еще не работает преобразование или вывести там фон с текстом что видео скоро появится)

body youtube{
display:none;
}

P.P.S - если после этого внедрения нужно в посте опубликовать ссылку на видео что бы она осталась в виде ссылке, это можно сделать через bbcode тег url. Не проверял, но по идее там ссылки не будут заменяться на плеер.

Пока всё. Кто хочет дополнить, улучшить, вэлкам.
Вставка фотоальбома через bbcode в блогах и т.д. | Прикрепленные файлы на форуме: если аудио или видео то вывод сразу в плеере
Теги: youtube, bbcode
Комментарии (10)
letsgo 22 мая 2017 в 00:28 0
Отличное решение.
Erwin 26 мая 2017 в 09:43 0
Радует что первая ветка жива и такие хорошие поправки делаете. Их прям нужно в коробку вносить сразу.
surfixx 29 мая 2017 в 16:49 0
Спасибо за это решение. Поставил плюс. Но есть недостаток, нет резиновости (извиняюсь за каламбур). Я решил это так: в user.class.php добавил диви

Код PHP:
  1. $record['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '[b]<div class="videoframe"><div class="videocontainer">[/b]<iframe width="560" height="315" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>[b]</div></div>[/b]', $record['content']);
И в стилях добавил вот это.
Код PHP:
  1.  
  2. .videoframe {
  3. display:block;
  4. max-width:560px;
  5. margin:0px auto;
  6. float:none
  7. }
  8. .videocontainer {
  9. display:block;
  10. position: relative;
  11. padding-bottom: 56.25%;
  12. padding-top: 30px;
  13. height: 0;
  14. overflow: hidden;
  15. }
  16.  
  17. .videocontainer iframe,
  18. .videocontainer object,
  19. .videocontainer embed {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. }
  26.  
Ваш <youtube></youtube> в скрипте чтото не нашол. Пришлось делать по простому.
Нил™ 29 мая 2017 в 17:43 +1
<youtube></youtube> это я сделал обёртку идентификатора с видео, что бы потом на выводе искать ИД видео по тегу <youtube>, оно хранится только в базе с этими тегами а при отрисовке html страницы вырезается и меняется на сам код видеоролика.
И кстати, заметил после опубликования поста, что при размещении видеоролика на стене пользователя, в ленте активности потом это выглядит вот так


Это связано с тем, что при записи в ленту активности события "Добавления поста на стену" из описания события вырезаются все теги, ну и наш тоже вырезался и в результате в ленте активности отображаются загадочные символы которые мы не можем преобразовать в видеоролик, потому что они не обернуты в тег <youtube>

Что бы этого избежать, можно
а) использовать вместо тегов <youtube></youtube> набор символов типа YTBcode endYTBcode,
б) на самом делее более вменяемый вариант, в components/users/model.php

вместо
Код PHP:
  1.  
  2. $message = strip_tags($item['content']);
вставить
Код PHP:
  1.  
  2. $message = strip_tags($item['content'],'<youtube>');
то есть внести тег ютуб в список исключений и не вырезать его при постинге события в ленту активности.

И тогда в ленте активности событие "Надпись на стене" если эта надпись одно только видео будет выглядеть вот так



Как собственно оно и выглядело всегда на Instantcms первой ветки, если надпись на стене это тупо видеоролик то в ленте активности пустое сообщение.

Что бы все таки указать в ленте активности на видеоролик размещенный на стену в файле core/classes/action.class.php

где то перед
Код PHP:
  1. $actions[] = $action;
вставил ту же замену тега ютуб что и выше для стены и для блогов. Вариант для ленты активности получается такой

Код PHP:
  1. $action['description'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<iframe width="560" height="315" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>', $action['description']);
  2.  
и тогда уже сообщение о том что пользователь написал на стене с видеороликом выглядит вот так



(вывод в плеере ютуб)

Ну мне не нравится вывод самого видеоролика в саму ленту активности, поэтому я сделаю вот так

$action['description'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<img src="/images/icons/youtubevideo.jpg" style="max-width:200px; height:auto; width:100%; border:1px solid silver; box-sizing:border-box;"/>', $action['description']);

и результат выглядит вот так









Что бы этого избежать,
Нил™ 29 мая 2017 в 17:46 0
Блин можно уже дать возможность редактировать комменты хотя бы в течении 10 минут hoho
surfixx 29 мая 2017 в 18:27 0
Спасибо за ответ. Хорошее решение, но по мне, много действий в скриптах. Всё это в плагин - вот Би да. Всё равно спас за ваш труд. Молодец.
sibroy 9 июня 2018 в 12:11 0
Как бы сделать такой вывод в комментариях?
Нил™ 9 июня 2018 в 12:46 +1
1 пункт из этого поста ( в файле bbcode.lib.php)

+

components/comments/model.php

перед

Код PHP:
  1. $comments[] = $comment;
+ uppod

Код PHP:
  1. $comment['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<div class="player" id="$1"></div><script type="text/javascript">this.player = new Uppod({m:"video",uid:"$1",file:"https://www.youtube.com/embed/$1"});</script>', $comment['content']);
  2.  
или +плеер youtube

Код PHP:
  1. $comment['content'] = preg_replace('|<youtube>(.*)</youtube>|isU', '<iframe width="100%" height="315" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>', $comment['content']);
  2.  
как то так. не проверял, но должно работать
Нил™ 9 июня 2018 в 12:53 +1
но после изменения в bbcode.lib.php часть, которая касается блогов и форума и стены тоже надо выполнить, как описано выше
sibroy 9 июня 2018 в 14:51 0
Работает...спасибо