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方法并添加窗口.resize()绑定，如下所示：

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

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

要在jQuery中组合选择器，您可以执行以下操作：

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

所以，你的resize方法现在看起来像这样：

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控制响应式视频播放器上的文本

1 个答案: