• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML i CSS - wyświetlanie elementów na filmiku <video>

Object Storage Arubacloud
0 głosów
186 wizyt
pytanie zadane 12 sierpnia 2020 w HTML i CSS przez kingkushlee Gaduła (3,960 p.)

Witam, mam taki kod:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Robienie zdjec</title>
  <style>
  .videoBg{
        position:absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    
    .index-100 {
      z-index: 100!important;
    }

    @media (min-aspect-ratio: 16/9) {
      .videoBg{
       
        width: 100%;
        height: auto;
      }
    }
    @media (max-aspect-ratio: 16/9) {
      .videoBg {
       
       width:100%; 
        height: 100%;

        padding:0
      }
    }
    body{
      border:solid red;
    }
    video{
      object-fit:fill

    }
  </style>
</head>
<body>
  
	
  <video id="video" style="z-index: 99;" class="videoBg" autoplay></video>
  <button class="index-100">Przycisk</button>
  <img src="" style="z-index: 102;" id="image">
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
	<script>
		//DO WYCIECIA
    
		const constraints = {
  			video: true,
        "video": {
          "facingMode": 
          { "ideal": "environment" }
        }
		};
		
		var android = navigator.userAgent.toLowerCase().indexOf("android") > -1;

		if (android) {
			const video = document.querySelector("#video");
			
			navigator.mediaDevices.getUserMedia(constraints).
  			then((stream) => {video.srcObject = stream});
      
      $(document).ready(function() {
        $(video).click(function() {
          
        });
      });
      
		}

		//DO WYCIECIA
	</script>
	
</body>
</html>

Chciałbym zrobić tak, aby przycisk pokazywał się na filmiku (przycisk do robienia zdjęć). Jak to zrobić? Z góry dzięki za pomoc.

Edit: Sorry, że wszystko w 1 pliku, ale to tylko demo, potem to uporządkuję.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
2 odpowiedzi 352 wizyt
pytanie zadane 21 maja 2021 w HTML i CSS przez Piotrek G Nowicjusz (160 p.)
+1 głos
2 odpowiedzi 312 wizyt
pytanie zadane 1 lutego 2021 w HTML i CSS przez Heoth Początkujący (300 p.)
+1 głos
1 odpowiedź 484 wizyt
pytanie zadane 30 października 2020 w HTML i CSS przez seba7013 Nowicjusz (130 p.)

92,755 zapytań

141,676 odpowiedzi

320,412 komentarzy

62,100 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...