Category Archives: Posts

Как показывать видео на DokuWiki

Смотри также: Как конвертировать видео в формат OGV на Убунту

На своем DokuWiki сайте видео надо показывать при помощи HTML5. Adobe Flash уже не популярен, и даже на TouTube больше не используется.

Для HTML5 годятся не все типы видео, а только формата mp4, webm, ogv или ogg.

Клипы в ДокуВики и так вставляются как обычные линки через Media Files в DW Edit и показываются как тамбнейлы.

Однако тамбнейлам нельзя задавать размеры и атрибуты. Чтоб это исправить, нам потребуется плагин html5video.

Скачиваем: html5video

Устанавливаем:

atool -x dokuwiki_plugin_html5video-master.zip
mv dokuwiki_plugin_html5video-master html5video
mv html5video /var/www/html/dokuwiki/lib/plugins

Добавляем Video MIME types к ДокуВики.

leafpad /var/www/html/dokuwiki/conf/mime.conf

и в конце файла вставляем:

webm        video/webm
ogv         video/ogg
mp4         video/mp4

Это позволит аплоудить файлы с расширениями .webm, .ogv, и .mp4.

Если потребуется, к .htacces добавляем

AddType application/webm     webm
AddType video/webm           webm
AddType application/ogg      ogv
AddType video/ogg            ogv
AddType application/mp4      mp4
AddType video/mp4            mp4

Перезагружаем Апачи:

sudo service apache2 restart

Теперь просто аплоудим видео в Медия Менеджере.

Изменяемые параметры

Размер

{{URL|ШИРИНАxВЫСОТА}}
{{:videos:video.webm|320x240}}

Атрибуты

{{URL|ШИРИНАxВЫСОТА|АТРИБУТЫ}}
  • loop
играть по кругу без конца
  • autoplay
начинать играть при загрузке страницы в браузере
{{:namespace:video.webm||loop,autoplay}}

Позиция

Лево Центр Право
{{URL| }} {{ URL| }} {{ URL|}}

Как конвертировать видео в формат OGV на Убунту

 

Как сделать навигационную панель в DokuWiki

Как установить DokuWiki на домашний веб-сервер

Если мы откроем ДокуВики, то не увидим в ней традиционной навигационной панели.

Я расскажу, как ее сделать.

Создайте в ДокуВики страницу Тopbar с различными типами линков.

  * [[wp>Interwiki link]]
  * {{:wiki:dokuwiki-128.png?nolink&16}} [[wiki:page|Internal page]]
  * [[http://example.com/|External link]]
  * {{:document.pdf|Some PDF}}
  * [[paypal>anika@selfthinker.org|Donate]]

Откройте файл

leafpad /var/www/html/dokuwiki/lib/tpl/dokuwiki/footer.html

и скопируйте туда следующее:

<div class="navbar">
    <?php tpl_include_page('navbar')?>
</div>

Откройте файл

leafpad /var/www/html/dokuwiki/conf/userall.css

и скопируйте туда следующее:

@media screen {

    /* top bar */
    .dokuwiki .navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .dokuwiki .navbar ul {
        text-align: center;
        max-width: 600px; /* change accordingly */
        margin: 0 auto;
        padding: 0;
        list-style: none;
        background-color: __background_alt__;
        border: solid __border__;
        border-width: 0 1px 1px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        box-shadow: 0 1px 3px #999;
        overflow: hidden;
    }
    .dokuwiki .navbar ul li {
        margin: 0;
        padding: 0 2px;
        display: inline-block;
        font-size: 85%;
    }
    .dokuwiki .navbar ul li a {
        color: __text__;
        display: inline-block;
        min-height: 16px; /* make sure icons are not cut off (most icons are 16x16) */
    }

    /* for IE7 */
    *+html .dokuwiki .navbar ul li,
    *+html .dokuwiki .navbar ul li a {
        display: inline;
    }

    /* changes specific for the default "dokuwiki" template,
       other templates need other changes! */
    #dokuwiki__header {
        padding-top: 3.5em;
    }
    #dokuwiki__usertools {
        top: 2em;
    }

    /* IE8 needs this in the default template */
    .dokuwiki .navbar ul li img {
        max-width: none;
    }

} /* /@media */

/* for screens less than 480px wide */
@media only screen and (max-width: 480px) {

    /* move navbar back to the bottom */
    .dokuwiki .navbar {
        position: static;
    }

    /* un-do some specific template changes */
    #dokuwiki__header {
        padding-top: .5em;
    }

} /* /@media */

@media print {

    /* don't print the navbar */
    .dokuwiki .navbar {
        display: none;
    }

} /* /@media */

Сохраните.

Мы получили аккуратную навигационную панель.