html5 - Load the video element last -
i've got video element @ top of page, wondering if theres way load after rest of dom has been loaded? want video load last.
this seems want. in sample have included mp4 source, add others webm , ogg depending on browsers supporting. can populate 3 attributes, or use canplaytype test determine best users browser.
the video element defaults autoplay (but can remove attribute <video...> tag , control directly script. defaults preload="auto" let browser control how preload, again might want turn off if it's not optimal scenario (and different browsers have different behaviors)
you might want hide video element until ready load content (though jiggle page around bit , might weird user)
<!doctype html> <html> <head> <title>initialize video when doc ready</title> <script> document.onreadystatechange = function () { console.log("readystate = " + document.readystate); if (document.readystate == "interactive") { // can wait "complete" here init(); } } function init() { console.log("load source video element") vid = document.getelementbyid("video") // can use vid.canplaytype test load supported video // or have tags mp4, webm , ogg cover bases vidmp4 = document.getelementbyid("videomp4") vidmp4.setattribute("src","video.mp4") // vid.play(); } </script> </head> <body> <p>something before video</p> <video id="video" controls autoplay preload="auto" width=480 height=320> <source id="videomp4"></source></video> <p>something after video</p> </body> </html>
Comments
Post a Comment