當視頻播放器不在視圖中時，將HTML5視頻設置爲暫停

我想用javascript來做到這一點。我正在使用Hakim El Hattab的Reveal.js作爲基礎來製作演示文稿。當視頻播放器不在視圖中時，將HTML5視頻設置爲暫停

Reveal.js的工作方式是您正在查看的當前幻燈片有一類.present，任何以前的幻燈片都有一類.past，並且尚未進入視圖的任何幻燈片都有一類.future。

我希望它自動暫停幻燈片中的任何視頻設置爲.past或.future。

我應該怎麼辦？

在此先感謝！

** * ** * ** * ** *UPDATE* ** * ** * ** * ****

，所以感謝我在css-tricks forums上得到的一些指導，我能夠使用getElementById在單個視頻上工作。

下面是我用來添加.past和.future類並同時暫停視頻的JavaScript。

if(i < index) { 
    // Any element previous to index is given the 'past' class 
    slide.setAttribute('class', 'past'); 
    document.getElementById('vid').pause(); 
} 
else if(i > index) { 
    // Any element subsequent to index is given the 'future' class 
    slide.setAttribute('class', 'future'); 
    document.getElementById('vid').pause(); 
}

我現在面臨的問題是如何將它應用於標記名稱（即：視頻）或可能是一個類。

來源

2012-02-21 dfogge

，它可以更容易解決：

if(i < index) { 
    // Any element previous to index is given the 'past' class 
    slide.setAttribute('class', 'past'); 
    var vids = document.getElementsByClassName("past"); 
    for (var i = 0; i < vids.length; i++) { 
     vids[i].pause(); 
    } 
} 
else if(i > index) { 
    // Any element subsequent to index is given the 'future' class 
    slide.setAttribute('class', 'future'); 
    var vids = document.getElementsByClassName("future"); 
    for (var i = 0; i < vids.length; i++) { 
     vids[i].pause(); 
    } 
}

看看是否有幫助。如果沒有，您是否使用符合標準的現代瀏覽器？getElementsByClassName()是一個相對較新的功能。它適用於我的最新版本的Chrome。

來源

2012-02-22 22:28:25 petschekr

感謝很多petschekr！我一定會嘗試這個。只是一件事，這個演示文稿是要發送給客戶端查看，所以他們不知道他們將使用什麼瀏覽器。我希望支持瀏覽器早在Firefox 3.6和IE9，但如果你可以請讓我知道，如果它不會。我可能不得不放棄getElementById爲每個視頻ewww – dfogge 2012-02-22 22:46:57

這是一個很好的圖表，哪些瀏覽器支持它，哪些不支持。如果IE9和FF3.6是最低限度，你應該罰款： http://caniuse.com/getelementsbyclassname – petschekr 2012-02-22 23:05:46

感謝petschekr，這看起來像它會工作。非常感謝你的幫助，好先生！ – dfogge 2012-02-23 17:44:49

我不知道是否會setTimeout在這裏工作，但你可以嘗試以下方法：

function PauseVids() { 
    var vids = document.getElementsByClassName("past"); 
    var vids2 = document.getElementsByClassName("future"); 
    for (var i = 0; i < vids.length; i++) { 
     vids[i].pause(); 
    } 
    for (var i = 0; i < vids2.length; i++) { 
     vids2[i].pause(); 
    } 
} 

// Within onLoad or $(document).ready() 
setTimeout("PauseVids()", 1000);

告訴我，如果工程。

來源

2012-02-22 09:14:46 petschekr

thanks petschekr。我試圖適應這種情況，但我無法實現。 – dfogge 2012-02-22 21:21:37

任何JS錯誤？另外，你使用的是什麼瀏覽器？嘗試Chrome瀏覽器，看看它是否工作，然後 – petschekr 2012-02-22 21:41:32

在Firefox中失敗，並得到了錯誤：vids [i] .pause不是一個函數 – dfogge 2012-02-22 22:24:17

@petschekr：猜這不行，因爲classname過去的未來不僅設置爲videoelements？！

我不知道如何顯示工作和你使用什麼樣的球員！但我的方式將某物像：

只有一個文件與本級，右（當前幻燈片）

一）定義每個按鈕，更改網頁+按鍵像的onChange功能某物（例如）

b）觸發切換

頁面之前起作用

function onChange(){ 
     var currentSlice = document.getElementByClassName('present') //get current html elemen 
     var videoObjects = currentSlice.getElementsByTag('video') //get videoelements here html5 video 
     for each videoObj  
      videoObj.pause()

編輯：僞代碼，讓你的想法！現在，你發佈你的代碼

來源

2012-02-22 14:33:01 longilong

感謝您的幫助，但我couldnt得到這與我的代碼工作。 – dfogge 2012-02-22 21:20:35

當視頻播放器不在視圖中時，將HTML5視頻設置爲暫停

回答

相關問題