Тег Video и Андроид

@Noobichek · Регистрация: 19.07.2016

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

Ребят - делаю сайт под видеооператора.
Клиент хочет фоном видео.
На андроиде выскакивает запрос на воспроизведенние и размазывает весь сайт. Как я понимаю от этого не уйти. Вывод - на андроиде видео надо отключать.

собственно вопрос - можно ли средствами HTML и css отключить именно воспроизведение видеою.

вариант понятен:

CSS
1
video {display:none;} body {background (url:....);}

А есть ли возможность именно запустить постер (атрибут тега video)? То есть просто отключить воспроизведение видео, оставив атрибут poster живым?

Добавлено через 6 минут
Пока думал - появился вопрос - который возможно и есть ответом

source {display:none} не работает.

А если задать source класс - выключит ли он видео?

Добавлено через 7 минут

CSS
1
source.videofile {display:none}

- видео не выключает (хотя обещали что "вынимает из потока так как будто нету"

@mrtoxas · 30.10.2016, 21:25

Как-то так

HTML5
1
<video id="vid" autoplay src="...mp4"></video>

JavaScript
1
2
3
4
5
6
7
8
var mql = window.matchMedia("screen and (max-width: 765px)"),
 video = document.getElementById('vid'),
 videoSrc = video.src;
function mediaqueryresponse(mql){
 video.src=(mql.matches)?'':video.src=videoSrc;
}
mediaqueryresponse(mql);
mql.addListener(mediaqueryresponse);

@Noobichek · 30.10.2016, 21:31 **[ТС]**

То есть css бессильно иначе как погасить видео и включить бэкграунд?

@mrtoxas · 30.10.2016, 21:37

Другие варианты не придумываются. Даже если изначально выставить video display:none, то видео будет проигрываться.

@Noobichek · 31.10.2016, 00:23 **[ТС]**

если вставить video display none - видео проигрываться не будет, но и постер не покажет.

@mrtoxas · 31.10.2016, 00:29

Сообщение от Noobichek

видео проигрываться не будет

Будет. В общем, стилями вы не измените событие video. А в скрипте вы можете использовать .pause() и .play()

@Noobichek · 31.10.2016, 02:34 **[ТС]**

MrToxas - если тагу видео присвоить id - то дисплей нон его очень даже выключает. Могу если надо скинуть пример.
А задумка была в том что по странному стечению обстоятельств mobile safary корректно фиксирует и видео и последующий постер, но отказывается фиксировать background.

Было еще решение задать липовую ссылку source под media. Тогда не найдя видео, при условии media он запустит только постер. Но это уж слишком пахнет костылями.

В результате я решил вопрос именно "имитация fixed" без "fixed" отдельным дивом с бэкграундом, предварительно погасив видео через дисплей: none.

Добавлено через 7 минут
сорь. поправлюсь. mobile safari не единственный мобильный браузер которые отказывается принимать fixed. Я просто на всем тестил и обнаружил что и на safari схожая проблема.

@mrtoxas · 31.10.2016, 12:53

Сообщение от Noobichek

Могу если надо скинуть пример

Скиньте, интересно.

HTML5
1
2
3
4
5
<video id="video1" autoplay style="display:none" controls="">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

Песочница. Звук только включите.

@Noobichek · 31.10.2016, 14:21 **[ТС]**

Товарищ mrtoxas Сан,

Так даже в вашей песочнице видео не проигрывается. Но стоит признать звук идет.
Убираете "дисплей:none" и видео запускается.

@BANO · 31.10.2016, 19:33

Видео он всё равно будет читать, будет оно показываться или не будет, он будет тратить ресурсы чтобы декодировать. Звук будет идти, трафик тратиться. Этого с самим video не избежать. Есть другой вариант. Если не нужно изображение, то можно грузить только звук. Я имею в виду использовать audio.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Noobichek 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 50
	30.10.2016, 21:31 [ТС]
	То есть css бессильно иначе как погасить видео и включить бэкграунд? 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	30.10.2016, 21:37
	Другие варианты не придумываются. Даже если изначально выставить video display:none, то видео будет проигрываться. 0

@Noobichek 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 50
	31.10.2016, 00:23 [ТС]
	если вставить video display none - видео проигрываться не будет, но и постер не покажет. 0

@Noobichek 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 50
	31.10.2016, 02:34 [ТС]
	MrToxas - если тагу видео присвоить id - то дисплей нон его очень даже выключает. Могу если надо скинуть пример. А задумка была в том что по странному стечению обстоятельств mobile safary корректно фиксирует и видео и последующий постер, но отказывается фиксировать background. Было еще решение задать липовую ссылку source под media. Тогда не найдя видео, при условии media он запустит только постер. Но это уж слишком пахнет костылями. В результате я решил вопрос именно "имитация fixed" без "fixed" отдельным дивом с бэкграундом, предварительно погасив видео через дисплей: none. Добавлено через 7 минут сорь. поправлюсь. mobile safari не единственный мобильный браузер которые отказывается принимать fixed. Я просто на всем тестил и обнаружил что и на safari схожая проблема. 0

@Noobichek 0 / 0 / 0 Регистрация: 19.07.2016 Сообщений: 50
	31.10.2016, 14:21 [ТС]
	Товарищ mrtoxas Сан, Так даже в вашей песочнице видео не проигрывается. Но стоит признать звук идет. Убираете "дисплей:none" и видео запускается. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	31.10.2016, 19:33
	Видео он всё равно будет читать, будет оно показываться или не будет, он будет тратить ресурсы чтобы декодировать. Звук будет идти, трафик тратиться. Этого с самим `video` не избежать. Есть другой вариант. Если не нужно изображение, то можно грузить только звук. Я имею в виду использовать `audio`. 1