在iPhone上，Vimeo Javascript API .play（）函數在視頻播放前不起作用

我使用SwipeView（http://cubiq.org/swipeview）在觸摸屏設備上創建可滑動的幻燈片。這對圖像來說很簡單，但我希望在幻燈片中包含Vimeo視頻。不幸的是，因爲iFrame捕獲自己的滑動輸入（我相信至少這是發生了什麼），一旦你到達視頻播放器幻燈片，你不能再從它滑動，除非你點擊分頁。這是不可接受的。在iPhone上，Vimeo Javascript API .play（）函數在視頻播放前不起作用

我的解決方案是隱藏視頻中某個地方的視頻（使用display：none;或者height：0;或者任何其他作品），並在幻燈片中使用觸發視頻播放的點擊事件中的圖像。即使視頻是隱藏的，播放時也應該全屏播放（至少在iPhone上播放）。

當我在我的桌面瀏覽器上測試它時，此技術工作正常，但在iPhone上表現異常。出於測試目的，視頻正在幻燈片下顯示。如果我加載頁面並點擊幻燈片，它什麼都不做。但是，如果我通過點擊實際視頻播放器播放視頻，則一旦視頻關閉，我可以通過點擊幻燈片再次播放視頻。基本上，一旦視頻通過播放器播放，我可以通過API播放視頻，但不是一次首先使用播放器。

這裏是我的代碼：

// 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; 
    }); 
});

我已經通過測試，該player.ready事件是否正常工作，並在圖像的click事件工作正常確定。問題似乎完全在於撥打player.api('play')。任何幫助，或完成此替代方法將不勝感激。

來源

2013-12-09 Ryan Giglio

調查這進一步，並尋找具有相同的問題（video players with js API and iPhones和video players with js API and iPhones）其他兩個StackOverflow的問題，以及爲在Vimeo的官方API遊樂場發生此相同的行爲的事實後，似乎無論是它的可能是設計或功能API的錯誤。

理論：Apple不允許您在移動版Safari中自動播放視頻。也許這個限制是爲了防止你使用API來自動播放帶有Javascript的視頻而被強加給Apple的。（;其他平臺似乎OK僅適用於iOS）如果你想尋找一個視頻Error: The viewer must initiate playback first.

它的播放之前，視頻將無法啓動 -

來源

2013-12-10 15:19:07

沒錯，的iOS不允許錄像。無論出於何種原因，通過我們的API，該交互在某個時候會丟失。 –

嘿@BradDougherty，我看到與Android和Chrome瀏覽器（4.4.2）中描述的內容完全相同的行爲，這是一個已知問題嗎？在iOS上沒有解決這個問題呢？ – RwwL

想象一下，有一部電影上的網站，下載立即開始，因爲您將其分配給自動播放。用戶在海外，下個月他們的手機賬單是25,000美元。 – 2016-03-25 16:05:26

Safari瀏覽器遠程控制檯會顯示您的控制檯上的錯誤。

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

所以，你需要做的是這樣的：

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

來源

2015-06-15 03:47:30 frumbert

Vimeo的工作人員幾天前更新了我，並提到他們已經關閉了這一個;似乎測試出來了。我上面的黑客不再需要。 – frumbert

有些瀏覽器禁止觸發「玩」通過在開始的時候JS。必須有真正的用戶互動來播放視頻。

不過，如果你想要把VIMEO視頻中的滑塊，你可以做的是：

上的視頻
一套「透明度之上應用的圖像與「播放按鈕」：0 「的內容框，並使其正確的大小&位置的」播放按鈕「（iframe必須是」allowfullscreen「）
一旦用戶第一次觸發視頻播放。使iframe達到您想要的正常大小，讓vimeo player.js掌控。無需用戶交互播放

在這種情況下，用戶必須點擊「播放按鈕」來觸發視頻

來源

2017-06-08 07:54:13 jilykate

在iPhone上，Vimeo Javascript API .play（）函數在視頻播放前不起作用

回答

相關問題