On Wed, Aug 11, 2010 at 2:35 AM, Zachary Ozer <span dir="ltr"><<a href="mailto:zach@longtailvideo.com">zach@longtailvideo.com</a>></span> wrote:<br><div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">

<div class="im">On Mon, Aug 9, 2010 at 8:05 PM, Silvia Pfeiffer<br>
<<a href="mailto:silviapfeiffer1@gmail.com">silviapfeiffer1@gmail.com</a>> wrote:<br>
> Have you looked at the @media attribute? I would suggest to put them there.<br>
> As that's not currently specified in media queries, you might want to<br>
> demonstrate how it could work and make a proposal to extend the media<br>
> queries.<br>
<br>
</div>I thought about suggesting something like bitrate a bandwidth to media<br>
queries. The syntax would look something like:<br>
<br>
<video width=720><br>
<source src="video-480.mp4" media="(width:480px) and (min-bitrate:2mbps)"><br>
<source src="video-720.mp4" media="(width:720px) and (min-bitrate:4mbps)"><br>
<source src="video-1080.mp4" media="(width:1080px) and (min-bitrate:20mbps)"><br>
</video><br>
<br>
The problem is that the user agent would have to then know what<br>
bitrate can be supported between you and that source. User agents<br>
don't currently keep track of this information (so far as I'm aware),<br>
and even if they did, it's highly variable based on your location, the<br>
website you're visiting, etc.<br>
<br>
Additionally, while media queries do help content producers specify<br>
which resource would be selected for a device under ideal<br>
circumstances, it doesn't really allow for degradation. However, if<br>
you look at what's out there today, it's pretty common to allow users<br>
to switch to a degraded experience as needed.<br>
<br>
I can think of a few solutions that might make sense here:<br>
<br>
 * Allow source sub-elements / groupings and provide a call to switch<br>
between elements of a group. Ideally, this would look something like:<br>
<br>
<video width="720px"><br>
<sourcegroup type="video/mp4" media="screen and (device-aspect-ratio: 16/9)"><br>
<source src="video-1080.mp4" meta="width:1920px;height:1080px;bitrate:20mbps;"><br>
<source src="video-720.mp4" meta="width:1280px;height:720px;bitrate:4mbps;"><br>
</sourcegroup><br>
<sourcegroup type="video/mp4" media="screen and (device-aspect-ratio: 4/3)"><br>
<source src="video-480.mp4" meta="width:640px;height:480px;bitrate:2mbps;"><br>
</sourcegroup><br>
<sourcegroup type="video/ogv"><br>
<source src="video-480.ogv" meta="width:640px;height:480px;bitrate:2mbps;"><br>
<source src="video-720.ogv" meta="width:1280px;height:720px;bitrate:4mbps;"><br>
<source src="video-1080.ogv" meta="width:1920px;height:1080px;bitrate:20mbps;"><br>
</sourcegroup><br>
</video><br>
<br>
 * Have user agents keep track of information about dropped frames.<br>
Publishers could then list multiple valid sources in order of rank.<br>
When the dropped frame rate increased, either the user agent or a bit<br>
of JavaScript could remove that source and re-run the resource<br>
selection algorithm.<br></blockquote><div><br></div><div><br></div><div>It's good to have thought this through. I agree, this isn't a workable solution, since the whole bandwidth switching logic is introduced into the browsers, when in fact it should happen in the media framework with information from the network stack without a need for the Web page to even be aware of this. After all, it's really different versions of the same resource that we are dealing with. That's also what happens in adaptive HTTP streaming solutions of Apple, MS, Adobe and MPEG-4.</div>

<div><br></div><div>So, to generalise this, I agree there should be a solution such as what Chris Double is suggesting with an additional resource describing what files can be switched between and then JavaScript doing the switching. This could eventually also be introduced into HTML5, if it's done with the same additional resource format for all video formats. In this case, would you still require an additional attribute?</div>

<div><br></div><div>Cheers,</div><div>Silvia.</div><div><br></div><div><br></div></div>