Видеофон

Тема в разделе "Обо всём", создана пользователем forbs, 5 июл 2015.

  1. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Случаем ни кто ещё не заморачивался , вставкой видеофона на сайт?
     
  2. Ravilr

    Ravilr Специалист

    Сообщения:
    3.274
    Симпатии:
    898
    так и заморачиваться нечего ))
    В интернете по запросу video background css находится множество статей.
    Так же по запросу видеофон для сайта тоже есть что почитать.
    Если с конвертацией файлов не охото заморачиваться, добавляем в запрос поиска слово ютубе
    Все вроде достаточно просто...
     
  3. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    В html вставил код и в css видео залил на хостинг и итог черный фон за место видеофона? Видео на хостинге прописалось как *тхт. Или мне надо видео на ютуб сначало выложить, а после в футере в коде ссылками выставить, чтобы видеофон заработал? Правильно??? Либо в корень сайта надо вставить видео плеер какой-нибудь?
     
    Последнее редактирование: 7 июл 2015
  4. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    на ютубе загружайте, так проще.
     
  5. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Вообщем перепробывал что мог, на локалке проигрывает , а на опенкарте не хочет.:( С ютуба делал, тоже ноль.
     
    Последнее редактирование: 7 июл 2015
  6. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Скорей всего на опенкарте не работает видеофон, жаль.
     
  7. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    все работает. Видимо что то неправильно сделали. Конфликт библиотек итд. Если напишите по шагам что сделали, может и будет решение. А так уповать на случай.. не выйдет.
     
  8. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Вставил в хеадер.тпл вот этот код:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Video</title>
    </head>
    <body>
    <video id="video_bg" autoplay="autoplay" loop="loop">
    <source src="video/background.mp4" type="video/mp4"></source>
    <source src="video/background.webm" type="video/webm"></source>
    </video>
    </body>
    </html>

    В css вот такой:

    body {
    /* Задаем фон для нашей страницы в виде обычного изображения.
    Это нужно на случай, есть браузер не смог воспроизвести видео из-за того,
    что он не поддерживает тег video. */
    background: fixed url(images/video_bg.jpg) no-repeat;
    background-size: cover;
    }

    #video_bg {
    /* Делаем так, чтобы видеофон занимал фиксированное положение. */
    position: fixed;
    top: 0;
    left: 0;
    /* Располагаем наш фон под всем содержимым на странице.
    Для этого используем отрицательный z-index. */
    z-index: -1000;
    /* Растягиваем видео так, чтобы не было видно черных полос и
    чтобы независимо от разрешения экрана видеофон занимал все рабочее пространство. */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    }
    @media (min-aspect-ratio: 16/9) {
    #video_bg {
    height: 300%;
    top: -100%;
    }
    }

    @media (max-aspect-ratio: 16/9) {
    #video_bg {
    width: 300%;
    left: -100%;
    }
    }

    @supports (object-fit: cover) {
    #video_bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    }

    Два видеофона есть скаченных mp4 , webm.
     
  9. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    с путями что то напутали видимо. Где лежат файлы? Смотрели в фаербаге на закладке сеть, находит ваши видео файлы??
    Только не пишите "я не знаю как". Вам уже много раз про это писали, что нужно почитать.
     
  10. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    неа ненаходит, скорей хостинг не видит закаченные на него видео (прописались как тхт), надо как я понял ссылками выставлять.
     
  11. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Да нет, на опенкарт не поставить видеофон! ссори конечно...
     
  12. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    глупости. Для видеофона без разницы какой движок.
    Если у вас проблемы с путями к файлам, пользуйтесь примерами с видеофоном с ютубе.
     
  13. tsap

    tsap Продвинутый пользователь

    Сообщения:
    230
    Симпатии:
    131
    здесь прямое доказательство того что видео работает на OC, поковыряйте может придет вдохновение
     
  14. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    :mad: замучился:confused: но без него не мил свет уже :(
     
  15. tsap

    tsap Продвинутый пользователь

    Сообщения:
    230
    Симпатии:
    131
    может плюнуть, и поставить анимированную гифку?
     
  16. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Незнаю уже что лучше, но вот видеофон сильно хочу, но не получается. Вообщем не судьба:cool:, ладно.
     
  17. Ален

    Ален Эксперт

    Сообщения:
    2.055
    Симпатии:
    635
    Ну емаё... это похоже на нытьё, уж извините. Когда в интернете тысяча инструкций, вы не по одной не можете/нехотите сделать?
    Вы даже не постарались код как положено оформить в вопросе, какое тут вообще старание???

    Я вот например с первой попавшейся сделал.
    http://smartlanding.biz/video-na-fon-saita.html
    http://www.seanmccambridge.com/tubular/

    Вставил в header.tpl строки
    Код:
    <script src="catalog/view/javascript/jquery/jquery.tubula/js/jquery.tubular.1.0.js" type="text/javascript"></script>
    <script src="catalog/view/javascript/jquery/jquery.tubula/js/index.js" type="text/javascript"></script>
    Закинул скрипт в папку \catalog\view\javascript\jquery

    В index.js поставил ид своего видео и контейнера

    Работает!
     

    Вложения:

    forbs и Romans нравится это.
  18. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Всё заработало, а скрипт я ставил всё в стайлшит. Вам респект, благодарю... Вот бы самому научиться кодироваться))?
     
  19. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    Подскажите, чтобы на смартфонах которые не поддерживают видеофон , надо ведь фон в виде картинки вставить. Это путь в stylesheet.css:
    body {
    background: fixed url(images/video_bg.jpg) no-repeat;
    background-size: cover;
    } ?
     
  20. forbs

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

    Сообщения:
    112
    Симпатии:
    1
    На телефон картинку надо вставить.