2012-08-07 18 views
10

Bir videoyu pause() yöntemini kullanarak duraklıyorum. Sorun şu ki ses çalmaya devam ediyor ... Firefox'taki Javascript Konsolu'ndan da durakladım .. . hiçbir şey olmuyor. Video .ogg biçimindedir ve Chrome'da oynatılmamaktadır (desteklenmediğini düşünüyorum). Videoyu Amazon S3 üzerinde barındırdım ve mükemmel bir şekilde akışı var. Öğeyi dinamik olarak oluşturuyorum ve bilgilerini bir JSON isteğinden yüklüyorum. İşte bazı kod:Videoyu duraklatmak html5 video etiketinde ses durmuyor

function showVideo() { 
     var video = videodata; 

     var videobox = $('#videobox').first(); 
     var videoplayer = document.getElementById('videoplayer'); 

     if (video.Enabled) { 
      if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) { 
       console.log('Creating video elem'); 
       videobox.empty(); 
       videobox.append('<video id="videoplayer" preload="auto" src="' + 
        video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />'); 
       videobox.show(); 
      } 
     } else { 
      if (videoplayer != null) { 
       videoplayer.pause(); 
       console.log('Pausing video...'); 
      } 
      console.log('Deleting video elem'); 
      videobox.hide(); 
      videobox.empty(); 
     } 
    } 

Zaten daha önce de benzer bir soru haberi ... ama şimdi diğer tarayıcıları kullanıyorum, bu yüzden ben yeni bir soru oluşturmak zorunda düşündüm. İşte


çalışma kodu (kullanıcı heff sayesinde!) 'Dir

function showVideo() { 
    var video = videodata; 

    var videobox = $('#videobox').first(); 
    var videoplayer = document.getElementById('videoplayer'); 

    if (video.Enabled) { 
     if ((videoplayer.src != video.Location) || videoplayer.src == '') { 
      console.log('Playing video: ' + video.Location); 
      videoplayer.src = video.Location; 
      videoplayer.load(); 
      videoplayer.play(); 
      videobox.show(); 
     } 
    } else { 
     if (videoplayer.src != '') { 
      console.log('Pausing video...'); 
      videoplayer.pause(); 
      videoplayer.src = ''; 
      videobox.hide(); 
     } 
    } 
} 

cevap

4

Benim tahminim showVideo çağrıldığı olurdu iki kez yaklaşık iki kopya oluşturma biri tutar nasıl ve aradığınızda aramanız bile duraklatmak.

Kodunuzda, videoplayer var daha sonra eklediğiniz video etiketine atıfta bulunmaz, daha önce bu kimliğe sahip olanı işaret eder. Bu, kutuyu boşalttığınız zaman kaldırıldığını varsayar, ancak hafızaya takıl (ve ses çalmaya devam).

Sadece en iyi tahminim, ancak her iki durumda da, video öğesinin API'sini kullanarak, kutuyu boşaltmak ve etiketi yeniden oluşturmak yerine kaynak ve diğer parametreleri ayarlamak daha iyi olur.

videoplayer.src = video.Location; 
videoplayer.autoplay = true; 
// etc. 

Ayrıca,% 100 genişlik/yükseklik özellikleri için geçerli bir değer değildir. Bir alanı doldurmak için videonun gerilmesini sağlamak için CSS kullanmanız gerekir.

+0

Her seferinde öğeyi yeniden oluşturma isteğinizi takip ettim ve çalışıyor. Ancak, yöntemin iki kez aynı blok içeriye girip girmediğini kontrol ettim: hayır. Bence bu bir hata .. btw, biriyle aynı sorunu yaşıyorsanız, çalışma kodunu yayınladım. ;-) –

+0

Harika! Yardım ettiğine sevindim. – heff

8

Merhaba çocuklar, gerçekten harika kodlayıcılarla çözülen benzer bir sorunla karşılaştık. Bu gönderiye göz atın. Bu harika bir kullanım olabilir. HTML5 Video Controls do not work

html özelliğini kullanıyorsanız:

<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls width="100%"> 
 
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">   
 
</video>

autoplay çıkarın.

Sonra yerine autoplay kullanmak jquery kullanın: html5 video playing twice (audio doubled) with JQuery .append()

ve

Auto-play an HTML5 video on Dom Load using jQuery

: kaynağına gelince

$(document).ready(function() { $("#bigvid3").get(0).play(); });
birden çok yer vardır
+4

Bu, teorik olarak, bu sorunun cevabının önemli kısımlarını içerecek şekilde [// meta.stackoverflow.com/q/8259] [tercih edilir] ve referans için bağlantı sağlayarak bu soruya teorik olarak cevap verebilir. –

+3

Her kim bana -1 güzel iş verdi. Cevabımı daha eksiksiz bir yanıtı yansıtmak için sabitledim. Ben sadece yardım etmeye çalışıyorum. –

+4

-1s'yi unutun, Gönderinizi düzenlediniz ve hoş bir cevap yazdınız. Zaman akışları olarak daha fazla + 1'ler alırsınız. Haters Nefret edecek :) –