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

Discussion in 'Внешний вид, шаблоны, графика' started by stendapuss, Mar 6, 2015.

  1. Offline

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

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    Сделал в программе 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 вывести. Прописать просто видео в блоке делал.
    Но здесь папки, файлы а не один видео файл.
    Куда и как прописать надо?

    Спасибо.
     
    Last edited: Mar 7, 2015
  2.  
  3. Offline

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

    Joined:
    Sep 9, 2011
    Messages:
    324
    Likes Received:
    4
    Gender:
    Male
    Сделал сам, проста прописал в 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>

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

    На фоне почему то видео дергается. Может подскажет кто причину.
     
    Last edited: Mar 9, 2015

Share This Page

Loading...