Стилизация кнопки тега video для воспроизведения

@Orion123 · Регистрация: 07.04.2016

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

можно ли сделать в html5 в тэгах video, такую кнопочку как в youtube посередине видео, для воспроизведения и паузы?

@maketta · 18.10.2016, 17:44

Добрый день!Это надо подключать видео напрямую с YouTube, внизу у каждого видео есть HTML-код, скопируйте и вставьте в ваш документ!

@mrtoxas · 18.10.2016, 18:20

CSS
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
.video {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
 
.paused:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7)
}
 
.paused:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #fff;
  z-index: 2;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
}

HTML5
1
2
3
<div id="video-block" class="video paused"> 
  <video id="vid" src=""></video>  
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var videoBlock = document.getElementById('video-block'),
  vid = document.getElementById('vid');
videoBlock.addEventListener('click', function() {
  if (vid.paused) {
    vid.play();
    videoBlock.classList.remove('paused');
  } else {
    vid.pause();
    videoBlock.classList.add('paused');
  };
})

@eun · 19.11.2016, 10:09

У меня вышеприведённый код не работает! В чём причина?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	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. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@Orion123 0 / 0 / 0 Регистрация: 07.04.2016 Сообщений: 17

	Стилизация кнопки тега video для воспроизведения 18.10.2016, 16:16. Показов 10228. Ответов 3 Метки нет (Все метки) можно ли сделать в html5 в тэгах video, такую кнопочку как в youtube посередине видео, для воспроизведения и паузы? 0

@maketta 16 / 16 / 9 Регистрация: 02.04.2016 Сообщений: 143
	18.10.2016, 17:44
	Добрый день!Это надо подключать видео напрямую с YouTube, внизу у каждого видео есть HTML-код, скопируйте и вставьте в ваш документ! 0

@eun 2 / 2 / 0 Регистрация: 27.01.2013 Сообщений: 106
	19.11.2016, 10:09
	У меня вышеприведённый код не работает! В чём причина? 0