[HTML][JavaScript]Miniaturka youtube Opcje

[Puchatek320]

Cześć,
może ktoś wyjaśnić w jaki sposób jest realizowanie zamiana diva w youtube?
Dokładnie chodzi o to że mamy miniaturkę i jak najdziemy to zmienia się w film może ktoś wyjaśnić w jaki sposób można to zrealizować?

np. w takim przypadku?

[HTML] pobierz, plaintext 
 
          <div id="test1">
              <div id="div1">
              ?<picture onmouseover="normalImg(this)" id="divm">
                <img src="thumb.png" alt="..." class="img-thumbnail">
              </picture>
              </div>
 
              <div id="div2">
              <video onmouseover="bigImg(this)" >
                <source src="1.mp4">
              </video>
              </div>
          </div>
 
[HTML] pobierz, plaintext 

chodzi dokładnie o to aby w miejscu diva1 wyświetlił się div2

i jeszcze pytanie w jaki sposób można pobrać id jeśli będzie to wyrzucane z bazy danych np. x razy?

Ten post edytował Puchatek320 24.04.2020, 22:03:14

[trueblue]

Tu jest podobne rozwiązanie: https://kawalekkodu.pl/na-lenia-i-na-podgla...sectionobserver
Zmień tylko obsługę na hover.

[Puchatek320]

Źle się zrozumieliśmy chodzi mi o to:


mam diva test1 i w nim są zawarte 2 divy div1 i div 2 chciałbym aby div 1 miałby wyświetlać obrazek a 2 video chciałbym aby div 1 zmieniał sie w div 2 tak aby po najechaniu zamiast obrazka pojawiało się wideo a nie obrazek.

niby można użyć funkcji poster dla video ale nie wiem w jaki sposób po wyjechaniu z video pokazał się znów poster video

[PHP] pobierz, plaintext 
 
<script>
$(document).ready(function() {
  $(".myvideos").on("mouseover", function(event) {
    this.play();
 
  }).on('mouseout', function(event) {
    this.pause();
 
  });
})
</script>
 
 <div id="test1">
 
              <div id="div1">
              <video height="500" poster="1.jpg" class="myvideos">
                <source src="1.mp4">
              </video>
              </div>
          </div>
 
[PHP] pobierz, plaintext 

Ten post edytował Puchatek320 25.04.2020, 16:32:11

[trueblue]

Pokazałem Ci metodę zmiany miniatury YT na video YT, czyli dokładnie to co chciałeś:

w jaki sposób jest realizowanie zamiana diva w youtube?
Dokładnie chodzi o to że mamy miniaturkę i jak najdziemy to zmienia się w film

Tyle, że w przykładzie jest to zrealizowane w kontekście innego zdarzenia na stronie.

Skoro masz dwa divy: div1 i div2, to w jakim celu div1 ma się zmieniać w div2 po najechaniu? Będziesz miał wtedy 2 divy z video.

[Puchatek320]

Chyba łatwiej się nie można tego zrobić? Wyświetla się poster po najechaniu zaczyna się odtwarzanie filmu a po wyjechaniu myszka pojawia się znów poster.

[HTML] pobierz, plaintext 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<div class="video-wrapper col-sm-3">
  <video width="332" height="188" poster="thumb1.png" loop  preload="metadata">
    <source src="../filmy/short/88.mp4" width="332" height="188" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>
 
 
<script>
var figure = $(".video-wrapper").hover( hoverVideo, hideVideo );
 
function hoverVideo(e) {  
$('video', this).get(0).play(); 
}
 
function hideVideo(e) {
$('video', this).get(0).load(); 
}
</script>
 
[HTML] pobierz, plaintext 

[trueblue]

Wystarczy 1 <div> z elementem <video>. W nim umieść dodatkowy element, który będzie umieszczony na wierzchu wideo i będzie zawierał poster.
Po najechaniu na główny <div> schowaj poster, włącz wideo. Po zjechaniu pauzuj wideo, pokaż poster.