Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 50

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

30.10.2016, 16:52. Показов 1619. Ответов 9
Метки нет (Все метки)

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

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

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

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


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

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

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

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

Добавлено через 7 минут
CSS
1
source.videofile {display:none}
- видео не выключает (хотя обещали что "вынимает из потока так как будто нету"
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.10.2016, 16:52
Ответы с готовыми решениями:

Тег video: старт по клику на другом блоке
Как по клику на кнопке, находящийся за пределом тега video стартануть видео в этом теге?

Тег audio в андроид браузерах
Почему звук начинает воспроизводиться в теле функции только после нажатия на кнопку, как исправить? <!DOCTYPE html> ...

Тег video
Прочитал что в хтмл5 появился новый тег video. Попробовал заюзать, не показывает видео. В конфиге апача вставил такие строки. ...

9
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
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);
0
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 50
30.10.2016, 21:31  [ТС]
То есть css бессильно иначе как погасить видео и включить бэкграунд?
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
30.10.2016, 21:37
Другие варианты не придумываются. Даже если изначально выставить video display:none, то видео будет проигрываться.
0
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 50
31.10.2016, 00:23  [ТС]
если вставить video display none - видео проигрываться не будет, но и постер не покажет.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
31.10.2016, 00:29
Цитата Сообщение от Noobichek Посмотреть сообщение
видео проигрываться не будет
Будет. В общем, стилями вы не измените событие video. А в скрипте вы можете использовать .pause() и .play()
0
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
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
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>
Песочница. Звук только включите.
0
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 50
31.10.2016, 14:21  [ТС]
Товарищ mrtoxas Сан,

Так даже в вашей песочнице видео не проигрывается. Но стоит признать звук идет.
Убираете "дисплей:none" и видео запускается.
0
Ренегат
Эксперт HTML/CSS
 Аватар для BANO
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
31.10.2016, 19:33
Видео он всё равно будет читать, будет оно показываться или не будет, он будет тратить ресурсы чтобы декодировать. Звук будет идти, трафик тратиться. Этого с самим video не избежать. Есть другой вариант. Если не нужно изображение, то можно грузить только звук. Я имею в виду использовать audio.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
31.10.2016, 19:33
Помогаю со студенческими работами здесь

Тег video и iPhone
Нужно вставить через HTML-тег video видеоролик, который будет показываться на максимально возможном количестве устройств. Поскольку сайт на...

Не работает тег <video> в IE 11
Здравствуйте! Не работает тег &lt;video&gt; в IE 11, белый экран, поиск в гугле ничего не дал. Печаль.

HTML 5 тег Video
Можно ли как-нибудь узнать текущее месторасположение бегунка в плеере? и можно ли как-нибудь начать воспроизведение видео с определенного...

HTML тег video
Можно ли в теге video использовать ссылку на видео со стороннего ресурса (например, DropBox)? ...

Почему дергается тег <video>
Здравствуйте, подскажите почему дергается тег &lt;video&gt; в Mozilla? В Chrome все нормально. Пример


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Установка 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. Задача: при создании документов установить период списания автоматически. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru