Settings

Theme

Rebuild YouTube's mobile-like progress bar in jQuery

blog.ynh.io

52 points by ynh 13 years ago · 12 comments

Reader

thejosh 13 years ago

I really dislike the new loading bar in the YouTube site as videos continue to play while the next page is loaded.

I'm on a fast connection so normally youtube loads instantly anyway, but this new method takes 4-10 seconds.

  • dm2 13 years ago

    even worse is that there is no cached video while seeking. Even seeking to a "loaded" part of the youtube video results in the reloading the video from that point. Rewinding 10 seconds results in having to reload the video, wtf?

X4 13 years ago

Yep, I've also seen that. But your markup is wrong. You should use <progress> instead

I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock.

Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c...

QML:

  Clock.setRule('#hour', Clock.Hour);
  Clock.setRule('#minute', Clock.Minute);
  Clock.setRule('#second', 'value', Clock.Second, {'short': true});
pstadler 13 years ago

I did the same on https://www.mila.com

It's fairly simple but it took some time to figure out the right sequence and timing for it to run smoothly across all devices / browsers.

druska 13 years ago

I like it. Just remember if you use this in production, save $("#progress") in a variable in the ajaxStart function to improve performance (this will call Sizzle one less time usually).

zemaj 13 years ago

That's very nifty, thanks! Subtle, yet gets the point across.

Plenty of interesting ways that kind of bar could be included in a site.

paulfarino 13 years ago

I've been looking for this for a few weeks. Noticed on the Google Search iOS app. Thanks!

ezraroi 13 years ago

Nicely done and handful. Thanks

BaconJuice 13 years ago

very cool, thanks for sharing

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection