ugrás a tartalomhoz

HTML5 Video - Lejátszás megállítása

bajzarpa · 2012. Május. 30. (Sze), 20.41
Sziasztok!

A következő témában szeretném segítségetek kérni:

Egy HTML5 videó megjelenítése során ütköztem olyan problémába, hogy nem akar megállni a videó. A videó a következőképp van beágyazva.

Alap esetben a layout-on nincsen ott a videó, csak egy preview kép, ami fölé ha viszem az egeret, akkor egy absolute-val pozicionált divben indul el a videó automatikus lejátszása.
Értelemszerűen ha kilépünk a div-ből, akkor -mint egy lenyílómenünél- a videót befogó doboz eltűnik és, a videó megáll. Megj.: Több videó van egy oldalon, és akárhányból húzom ki a kurzort, mind megy tovább. Firebug hibát nem ír.

Az utolsó fázis sajnos nem működik.
A javascript felépítése a következő:

events: {
	show: function(event, api) {
		...
	},
	hide: function(event, api) {
		$('#player_box video').get(0).pause(); 
	}
A fenti kód hide része működteti a videó megjelenítését/eltüntetését, első esetben a div-ből való kilépéskor működik a pause(); viszont ha még egyszer elindítom, már nem áll meg.
Gondoltam akkor megkerülöm ezt a pause(); bugot, és használom helyette a remove(); funkciót, ami legnagyobb meglepetésemre, ugyanúgy viselkedett, mint a pause();. Pedig második esetben mikor fölé viszem az egeret, akkor a firebug mutatja szépen nekem, hogy kitörölte a video tag-et, de a háttérben mégis megy.

Remélem sikerült érthetően fogalmaznom.
Segítségeteket, ötleteiteket előre is köszönöm!
‹ Ablak bezár gomb beillesztése hogyan? Input létrehozás radio gomb választásra ›
 ■
1

Meghívódik?

Poetro · 2012. Május. 31. (Cs), 06.26
A fenti kód biztosan meghívódik minden esetben, amikor kell? És meg is találja a megfelelő videó elemet? Ezt érdemes lenne letesztelni, mert szerintem ott lehet a hiba.
2

Ellenőriztem

bajzarpa · 2012. Május. 31. (Cs), 08.03
Konzolba logoltattam ki a render és hide esemenyéket, és a sokadik mouseOut esemény után is lefut a kód
3

Működik

Poetro · 2012. Május. 31. (Cs), 08.44
Nálam működik. Legalábbis csináltam egy minimális tesztet, és az tökéletesen működik.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Video teszt</title>
  <style type="text/css">
    .video {
      position: relative;
      width: 480px;
    }
    .video img {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
    }
    .video:hover img {
      display: none;
    }
  </style>
</head>
<body>
  <div class="video">
    <img width="480" height="271" src="http://cdnbakmi.kaltura.com/p/243342/sp/24334200/thumbnail/entry_id/0_ntovmku5/version/100004/height/480" alt="Sita Sings the Blues" />
    <video width="480" height="271" src="http://cdnapi.kaltura.com/p/243342/sp/24334200/playManifest/entryId/0_ntovmku5/flavorId/0_yiep8zj7/format/url/protocol/http/a.webm?ks=NWMwZDQ1NzIxZTM0YTEwMTJkMDM3NjYzNzkyMjhmNjczOGJiMTFhNXwyNDMzNDI7MjQzMzQyOzEzMzg1MzE3MDk7MDsxMzM4NDQ1MzA5LjIyOTE7MDt2aWV3Oio7Ow==&amp;referrer=aHR0cDovL2h0bWw1dmlkZW8ub3JnLw=="></video>
  </div>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    $('.video').hover(
      function () {
        var video = $(this).find('video');
        if (video.length) {
          video[0].play();
        }
      },
      function () {
        var video = $(this).find('video');
        if (video.length) {
          video[0].pause();
        }
      }
    )
  </script>
</body>
</html>