使用 .onresize 控制响应式视频播放器上的文本

Question

我正在尝试控制用于显示视频播放器已播放时间和总时间的文本大小。我目前正在控制 play/pause/sound 和全屏图标，但无法访问时间显示。下面是 javascript 用于在 window resize:

上调整控件大小

window.onload = function() {
resize();
}

window.onresize = function() {
resize();
}

function resize() {
    document.getElementsByClassName('play')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
    document.getElementsByClassName('fullscreen')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
    document.getElementsByClassName('mute')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
    document.getElementsByClassName('time-played')[0].style.width = (document.getElementsByClassName('timeline')[0].offsetHeight * .25) + 'px';
}

还尝试找出使用 jQuery 最小化和简化此问题的最佳方法（将所有类合并到一个数组中，类似于：

$('.play .fullscreen .mute .time-played')

我当前的实现：jsfiddle

Answer 1

如果您想使用 jQuery，那么您也可以运行 .ready() and add window .resize() 绑定上的调整大小方法，如下所示：

$(document).ready(function () {
    // resize on dom ready
    resizePlayer();

    // add window resize binding
    $(window).resize(resizePlayer);
});

要在 jQuery 中组合选择器，您可以这样做：

$('.play, .fullscreen, .mute, .time-played')

因此，您的调整大小方法现在看起来像这样：

function resizePlayer() {
    // Set your width to whatever you want...
    // this is just a rough translation of your method above
    var newWidth = $('.timeline').outerHeight() * 0.25;

    $('.play, .fullscreen, .mute, .time-played').width(newWidth);
}

使用 .onresize 控制响应式视频播放器上的文本

Using .onresize to control text on responsive video player

javascript

jquery

onresize