HTML5視頻背景後備

我試過這段代碼，它似乎並沒有工作我試圖創建一個後備所以如果一個非html5瀏覽器（即/ safari）加載網站它會顯示不同的內容沒有視頻。HTML5視頻背景後備

<?php if (Modernizr.video) { 
<video id="video" src="video.ogv" autoplay /> 
} 
else 
{ 
<img src="text.jpg"> 
}?>

任何反饋都會很好。謝謝

來源

2011-07-22 Delete

看起來好像問題出在混淆了服務器端和客戶端完成了什麼。 Modernizr是一個JavaScript庫。把它的代碼放到PHP塊中對你來說什麼都不會做，因爲PHP是服務器端技術，JavaScript不是。

另一種方法是使用PHP爲JavaScript提供必要的數據，然後使用JavaScript來確定要顯示的HTML。

<script> 
if (Modernizr.video) { 
    document.write('<video id="video" src="<?php echo 'video.ogv'; ?>" autoplay />'); 
} else { 
    document.write('<img src="<?php echo 'text.jpg'; ?>" />'); 
} 
</script>

您可以將此代碼放入HTML中您希望顯示視頻/圖像的位置。請注意，我們使用PHP來回顯文件名。這使您可以動態地提供文件名。要利用HTML5的功能，我建議將文件名放入HTML5數據屬性中，然後使用JavaScript同時處理所有出現的視頻。

<div class="has-video" data-video="<?php echo 'video.ogv'; ?>" data-image="<?php echo 'text.jpg'; ?>"></div>

來源

2011-07-22 13:44:52 Koviko

他們有什麼辦法可以代替圖片顯示圖片嗎？

因此，如果視頻不支持，然後顯示全屏bg功能創建的圖像？ – Delete

是的，您可以在其中放置任何HTML。請記住，您可以使用PHP來創建JavaScript代碼，但反之亦然。 PHP在服務器上運行，JavaScript在客戶端運行。 – Koviko

HTML5視頻背景後備

回答

相關問題