как остановить появление черной линии под моим html5-видео в Safari и Google Chrome - PullRequest
Новая
       17

как остановить появление черной линии под моим html5-видео в Safari и Google Chrome

4 голосов
/ 15 февраля 2012

ссылка на страницу, которую я пытаюсь отсортировать

У меня есть несколько html5-видео на этой странице, и мне удалось отсортировать их, так что я доволен тем, что он работает в большинстве браузеров и отображает изображение в тех, которые не поддерживают тег video.

Существует странная ошибка, которую я, похоже, не могу разобрать в chrome и safari, где под видео появляется тонкая черная линия. Я изучал это, но ничего не придумали.

Ответы [ 3 ]

9 голосов
/ 05 июля 2013

Черная линия находится в самом видео MP4.Это не в версиях webm и ogg.Safari и Chrome будут воспроизводить MP4.

Вы могли бы поместить видео в меньший div с помощью overflow:hidden, чтобы обрезать его, но вы, вероятно, хотите исправить видеофайл. 

div#videocrop {
    height: 493px;
    overflow: hidden
}
1 голос
/ 01 июля 2013

Вам не хватает закрывающего тега для якорной ссылки, окружающей ваше видео, и самого тега 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>

0 голосов
/ 25 июня 2014

Решил это !!!я изменил свой PAR (Pixel Aspect Ratio) на «Square Pixels», таким образом, я избежал этих черных линий;)

...