HTML5視頻 - 回退鏈接的圖像

我正在尋找顯示鏈接的圖像以顯示我的視頻不兼容。HTML5視頻 - 回退鏈接的圖像

我的代碼如下：

<video controls poster="/sites/default/files/image/CRM-Systems-Video.png"> 
    <source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg"> 
    <source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4"> 
<a href="http://content.workbooks.com/free-trial-workbooks-crm?utm_source=Homepage&utm_medium=laptopimage&utm_campaign=laptophomepage"> 
    <img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image"> 
    </a> 
</video>

然而，當我使用的瀏覽堆棧測試IE8（不帶<video>兼容）沒有圖像顯示？這是由於鏈接？

瀏覽器截圖鏈接：http://www.browserstack.com/screenshots/663ccadc9d1c2a3aa880fb4e1ef111c4eb386c79

來源

2015-04-17 Sam

您可以方便地查看自己通過移除鏈接並使用'img'標籤進行測試。結果是什麼？ – Shaggy

工作正常嗎？注意：代碼上的編輯。 – Sam

剛剛發佈你的'img'標籤格式不正確。看起來你已經把它分類了，所以。 – Shaggy

添加以下到您的<head>將做到這一點的開始：

<script type="text/javascript"> 
document.createElement("video"); 
</script>

此招數IE8成承認<video>元素，如IE瀏覽器不顯示任何它無法識別的標籤。我測試了這個並且鏈接出現了，儘管<source>文件被忽略了。

這裏有一個例子（你應該看到在現代瀏覽器什麼都沒有，但缺乏video支持將顯示一個文本瀏覽器）：

<script type="text/javascript"> 
 
document.createElement("video"); 
 
</script>

<video> 
 
<a href="#">You are on an older browser</a> 
 
</video>

來源

2015-04-17 15:20:41 somethinghere

感謝您的文章和完整的解釋。我們的CMS是Drupal，因此我使用「添加到頭」模塊將腳本添加到中。但是IE8的備份映像似乎仍然失敗：http://www.browserstack.com/screenshots/12cd82cbbaee4171d4cb058dc9f174ca886c75b6 有什麼建議嗎？ – Sam

它似乎更像是一個破碎的圖像鏈接，因爲圖像顯然存在但未找到......你檢查過路徑嗎？ – somethinghere

同意，路徑工作正常。我認爲這個鏈接可能會干擾，但這不是它。 – Sam

HTML5視頻 - 回退鏈接的圖像

回答

相關問題