1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - коммерческий форумный движок от бывших создателей vBulletin, написанный на PHP.

Проигрывание media вложений HTML5

Тема в разделе "Модификации шаблонов", создана пользователем Fail, 19.09.2013.

Загрузка
  1. Fail

    Fail Пользователь

    Регистрация:
    27.12.12
    Сообщения:
    21
    Симпатии:
    4
    Версия XF:
    1.3.3
    Идея взята из этой темы.
    Заходим в Админ панель дальше -> редактируем шаблон "attached_files":
    Находим :
    Код:
    <h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>
    Добавляем после:
    Код:
            <xen:if is="{$attachment.extension} == 'mp3' ">
    <div><audio controls><source src="{xen:link attachments, $attachment}" type="audio/mpeg"></div>
    </xen:if>
    
    <xen:if is="{$attachment.extension} == 'mp4' ">
    <div>
    <video width="320" height="240" preload="none" controls><source src="{xen:link attachments, $attachment}"></video>
    </div>
    </xen:if>
    Далее идем в attached_files.css и ищем:

    Код:
    .attachment
            {
                float: left;
    ниже у нас будет "max-width" оно то нам и надо
    меняем его значение на "500px", итоговый:

    Код:
    .attachment
            {
                float: left;
                width: 100%;
                max-width: 500px;
            }
    скрин:
    [​IMG]

    очень было бы не плохо если кто нибудь объяснит как работать с условиями, дабы избавится от лишнего куска кода...
     
    Telia и fly_indiz нравится это.
  2. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1 164
    Симпатии:
    846
    Версия XF:
    1.3.4
  3. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    Нашёл проблему работы этой фишки в IE
    Проблема в том что IE чувствителен к отдаваемому в http-заголовке Content-type
    этот заголовок генерится в library/XenForo/ViewPublic/Attachment/View.php
    Менять исходный код файлов крайне неприятно конечно, но проблема решается добавлением в
    PHP:
            $imageTypes = array(
                
    'gif' => 'image/gif',
                
    'jpg' => 'image/jpeg',
                
    'jpeg' => 'image/jpeg',
                
    'jpe' => 'image/jpeg',
                
    'png' => 'image/png'
            
    );
    ,
    'mp3' => 'audio/mpeg',
    'mp4' => 'video/mp4'

    если кто сможет предложить более кошерный вариант решения без влезания в исходный код двига - буду рад.

    заодно неплохое дополнение для шаблона attached_files - добавить условие {$canViewAttachments}
    т.е.
    <xen:if is="{$attachment.extension} == 'mp3' AND {$canViewAttachments}">
    и
    <xen:if is="{$attachment.extension} == 'mp4' AND {$canViewAttachments}">
     
    adder нравится это.
  4. Fail

    Fail Пользователь

    Регистрация:
    27.12.12
    Сообщения:
    21
    Симпатии:
    4
    Версия XF:
    1.3.3
    А это он игнорирует?
    <audio controls><source src="{xen:link attachments, $attachment}" type="audio/mpeg">
    Да и вообще эта фишка не актуальна на загруженных серверах, представь что будет если 5 - 6 сотни людей включат запись...
     
  5. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    Ага - игнорирует... сцуко :)
    ну так - да. если тока размер мелкий поставить.
    ну а на некрупных форумах - вполне пойдёт себе ))
     
  6. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    Кстати - вопрос на засыпку - в мобильном браузере android (стандартный или chrome) у когонибудь проигрывается?
    в упор не могу понять почему loading - и всё...

    Гм..
    похоже дело не в "мобильном браузере", а всётаки в не совсем корректной отдаче файла в XenForo_ViewPublic_Attachment_View::renderRaw()

    эксперимент #1:
    если в отдельной вкладке браузера (возьмём тот же хром) открыть url на mp4-аттач, например:
    http://сайт/attachments/27/
    (учитывая что мы залогинены и аттач имеет право отдаваться)
    то видим что хром сам понял Content-type и сам отрисовал элементы управления видео. Но при этом проигрывать решительно отказывается, хотя на странице топика - проигрывает. правда там не его собственный html5-плеер, а явно указанный тег <video> на странице.

    эксперимент #2:
    открываем url непосредственно на сам видео-файл, который заблоговременно подложим например в корень сайта:
    http://сайт/BigBuckBunny_640x360.mp4
    и открываем тем же хромом. (П.С. mime-types для веб-сервера естественно настроены)
    и вуаля - хром отрисовывает элементы управления и спокойно играет файл.

    т.е. есть разница как файл отдаётся скриптом или непосредственно веб-сервером.
    собственно эта разница оказывается критичной для мобильного браузера, который не воспроизводит не тока прямой url на аттач но и в топике тоже.

    решил покопаться поподробнее в отдаваемых http-заголовках в обоих случаях (1 через xenforo, 2 прямо веб-сервером). В предыдущем посте я описал как правильно настроить заголовок Content-type, но ведь может что-то ещё помимо этого не хватает или некорректно...
    Действительно - комплект заголовков в этих двух случаях разные.
    1 - через ксенфоро:
    Код:
    Cache-control: private, max-age=0
    Connection: keep-alive
    Content-Disposition: inline; filename=
    Content-Length: 3226343
    Content-Type: video/mp4
    Date: Fri, 11 Oct 2013 08:07:46 GMT
    Etag: 1381434510
    Expires: Thu, 19 Nov 1981 08:52:00 GMT
    Last-Modified: Fri, 11 Oct 2013 08:07:46 GMT
    Server: nginx/1.5.4
    X-Content-Type-Options: nosniff
    X-Frame-Options: SAMEORIGIN
    X-Powered-By: PHP/5.5.3
    
    тут как раз видно успешная манипуляция с Content-Type из предыдущего поста...

    2 - через nginx:
    Код:
    Accept-Ranges: bytes
    Cache-Control: max-age=2592000
    Cache-Control: public
    Content-Length: 3226343
    Content-Type: video/mp4
    Date: Fri, 11 Oct 2013 07:50:40 GMT
    ETag:
    Expires: Sun, 10 Nov 2013 07:50:40 GMT
    Last-Modified: Fri, 11 Oct 2013 07:16:09 GMT
    Server: nginx/1.5.4
    
    разница видна.
    ладно думаю - щас сделаю так чтобы ксен выдавал заголовки такие же как и nginx. путём нехитрой манипуляции в файлах ксена добавил Accept-Ranges: bytes, изменил Cache-Control на "public, max-age=2592000", ETag сделал пустым и убрал заголовки X-Content-Type-Options и X-Frame-Options.
    После чего опять сравнил - вроде заголовки стали такими же шоколадными как и в случае прямой отдачи в nginx.
    Но ситуация не поменялась ни на копейку. При этом самое интересное - сохранение файла из url аттача - вполне себе работает, засада только в не-проигрывании по url аттача (и как связанное с этим - непроигрывание в мобильных браузерах даже в топике)

    Кто сможет помочь раскопать проблему? Если уж делать - так делать качественно.

    П.С. проблема также распространяется на mp3... т.е. она общая, а не в конкретных типах файлов. Думаю достаточно раскопать на одном - и поправится всё.
     
    Последнее редактирование: 11.10.2013
  7. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    Апну.
    Может у кого мысль возникнет как поправить? Ведь по сути ios и adndroid заточены нормально играть html5, а фишка не пашет...

    П.С. небольшая модификация View.php
    После добавления в него Content-type ссылка рядом с роликом приобретает свойство inline из-за чего она не "скачивает", а открывает на просмотр.
    для встраивания на играние - параметр inline - не является необходимым, поэтому в View.php можно сделать так:
    ищем строчку:
    PHP:
    $this->setDownloadFileName($attachment['filename'], true);
    и меняем её на:
    PHP:
    $this->setDownloadFileName($attachment['filename'], (($extension == 'mp3' || $extension == 'mp4') ? false true));
     
    Mirovinger нравится это.
  8. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    Раз никто не хочет помочь разобраться.. могу предложить костыль чтоб плеер не появлялся на платформах ios и android. Полный вариант куска для шаблона "attached_files":

    HTML:
                            <xen:if is="{$attachment.extension} == 'mp3' AND {$canViewAttachments}">
                                <div class="xfa-html5-player"><audio controls><source src="{xen:link attachments, $attachment}" type="audio/mpeg">HTML5 audio playback is not supported</audio></div>
                            </xen:if>
                            <xen:if is="{$attachment.extension} == 'mp4' AND {$canViewAttachments}">
                                <div class="xfa-html5-player"><video width="320" height="240" controls><source src="{xen:link attachments, $attachment}" type="video/mp4">HTML5 video playback is not supported</video></div>
                            </xen:if>
                            <script>
                                if(navigator.platform.indexOf("iPhone") != -1
                                || navigator.platform.indexOf("iPod") != -1
                                || navigator.platform.indexOf("iPad") != -1
                                || navigator.platform.indexOf("Linux arm") != -1)
                                {
                                    $(".xfa-html5-player").hide();
                                }
                            </script>
     
    Mirovinger нравится это.
  9. fly_indiz

    fly_indiz Местный

    Регистрация:
    20.08.11
    Сообщения:
    460
    Симпатии:
    357
    Версия XF:
    1.4.3
    можно ещё попробовать в view.php строчку:
    $this->_response->setHeader('Content-type', $imageTypes[$extension], true);
    заменить на:
    $this->_response->setHeader('Content-type', $imageTypes[$extension], false);
     
    Mirovinger нравится это.
  10. demon124

    demon124 Местный

    Регистрация:
    28.09.13
    Сообщения:
    86
    Симпатии:
    1
    Версия XF:
    2.2.x
    а как заставить его воспроизводить flv видео?
     

Поделиться этой страницей