Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.95/104: Рейтинг темы: голосов - 104, средняя оценка - 4.95
0 / 0 / 0
Регистрация: 19.10.2014
Сообщений: 9

Изображение поверх видео

27.03.2016, 13:58. Показов 19524. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ребят. Скажите пожалуйста как более простым способом организовать наложение изображения на видео. Чтобы изначально была картинка а после нажатия на неё, появлялся плеер ютуба например или от vk.com
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
27.03.2016, 13:58
Ответы с готовыми решениями:

Изображение по центру поверх фона
Честно признаюсь: в html я полнейший нуб. Мне понадобилась страница стартового экрана для моей программы, так как писать размытие...

Прозрачное png изображение поверх <video>
Ребята, такое дело - нужно поверх видео наложить некоторое количество прозрачных png изображений. видео используется в качестве фона,...

Изображение поверх всего. Z-index не помог
Здравствуйте! Мне нужно сделать чтобы было изображение стояло поверх всего (текста, др. изображений и т.д.). Z-INDEX не помог( Что...

5
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
27.03.2016, 14:24
Georka, используйте атрибут poster
HTML5
1
2
3
4
<h3>click on picture</h3>
<video poster="http://i.**********/NDOYT4L.jpg">
  <source src="http://video.dailymail.co.uk/video/mol/2015/11/07/2829942071241294818/640x360_2829942071241294818.mp4" type="video/mp4">
</video>
JavaScript
1
2
3
4
5
6
7
8
9
10
document.querySelector("video").onclick = function(){
    if(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2){
    this.pause();
    this.controls = false;
  }
  else if(this.paused){
    this.play();
    this.controls = true;
  }
}
https://jsfiddle.net/shakalaka/j4zk0w5f/
1
0 / 0 / 0
Регистрация: 19.10.2014
Сообщений: 9
27.03.2016, 17:06  [ТС]
У меня не работает данный вариант.. Появляется аудио плеер .. и картинка остается.. а мне нужно чтобы картинка совсем исчезала и вместо неё появлялся не аудио плеер а видео плеер с Youtu ба.. Понимаете?

Добавлено через 40 секунд
Примерно что то типа этого:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
<head>
<title>Название</title>
</head>
 
<body>
<h3>click on picture</h3>
<video poster="http://i.**********/NDOYT4L.jpg">
<iframe width="356" height="200" src="https://www.youtube.com/embed/Xx417pbuhCg" frameborder="0" allowfullscreen></iframe>
</video>
</body>
<script type="text/javascript">
document.querySelector("video").onclick = function(){
    if(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2){
    this.pause();
    this.controls = false;
  }
  else if(this.paused){
    this.play();
    this.controls = true;
  }
}
</script>
</html>
Добавлено через 1 минуту
Все простым методом. без анимации. Просто картинка которая после нажатии по ней, исчезает и появляется в видеоплеер с ютуба который я сам указываю
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
27.03.2016, 17:35
Лучший ответ Сообщение было отмечено Georka как решение

Решение

HTML5
1
2
3
4
<div class="video-wrapper">
  <div class="video-overlay">click on picture</div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/qgWHsit77E4" frameborder="0" allowfullscreen></iframe>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.video-wrapper{
  position:relative;
  display:inline-block;
}
.video-overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-image:url("http://static.comicvine.com/uploads/original/11120/111201466/4876184-6766483597-27828.jpg");
  background-size:cover;
}
JavaScript
1
2
3
document.querySelector(".video-overlay").onclick = function(){
    this.style.display = "none";
}
https://jsfiddle.net/shakalaka/u2fym0he/
1
0 / 0 / 0
Регистрация: 19.10.2014
Сообщений: 9
27.03.2016, 17:40  [ТС]
Спасибо огромное... Не представляете сколько я искал это..

В общем кому нужно вот рабочее решение ребят:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
<title>Название</title>
<style type="text/css" id="vbulletin_css">
.video-wrapper{
  position:relative;
  display:inline-block;
}
.video-overlay{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-image:url("http://static.comicvine.com/uploads/original/11120/111201466/4876184-6766483597-27828.jpg");
  background-size:cover;
}
</style>
</head>
 
<body>
<div class="video-wrapper">
  <div class="video-overlay"></div>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/qgWHsit77E4" frameborder="0" allowfullscreen></iframe>
</div>
</body>
<script type="text/javascript">
document.querySelector(".video-overlay").onclick = function(){
    this.style.display = "none";
}
</script>
</html>
Спасибо Shakalaka ! Помог решить проблему ! =)
0
1 / 1 / 0
Регистрация: 05.09.2011
Сообщений: 174
21.06.2018, 14:28
Что-то сыроват немного код.
Как сделать так, чтобы плеер сразу запускался? При таком варианте, необходимо дважды нажимать на плеер, что не очень удобно. И как прописать кнопку Плэй в середине, чтоб понятно было ,что это плеер, а не просто картинка.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
21.06.2018, 14:28
Помогаю со студенческими работами здесь

Как расположить изображение поверх и по центру таблицы?
Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру...

Фоновое изображение накладывается поверх дочерних блоков
Что то Какая то трабла с фоном на сайте http://dev-working.ru/new_project_07_04_2017/ я не могу понять почему фоновое изображение залезает...

При наведении на изображение поверх появляется span
Придумал я себе такую задачу: Есть изображение. Мне нужно, чтобы при наведении на это изображение, оно затемнялось, размыливалось и...

Не отображается бордер поверх видео
Приветствую! Есть секция в которой в качестве фона выбрано видео. В секции есть блок у которого стоит бордер, он не отображается. В...

Не получается вставить изображение поверх другого изображения в email письме
Здравствуйте. Верстаю html-письмо. Есть два изображения: первое с линиями, а второе с двумя кружочками. Не получается вставить линии по...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru