For example we have video player with width 600px and video file with length 1min. On what time range I need to divide video player timeline? Maybe there some formula?

For example

  |       |       |       |       |
00:00   00:15   00:30   00:45   01:00

But what if video length is 43min and size of player is still 600px?


Sorry for my bad explanation of my problem, here example of my timeline enter image description here Here "One", "Two"... is tags which user can move and resize horizontally on this timeline. Width of timeline is fixed, but video length can be different. I need to figure out how many that vertical lines should be on timeline?

  • 1
    Feels more like an implementation question than an UX question.
    – rk.
    Jul 2, 2013 at 14:21
  • no, for implementation I need to understand behavior of timeline with different video length and different players width.
    – redexp
    Jul 2, 2013 at 15:50
  • What is the problem with equal distribution? Screen space divided by the amount of time?
    – rk.
    Jul 2, 2013 at 15:52
  • What do you need time ranges for? Are they help to solve some problem? Jul 2, 2013 at 16:08

1 Answer 1


Regarding the sections you mentioned, there are two situations I think it may refer to:

  • showing these points only as some visual guideline
  • allowing users to navigate only to these points

For the first situation, I think, it will be fine to display just the start (usually 0:00) and end time for the user to 'callibrate' the timeline in his/her mind. If you want, you can provide additional points on the timeline, so that users - while dragging the time slider, could better tell where (when?) they are - at least before they click the slider itself, because I suppose that there is going to be some quite obviously required elements, like slider control, current time and time under slider upon dragging.

The second is worse, and I believe it is more content related case. I did some of these, but if you fix the navigation to only some points on the video timeline, these need to be related to the content. In other words, the sections must reflect not time, but real 'chapters' of the video. So no default, time based splitting into sections is a good one in this case.

What you could consider, if you expect to deal with long videos and/or need high accuracy for selecting a point on the timeline, instead of splitting into sections, you could use some UX pattern. The best one for this, methinks, is the one provided by Apple in iOS. You use the slider as you would normally, but if you drag your finger away from the timeline slider (while dragging it), the accuracy of sliding increases. It's like zooming on some local part of the timeline to allow more precise selection. Of course this pattern works on iOS, so I don't think it's used anywhere online. To apply it, you would have to display some visual clue for the user upon dragging. This might be some text and some effect of zooming on the timeline (you know: time spans going apart, so that initially 1 minute is e.g. 100px, while upon dragging it the slider, some more precise scale appears, and if user drags his cursor up, the points on this scale get zoomed).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.