javascript video custom controls

Question

Я застрял в создании видео с учетом пользовательских элементов управления.

Я знаю, как сделать видеочувствительным, с элементом <figure></figure> и шириной на 100% видео реагирует, и это здорово! Но дело в том, что индикатор прогресса не реагирует. Потому что он вычисляется по ширине самого видео.

Я не хочу публиковать весь свой код, потому что он будет длинным для этого сообщения. Но я могу дать ссылку, откуда я ее получил. This is the link if you are interested.

код, где все это происходит:

// Width of the video 
$videoWidth = $this.width(); 
$that.width($videoWidth + 'px'); 

//Set width of the player based on previously noted settings 
$that.find('.player').css({ 
    'width': ($settings.playerWidth * 100) + '%', 
    'left': ((100 - $settings.playerWidth * 100)/2) + '%' 
}); 

Это дает DIV с инлайн шириной точек, но если вы хотите отзывчивую страницу, которую вы не хотите, чтобы сделать это. Но я не уверен, как это решить. Поэтому я надеюсь, что кто-то может мне помочь.

Answer 1

Nevermind, уже исправил его самостоятельно! Если вам интересно, это правильное решение.

// Width of the video 
//$videoWidth = $this.width(); 
//$that.width($videoWidth + 'px'); 

//Set width of the player based on previously noted settings 
$that.find('.progress').css({ 
'width': ($settings.playerWidth * 100) + '%', 
//'left': ((100 - $settings.playerWidth * 100)/2) + '%' 
}); 

В конечном итоге получается, что почти все может исчезнуть, и вам нужно изменить класс css.