Anythingslider html 5視頻自動播放

Question

請我需要你的幫助夥計！

我使用Anythingslider在HTML5視頻和其他內容之間滑動，但是當我在視頻標籤中添加自動播放屬性時，Anythingslider只播放音頻。

Answer 1

你確定視頻不隱藏在另一個元素後面嗎？視頻應該是可見的，用z-index播放。過去我曾經遇到過一些問題，比如視頻在滾動條中的閃爍和閃爍。

我最終在燈箱中播放視頻，因爲任何滑塊都會在播放器繼續滾動時播放視頻。另外，如果你使用無限的滾動條，那麼在兩個地方播放視頻也有問題。

如果您使用的是類似JW Player的東西，您可以設置一些操作來暫停幻燈片或類似視頻，但基本的YouTube嵌入將成爲問題。

Answer 2

不要將自動播放屬性添加到HTML5視頻。可能發生的情況是，視頻的複製副本（僅限第一張幻燈片和最後一張幻燈片）正在播放視頻，但您聽到的只是音頻，因爲面板不在視野中。您不想自動播放的原因是，即使AnythingSlider從另一張幻燈片可見，它仍會自動播放，並且在您循環顯示面板之前它不會停止。

如果您想將視頻自動播放時，面板是可見的，你必須添加一些腳本到完成回調（不需要用下面的代碼視頻延長; demo）：

var playvid = function(slider) { 
    var vid = slider.$currentPage.find('video'); 
    if (vid.length) { 
     // autoplay 
     vid[0].play(); 
    } 
}; 

$('#slider').anythingSlider({ 

    // Autoplay video in initial panel, if one exists 
    onInitialized: function(e, slider) { 
     playvid(slider); 
    }, 
    // pause video when out of view 
    onSlideInit: function(e, slider) { 
     var vid = slider.$lastPage.find('video'); 
     if (vid.length && typeof(vid[0].pause) !== 'undefined') { 
      vid[0].pause(); 
     } 
    }, 
    // play video 
    onSlideComplete: function(slider) { 
     playvid(slider); 
    }, 
    // pause slideshow if video is playing 
    isVideoPlaying: function(slider) { 
     var vid = slider.$currentPage.find('video'); 
     return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended); 
    } 

});​