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

@stendapuss · Регистрация: 12.08.2012

Author24 — интернет-сервис помощи студентам

Сделал в программе Camtasia Studio видео, назвал "kontakt_razdel".
Она делает видео сразу в 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 вывести. Прописать просто видео в блоке делал.
Но здесь папки, файлы а не один видео файл.
Куда и как прописать надо?

Спасибо.

@UchihaSV · 07.03.2015, 11:42

Нужно использовать фиксированное позиционирование позиционирование и z-index'ы, получается на том блоке где видео нужно его фиксированным сделать и z-index самый минимальный задать например 1, остальные блоки нужно позиционировать абсолютно или относительно и z-index указать больше 1, и получится что блок с видео будет позади остальных блоков, как фон.

@stendapuss · 07.03.2015, 13:53 **[ТС]**

Да где это все прописать? Папку положу допустим в корень. Надо где то прописать, что папка там то. Или в index.php шаблона или в css ?
Потом дальше будем разбираться, чтоб отображалось правильно. С картинками проще. Прописал в css и все отображается. А здесь не могу понять как сделать.
Просто видео, брал в модуле код прописывал. А здесь папки, файлы.
Если можно по подробней.

Картинки прописываю в css:

CSS

body.site {
    border-top: 3px solid #0088cc;
    padding: 20px;
    background: url("/images/1111.gif") no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    background-color: #000000;
}

Все нормально.
С видео не могу разобраться.
Спасибо.

Добавлено через 24 минуты
Делал файл поставив галочку: MP4-Flash/HTML5 player.
Сделало папку с файлами как выше писал.

@stendapuss · 08.03.2015, 14:31 **[ТС]**

Сделал сам, проста прописал в index.php шаблона

PHP

<!-- VideoBG -->
<video autoplay loop poster="НазваниеКартинки.jpg" id="video-on-bg">
<source src="НазваниеВИДЕО.mp4" type="video/mp4">
</video>
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<style type="text/css">
video { display: block; }
video#video-on-bg {
background:url('НазваниеКартинки.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: auto;
height: auto !important;
min-width:100%;
min-height:100%;
position:fixed;
left: 0; /* прикрепить видео к левому краю или правому? (right:0;) */
bottom: 0; /* прикрепить видео к нижнему краю или верхнему (top:0;) */
z-index: -998;
}
</style>
<!-- / VideoBG -->

И модулем еще сделал

PHP

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

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

@sincorp · 03.07.2015, 13:30

stendapuss, простите, а как Вы решили проблему того, что на сотовых и планшетах видео забивает содержимое сайта? Может нужно что-то в скрипте поменять?

@stendapuss · 03.07.2015, 14:17 **[ТС]**

Я забил на видео на фоне.
Страница весит много. Оставил так для примера. На сотовых и на многих планшетах обычно отключают видео, мобильный интернет (смотрел у трех, четырех человек, отключено видео). Нет видео в обще, не чего не забивает. Зависит от модели мобилы и планшета. И каждый настраивает как хочет отображение.
А так вот что получилось, на компе нормально http://www.mani-mani-net.ru/vi... 0%BE%D0%B2
Уже и забыл про эту тему.
Вот еще просто видео на фоне.http://www.mani-mani-net.ru/%D... 0%B0%D0%BC

@sincorp · 03.07.2015, 14:48

stendapuss,
Приведу свой пример: на PC - отлично. А вот на samsunge gs 5mini сначала сайт видно, а потом виде его закрывает. Как бы сделать так, чтобы видео воспроизводилось только на PC?...

@sincorp · 03.07.2015, 14:56

hollywonder, спасибо, попробую порыться.

@stendapuss 13 / 16 / 2 Регистрация: 12.08.2012 Сообщений: 148
		1
	Как правильно сделать видео на фон HTML5 07.03.2015, 07:44. Показов 3957. Ответов 7 Метки нет (Все метки) Сделал в программе Camtasia Studio видео, назвал "kontakt_razdel". Она делает видео сразу в 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 вывести. Прописать просто видео в блоке делал. Но здесь папки, файлы а не один видео файл. Куда и как прописать надо? Спасибо. 0

@UchihaSV 285 / 234 / 113 Регистрация: 08.06.2013 Сообщений: 725
	07.03.2015, 11:42	2
	Нужно использовать фиксированное позиционирование позиционирование и z-index'ы, получается на том блоке где видео нужно его фиксированным сделать и z-index самый минимальный задать например 1, остальные блоки нужно позиционировать абсолютно или относительно и z-index указать больше 1, и получится что блок с видео будет позади остальных блоков, как фон. 0

@sincorp 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 3
	03.07.2015, 13:30	5
	stendapuss, простите, а как Вы решили проблему того, что на сотовых и планшетах видео забивает содержимое сайта? Может нужно что-то в скрипте поменять? 0

@stendapuss 13 / 16 / 2 Регистрация: 12.08.2012 Сообщений: 148
	03.07.2015, 14:17 [ТС]	6
	Я забил на видео на фоне. Страница весит много. Оставил так для примера. На сотовых и на многих планшетах обычно отключают видео, мобильный интернет (смотрел у трех, четырех человек, отключено видео). Нет видео в обще, не чего не забивает. Зависит от модели мобилы и планшета. И каждый настраивает как хочет отображение. А так вот что получилось, на компе нормально http://www.mani-mani-net.ru/vi... 0%BE%D0%B2 Уже и забыл про эту тему. Вот еще просто видео на фоне.http://www.mani-mani-net.ru/%D... 0%B0%D0%BC 0

@sincorp 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 3
	03.07.2015, 14:48	7
	stendapuss, Приведу свой пример: на PC - отлично. А вот на samsunge gs 5mini сначала сайт видно, а потом виде его закрывает. Как бы сделать так, чтобы видео воспроизводилось только на PC?... 0

@sincorp 0 / 0 / 0 Регистрация: 03.07.2015 Сообщений: 3
	03.07.2015, 14:56	8
	hollywonder, спасибо, попробую порыться. 0