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

Question

我正在尝试控制用于显示视频播放器的已用时间和总时间的文本的大小。我当前正在控制播放/暂停/声音和全屏图标，但无法访问时间显示。下面是用于在窗口调整大小时调整控件大小的 JavaScript:

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() 上运行调整大小方法并添加窗口 .resize()绑定(bind)也是如此:

$(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);
}