2013-12-09 14 views
5

Dokunmatik ekran aygıtlarında değiştirilebilir bir slayt gösterisi oluşturmak için SwipeView (http://cubiq.org/swipeview) kullanıyorum. Bu, resimlerle yeterince basit, ancak slayt gösterisinde de bir Vimeo videosu eklemek istiyorum. Ne yazık ki, iFrame tokatlama girişinizi kendi başına yakaladığı için (en azından bunun gerçekleştiğine inanıyorum), video oynatıcı slaydına geldiğinizde, sayfa numaralarına dokunmadığınız sürece artık bundan uzaklaşamazsınız. Bu kabul edilemez.iPhone'da Vimeo Javascript API .play() işlevi, video oynatılıncaya kadar çalışmıyor

Çözümüm, videoyu sayfada bir yere gizlemekti (ekranı kullanarak: none; veya height: 0; veya ne olursa olsun) ve slayt gösterisinde oynatılacak videoyu tetikleyen bir tıklama olayıyla bir görüntüyü kullanmak vardı. Video gizlenmiş olsa bile, oynatıldığında tam ekrana gitmeli ve oynatmalıdır (en azından iPhone'da).

Bu teknik, masaüstü tarayıcımda test ettiğimde iyi çalışıyor, ancak iPhone'da garip davranıyor. Test amaçlı olarak, video slayt gösterisinin altında görüntülenir. Sayfayı yükler ve slayda dokunursam, hiçbir şey yapmaz. Ancak, video oynatımını gerçek video oynatıcısına dokunarak çalarsam, video kapatıldıktan sonra, slayta dokunarak videoyu tekrar oynatabilirim. Temel olarak, video oynatıcıdan oynatıldığında, videoyu API aracılığıyla yürütebilirim ancak ilk kez oynatıcıyı kullanmadan oynamam.

// Append the "hidden" video player to the page 
$('.slider-container').append("<div class='mobile-video-slide'><iframe id='slideshow-player' src='//player.vimeo.com/video/81295681?title=0&byline=0&portrait=0&color=8bd4ee&api=1&player_id=slideshow-player' width='500' height='281' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>"); 

// Get the player object 
var iframe = $('#slideshow-player')[0], 
    player = $f(iframe); 

// When the video is ready 
player.addEvent('ready', function() { 
    // Add the click event to the slide 
    $('#play-video').on('click', function() { 
     // Play the video 
     player.api('play'); 

     // Don't jump the page 
     return false; 
    }); 
}); 

Ben player.ready olay düzgün çalıştığını ve resmin tıklama etkinliği düzgün çalıştığından emin testi ile tespit ettik:

İşte benim kodudur. Sorun, tümüyle player.api('play') aramasında yatıyor. Herhangi bir yardım veya bunu başarmanın alternatif bir yöntemi takdir edilecektir.

cevap

8

bu araştırılmakta ve diğer iki StackOverflow aynı konu (video players with js API and iPhones ve video players with js API and iPhones) ile soruları yanı sıra bu aynı davranış Vimeo resmi API oyun alanında meydana gerçeğini bulduktan sonra, ya da tasarım veya bir özellik ya sahip gibi görünüyor API ile bir hata.

Teori: Apple, mobil Safari'deki videoları otomatik oynatmanıza izin vermez. Belki de bu sınırlama, Apple'ın Javascript ile bir videoyu otomatik oynatmak için API kullanmasını engellemek için sonlandırılıyor. (; Diğer platformlarda Tamam görünüyor sadece iOS) bir video aramaya Eğer oynadı önce video başlamaz Error: The viewer must initiate playback first.

-

+1

Yep tetiklemek için "oynat düğmesini" tıklamak zorunda iOS izin vermez videolar, kullanıcı etkileşimi olmadan oynanacak. Hangi nedenle olursa olsun, bu etkileşim bizim API'mız aracılığıyla bir noktada kaybolur. –

+0

Hey @BradDougherty, Chrome'da ve Android için Firefox'ta (4.4.2) açıklananla aynı davranışı görüyorum, bu bilinen bir sorun mu? Bu konuda iOS için de bir çözüm yok mu? – RwwL

+0

Üzerinde film olan bir web sitesine gittiğinizi düşünün, otomatik oynatmaya atadığınız için indirme hemen başlar. Kullanıcı yurtdışında ve önümüzdeki aylarda cep telefonu faturası 25.000 dolar. –

1

Safari uzak konsol size konsolda hata gösterecektir. Başlangıçta js aracılığıyla "oynamak"

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) { 
    player.addEvent('play', function(id) { 
     player.api("seekTo", 10); 
    }); 
} else { 
    player.api("seekTo", 10); 
} 
+1

Vimeo personeli birkaç gün önce beni güncelledi ve bunu kapattığını belirtti; test etmek için iyi görünüyor. Yukarıdaki hack'ime artık gerek yok. – frumbert

0

tetiklemek için yasaklamak Bazı tarayıcı:

player.addEvent('ready', function() { 
    player.api("seekTo", 10); 
}); 

Yani böyle bir şey yapmak gerekir. Videoyu oynatmak için gerçek kullanıcı etkileşimi olmalı. Eğer neler yapabileceğini bir kaydırıcısında vimeo videoyu koymak istiyorsanız

Ancak, geçerli:

  1. videonun
  2. seti "donukluk üstünde "oynat düğmesi" ile görüntü geçerlidir: 0 "iframe'e ve" play butonuna "(iframe" allowfullscreen "olmak zorundadır) tam olarak & konumunu yapınız. Kullanıcı video oynatmayı ilk kez başlattığında
  3. .Iframe'i istediğiniz normal boyuta getirin ve vimeo player.js'nin kontrolü ele geçirmesine izin verin. Bu durumda

, kullanıcı videoyu