Question

我正在尝试创建自定义HTML5视频滑块（看起来像带有红线的youtube）。它由两个div组成，一个在另一个上面，红色div的宽度需要根据当前视频位置而改变。

我成功捕获了视频位置，但无法更改红色div的宽度。我做错了什么？

HTML：

<video id="VideoWindow" src="../html/media/homepage.mp4" ontimeupdate="VideoTimeUpdated()"/>
<div id="PlaybackIndicatorProgress" style="left: 0%; width: 30%; display: block; background-color: red; height: 3px">

JS：

function VideoTimeUpdated() {
    var myVideo = document.getElementById("VideoWindow");
    var myVideoSlider = document.getElementById("PlaybackIndicatorProgress");
    var CurrentPosition;

    CurrentPosition = Math.round(parseInt(myVideo.currentTime / myVideo.duration * 100));
    CurrentPosition = CurrentPosition + '%'; 
    myVideoSlider.css("width", "CurrentPosition");
}

谢谢！

杰尼。

Answer 1

对我来说，看起来你正在混合使用jQuery和普通的javascript，在你的代码中尝试第8行：

myVideoSlider.style.width = CurrentPosition;

说明：.css（）方法是一个jQuery方法，但是您通过本机getElementById（）方法获取DOM节点（要更改的元素），因此不能使用.css（）。

Dimitar也部分正确，因为您想使用变量而不能将其设置为引号，否则它将被解释为字符串。

对于第6行到第8行，我可以说你正在投射（改变）很多“数据类型”并使用不真正需要的舍入，如果你使用宽度的百分比，你可以实际使用浮点数。通过将第6,7和8行合并在一起，您可以同时保存两行代码：

myVideoSlider.style.width = (myVideo.currentTime / myVideo.duration * 100) + "%";

请注意，我将计算放入制动器以将它们与连接（+符号）分开，否则可能不清楚您是否阅读了此处发生的代码，因为在javascript中加号用于计算和连接字符串取决于您使用的“数据类型”。

Answer 2

CurrentPosition需要在＆＃34;＆＃34;之外，因为你的方式＆＃34; CurrentPosition＆＃34;只是一个字符串，而不是一个变量。

应为myVideoSlider.css("width", CurrentPosition);

动态调整div宽度

2 个答案: