2015-03-04 2 views
0

Я использую отличную библиотеку video.js для создания пользовательского видеопроигрывателя HTML5 для своего сайта. К сожалению, тонкая черная линия появляется справа от игрока в Safari. Иногда изменение размера браузера решает проблему, но я думаю, что это ошибка.Video.js thin black line

Вот МЕНЬШЕ, что я изменил на кожу игрока (по http://designer.videojs.com):

@base-font-size: 10px; 
@touch-device-font-size: 15px; 

// The main font color controls the color of the text and the icons (font icons) 
@main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff 

// The default color of control backgrounds is mostly black but with a little 
// bit of blue so it can still be seen on all black video frames, which are 
// common. 
@control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff 
@control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity 

// The slider bar color is used for the progress bar and the volume bar 
@slider-bar-color: #1A6DBA; // e.g. rgb(255, 255, 255) or #ffffff 
// The background of the progress bar and volume bar have a lined pattern that 
// is created from a base64 encoded image. You can generate your own pattern at 
// http://www.patternify.com/ then replace the value in the quotes with your own 
@slider-bar-pattern: ~''; 
// The color of the slider background 
@slider-background-color: #333333; 
@slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity 

// The "Big Play Button" is the play button that shows before the video plays. 
// To center it set the align values to center and middle. The typical location 
// of the button is the center, but there is trend towards moving it to a corner 
// where it gets out of the way of valuable content in the poster image. 
@big-play-align: center; // left, center, or right 
@big-play-vertical-align: middle; // top, middle, or bottom 
// The button colors match the control colors by default but you can customize 
// them by replace the variables (@control-bg-color) with your own color values. 
@big-play-bg-color: @control-bg-color; 
@big-play-bg-alpha: @control-bg-alpha; 
// The font size is what makes the big play button, big. All width/height values 
// use ems, which are a multiple of the font size. 
// If the @base-font-size is 10px, then 3em equals 30px. 
@big-play-font-size: 3em; 
// Now that font size is set, the following em values will be a multiple of the 
// new font size. If @big-play-font-size is 3em (30px), then setting the any of 
// the following values to 2em would equal 60px. 2 * font-size 
@big-play-margin: 0.5em; 
@big-play-width: 3em; 
@big-play-height: 2em; 
@big-play-border-radius: 0.5em; 
@big-play-border-width: 0; 
@big-play-border-color: #3b4249; 

Я не знаю, почему это происходит. Это может быть проблема с видео?

Ссылка на сайт с вопросом: http://bluecocoa.com/posts/spaceship-canopy/

Скриншот выпуска: screenshot of issue

ответ

0

Я был в состоянии разобраться в проблеме. Видео, которое я использовал, имеет соотношение сторон, которое точно не соответствует игроку. Я установил padding-top.video-js, чтобы исправить это.