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ő:
  1. events: {  
  2.     show: function(event, api) {  
  3.         ...  
  4.     },  
  5.     hide: function(event, api) {  
  6.         $('#player_box video').get(0).pause();   
  7.     }  
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.
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>Video teszt</title>  
  6.   <style type="text/css">  
  7.     .video {  
  8.       position: relative;  
  9.       width: 480px;  
  10.     }  
  11.     .video img {  
  12.       position: absolute;  
  13.       z-index: 1;  
  14.       top: 0;  
  15.       left: 0;  
  16.     }  
  17.     .video:hover img {  
  18.       display: none;  
  19.     }  
  20.   </style>  
  21. </head>  
  22. <body>  
  23.   <div class="video">  
  24.     <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" />  
  25.     <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>  
  26.   </div>  
  27.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
  28.   <script type="text/javascript">  
  29.     $('.video').hover(  
  30.       function () {  
  31.         var video = $(this).find('video');  
  32.         if (video.length) {  
  33.           video[0].play();  
  34.         }  
  35.       },  
  36.       function () {  
  37.         var video = $(this).find('video');  
  38.         if (video.length) {  
  39.           video[0].pause();  
  40.         }  
  41.       }  
  42.     )  
  43.   </script>  
  44. </body>  
  45. </html>