2016-04-04 13 views
1

Tıklatma görüntüsünü ortadan kaldıran ve tıklattığınızda mp4 dosyasını çalan/duraklatan basit bir video/ses oynatıcı oluşturdum. Chrome'da harika çalışıyor, ancak diğer popüler tarayıcılardan hiçbiri işe yaramıyor. Konsolda herhangi bir hata bulamıyorum. Birisi neler olup bittiğini bilerek rehberlik isterim. Teşekkürler.Javascript play() yöntemi Firefox, Safari veya IE'de çalışmıyor 11

<div id="right-row-module" class="row expanded challenge-details"> 
    <div class="small-12 columns"> 
    <p class="challenge-video-title bold-text">Introduction</p> 
    <div class="challenge-video-container" style="position:relative;"> 
     <img class="video-splash-screen" src="img/video-splash-screens/1000Strong.jpg" /> 
     <img class="video-play-icon" src="img/video-splash-screens/play.svg" /> 
     <img class="video-pause-icon" src="img/video-splash-screens/pause.svg" /> 
     <video class="challenge-video"> 
     <source src="video/1000Strong.mp4" type="video/mp4"> 
     Your browser does not support the video tag. 
     </video> 
    </div> 
    </div> 
</div> 

$('.challenge-video').click(function() { 
    if (this.paused == true) { 
     $('.video-splash-screen').fadeOut('fast'); 
     $('.video-play-icon').fadeOut('fast'); 
     $('.video-pause-icon').fadeOut('fast'); 
     this.play(); 
    } else { 
    this.pause(); 
    $('.video-pause-icon').fadeIn('fast'); 
    } 
}); 

Doğrudan ilgili olmadığı için CSS'yi buraya dahil etmedim. Bunun bilincinde, Chrome'da, oynatma simgesinin, yükleme sırasında sıçrama resmi üzerinde göründüğünü unutmayın. Tıklandığında ikisi de kaybolur ve video oynatılır. Tekrar tıklayın, duraklatma düğmesi belirir ve video duraklar.

Diğer tüm tarayıcılarda, tıklamada hiçbir şey olmuyor. Yardım ettiğin için teşekkür ederim!

cevap

0

Sıçrama resminiz ve simge yer paylaşımlarınız tıkların videoya ulaşmasını engelliyor olabilir, bu yüzden $('.challenge-video').click() asla patlamaz.

yerine

Hang .challenge-video-container o olay (Ben., Muhtemelen etmemelidir. Chrome'un üzerinde çalışıyor neden şu anda kurdunuz yolunu bilmiyorum) ve büyük olasılıkla iyi iş olacak .

+0

teşekkürler, evet bu sonuca kendim geldim ama işe yaramayacağım. Ne yapıyorum hakkında yanlış düşünceler, konsolda hata bulma. 'var vidContainer = document.getElementById ('challenge-video-container'); vidContainer.click (function() { var video = document.getElementById ('meydan-video');. if (video.paused == true) { $ ('video sıçrama ekran') fadeOut ('hızlı'); $ ('. video oynatma simgesi'). fadeOut ('hızlı'); $ ('. video-pause-icon'). FadeOut ('hızlı'); video.play(); } else { video.pause(); $ ('. Video-pause-icon'). FadeIn ('hızlı'); } }); – jbabrams2

+0

Çözüldü: Burada jquery sözdizimini kullanmam gerekiyordu var vidContainer = $ ("# challenge-video-container"); ' – jbabrams2

İlgili konular