如何停止的一條黑線出現在Safari和谷歌Chrome瀏覽器的HTML5視頻

Question

link to the page I'm trying to get sorted

我有此頁上的某些HTML5視頻的下方，我已經成功地得到它分頁，使我很高興它在大多數瀏覽器中工作，並在不支持視頻標籤的圖像中顯示圖像。

有一個奇怪的錯誤，我似乎無法在鉻和Safari瀏覽器中排除出現在視頻下方的細黑線。我一直在研究它，但一無所獲。

Answer 1

黑線是在MP4視頻本身。它不在webm和ogg版本中。 Safari和Chrome將播放MP4。

你可能把視頻放到一個較小的div裏面用overflow:hidden來裁剪它，但你可能想修復視頻文件。

div#videocrop { 
    height: 493px; 
    overflow: hidden 
} 

Answer 2

你缺少對周邊視頻的錨鏈接的結束標記，而video標籤本身：

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()"> <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4"> <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm"> <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg">

末添加</video></a>：

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()"> <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4"> <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm"> <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg"> </video></a>

編輯：

還試着給video標籤border:0 CSS樣式：

<a href="http://finefurnituremaker.com/images/gracie/blonde_gracie/David-Savage-Furniture-Gracie-Blonde-LBM.jpg" rel="lightbox[gracie]"><video style="border:0;" width="880px" height="495px" autoplay="autoplay" loop="loop" id="video1" onended="this.play()"> <source src="../video/blonde-gracie/BlondeGracieAnimation.mp4" type="video/mp4"> <source src="../video/blonde-gracie/BlondeGracieAnimation.webm" type="video/webm"> <source src="../video/blonde-gracie/BlondeGracieAnimation.ogg" type="video/ogg"> </video></a>

Answer 3

解決了!!!我改變了我的PAR（像素長寬比）爲「方形像素」，這樣，我避開了那些黑線;）