I've currently completed a web app that plays back Youtube videos. A Youtube HTML5 video plays back super smooth (no visible lagging or glitches even when CPU is at 90+ active) while my app (which uses jQuery UI) accepts form input or achieves element manipulation (User or dynamically triggered). However, when Youtube force-feeds my app with a Flash video, anytime there is form entry, DOM manipulation, or cursor moving rapidly over the UI, the Flash video stutters, coughs, belches and acts in respite (regardless of CPU level. Audio is ok though) until GUI manipulation ceases.
My client-side web app is built with Javascript and jQuery 2.10 and accesses Youtube videos through Youtube's Data API v3.
Question: What could I do with Web Workers to make certain that UI interaction never affects video playback (and vice versa), regardless of the video format Youtube currently feeds back through its data API (version 3)?
Question: If Web Workers can't help me, what could I implement client-side wise (besides avoiding Youtube Flash video) to solve this dilemma?
Any sensible tips/solutions would be appreciated. Thanks.
Web Workers won't be too helpful here (for taking on anything UI related).
https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
The global scope for Web Workers is separate from the window, so you have no access to the DOM from within the worker.
You might want to consider creating a variable toggle for Loading State and only allowing GUI events if you're not currently loading. Otherwise I'm not too sure about what you could do for the second question other than optimize the heck out of your JavaScript.
Edit: As far as loading the video in the worker, you might be able to do that by making the XMLHttpRequest and getting the data, and then sending the data in chunks to the main thread once you buffer it some. Check out this article for more info: http://techslides.com/html5-web-workers-for-ajax-requests