1

我正在尝试控制用于显示视频播放器已用时间和总时间的文本大小。我目前正在控制播放/暂停/声音和全屏图标，但无法访问时间显示。以下是用于调整窗口大小调整控件大小的 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

4

1 回答 1

0

如果您想使用 jQuery，那么您可以运行 resize 方法.ready()并添加窗口.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);
}
于 2015-02-17T17:09:44.397 回答