Video tag responsive html58/14/2023 ![]() ![]() In theory it would be possible to use JavaScript matchMedia conditions to switch between versions as the browser window is resized, but I would consider the potential interruptions in the video stream to make the effort valueless. If the physical device has a horizontal resolution of 801 pixels or greater, it will receive the large video, without regard to the initial browser window size.If the physical screen of the device is no more than 800 pixels wide, then it will receive the small video version.These new rules set up the following conditions: To that end, a better solution is to use a media query to inspect the width of the device, rather than the current window, and choose the appropriate video based on the result: The choice of video isn’t reconsidered unless the page itself is reloaded. This selection will be in effect thereafter, no matter how the window is resized. While this works, it only does so on initial load: that is, when the HTML page is first visited, the appropriate video is used for the current window size. I’ve covered that in a previous article the CSS is the same as that applied to responsive bitmap images: Of course none of this is terribly useful unless the element itself is responsive. Both versions of the movie are added inside it, with media queries written inline to distinguish between the sources: ![]() The tag is inserted into the page as usual. Naturally, you would also have to save these videos in at least two different formats, to cover all browser requirements. Crafting The Queriesįirst, you’ll need to compress at least two versions of the same video in different sizes: in the example above, I’ve created a 720 × 1280 HD version and a 640 × 360 SD copy. If your responsive site uses self-hosted video, customizing your movies for different screen sizes not only optimizes visitor's viewing experience, but can also add significant savings in bandwidth costs. While many web developers have focused on the progress of the element for adaptive images, the very similar capabilities tag for HTML5 video are largely unknown, and often overlooked. DASH streaming currently appears to be a viable alternative I'll write about the technology soon. While this code will continue to work for Firefox, at least as of now, it is probably not a good long-term implementation for adaptive video. Sadly, the media attribute shown in this article has been removed from implementation in source for the video element in Blink, and appears destined for excision from the official HTML5 specification. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |