Вопрос Как сделать видео на фон HTML5

Тема в разделе "Внешний вид, шаблоны, графика", создана пользователем stendapuss, 06.03.2015.

  1. Offline

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

    Регистрация:
    09.09.2011
    Сообщения:
    278
    Симпатии:
    3
    Пол:
    Мужской
    Сделал в программе Camtasia Studio видео, назвал "kontakt_razdel".
    Делал поставив галочку на: MP4-Flash/HTML5 player
    Она делает видео сразу в HTML5.
    Получилась папка kontakt_razdel, в ней :
    Папка scripts со скриптами,
    папка skins,
    видео: kontakt_razdel.mp4

    файлы:
    kontakt_razdel_config.xml
    kontakt_razdel_controller.swf
    kontakt_razdel.html
    kontakt_razdel_embed.css
    kontakt_razdel_First_Frame.png
    kontakt_razdel_player.html
    playerProductInstall.swf

    Хочу на фон сайта сделать видео. Куда и как прописать надо?
    Просто модулем выводил видео для просмотра, без проблем.
    А на фон не могу понять как в HTML5 вывести. Прописать просто видео в блоке делал.
    Но здесь папки, файлы а не один видео файл.
    Куда и как прописать надо?

    Спасибо.
     
    Последнее редактирование: 07.03.2015
  2.  
  3. Offline

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

    Регистрация:
    09.09.2011
    Сообщения:
    278
    Симпатии:
    3
    Пол:
    Мужской
    Сделал сам, проста прописал в index.php шаблона
    Код (PHP):
    1. <!-- VideoBG -->
    2. <video autoplay loop poster="НазваниеКартинки.jpg" id="video-on-bg">
    3. <source src="НазваниеВИДЕО.mp4" type="video/mp4">
    4. </video>
    5. <!--[if lt IE 9]>
    6. <script>
    7. document.createElement('video');
    8. </script>
    9. <![endif]-->
    10. <style type="text/css">
    11. video { display: block; }
    12. video#video-on-bg {
    13. background:url('НазваниеКартинки.jpg') no-repeat center center fixed;
    14. -webkit-background-size: cover;
    15. -moz-background-size: cover;
    16. -ms-background-size: cover;
    17. -o-background-size: cover;
    18. background-size: cover;
    19. width: auto;
    20. height: auto !important;
    21. min-width:100%;
    22. min-height:100%;
    23. position:fixed;
    24. left: 0; /* прикрепить видео к левому краю или правому? (right:0;) */
    25. bottom: 0; /* прикрепить видео к нижнему краю или верхнему (top:0;) */
    26. z-index: -998;
    27. }
    28. </style>
    29. <!-- / VideoBG -->

    И модулем еще сделал
    Код (PHP):
    1. <video width="100%" height="10%" autoplay loop>
    2.    <source src="video/1.mp4" type='video/ogg; codecs="theora, vorbis"'>
    3.    <source src="video/1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    4.    <source src="video/1.mp4" type='video/webm; codecs="vp8, vorbis"'>
    5.    Тег video не поддерживается вашим браузером.
    6.   </video>

    на фиксированном шаблоне все сделал. два видео. Один на фон второй типа шапка.
    Оригинально получилось. даже не думал что так будет.

    На фоне почему то видео дергается. Может подскажет кто причину.
     
    Последнее редактирование: 09.03.2015

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

Загрузка...