jquery幻燈片和html5視頻

我試圖使用HTML5視頻作爲幻燈片SlidesJS中的第一個元素。問題是，如果我點擊播放按鈕播放視頻，則應停止播放幻燈片，直到視頻完全播放，然後幻燈片放映應移至下一張幻燈片。此外，hoverpause僅適用於圖像，但不適用於html5視頻元素。jquery幻燈片和html5視頻

這裏是我的JavaScript代碼至今：

$(function() { 
    $('#slides').slides({ 
     preload: true, 
     preloadImage: 'Images/loading.gif', 
     play: 5000, 
     pause: 2500, 
     hoverPause: true 
    }); 
});

來源

2011-08-02 sam

Media Events有暴露的事件，你可以挖掘到的概述。您應該簡單地停止play事件上的幻燈片並在ended事件中重新啓動它。

例子：<video ... onPlay="//DoJSStuffHere" onEnded="//DoOtherJSStuffHere" />

來源

2011-08-02 11:25:03 Semyazas

感謝semyazas.that是有道理的。但你如何獲得視頻元素的當前狀態？ – sam

有一個可以檢查的「播放」狀態，以及一個「暫停」狀態，但是我個人認爲這足以在開始「播放」時停止幻燈片，並在「暫停」中進一步運行，因爲這些事件將會發生，使視頻運行或停止。看到我更新的答案 – Semyazas

謝謝semaz。我會嘗試並讓你知道。乾杯！ – sam

像Semyazas說，但跳過上的屬性，並用JavaScript做到這一點：

var v = document.getElementById("id-of-movie"); 
//$(v).bind('pause', function() { the video gets paused } 
//$(v).bind('play', function() { do something when the video starts playing, fired by v.play() 
//$(v).bind('ended', function() { the video has ended }

來源

2011-08-02 12:04:49 tbleckert

'var v = $（'＃id-of-movie'）; '如果他使用jQuery反正;-) – Semyazas

不能這樣做，如果你這樣做，你還需要添加 $（'＃id-of-movie'）。get（0）; :) – tbleckert

它仍然遠遠好於退出框架並返回。這種方式存在語法錯誤 – Semyazas

jquery幻燈片和html5視頻

回答

相關問題