javascript视频自定义控件

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 一个行内宽度 px，但如果你想要一个响应式页面，你不想这样做。但是我没有那么多经验来解决这个问题..所以我希望有人能帮助我。

Answer 1

没关系，我已经自己修好了! 如果您好奇，这是正确的解决方案。

// 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 的类。