切換基於body_class的HTML5視頻源

我正在研究一個具有HTML5視頻背景的Wordpress網站。我試圖讓視頻根據頁面在兩個選項之間切換 - 例如，如果我有4頁，則頁面1,3會顯示視頻A並且會顯示2,4會顯示視頻B.切換基於body_class的HTML5視頻源

什麼是最簡單的如何做到這一點？我已經有了一點戲劇，但不能想到只使用CSS和每個頁面的body_class的方式，我不認爲你可以用CSS來更改標籤中的東西。如果我錯了，請糾正我。

我的PHP和js技能相當有限，但如果有人能指出我正確的方向，我很高興有機會獲得某些工作。

2014-07-03 user3659282

你是什麼意思，body_class？它是身體的階級屬性嗎？ –

插入這段代碼結束標記之前：</body>：

<script> 

    var video = document.getElementsByTagName('video')[0] 

    switch (document.body.className) { 

     case 1 : video.src = 'a.mp4'; break; 
     case 2 : video.src = 'b.mp4'; break; 
     case 3 : video.src = 'a.mp4'; break; 
     case 4 : video.src = 'b.mp4'; break; 

    } 

</script>

所以，如果身體有屬性類，它的值1或3的視頻將被顯示，類似的東西。

來源

2014-07-03 05:34:02

謝謝你，這太棒了。我真的需要刷上我的js。一個快速的後續行動：我有兼容性的.mp4和.webm源代碼，添加這些代碼的正確語法是什麼？我可以簡單地擁有 video.src ='a.mp4'，'a.webm';打破; – user3659282

我會推薦.webm，因爲更多的瀏覽器支持它。但最好的解決方案是將不同視頻源的多個「源」標籤包含在視頻內。 –

對不起，我的問題很糟糕，結構嚴謹！我的意思是說：我目前在html中有多個源代碼，我的代碼片段如下所示： '

切換基於body_class的HTML5視頻源

回答

相關問題