HTML Video

Having just been connected to a fibre Internet connection I thought it was a good opportunity to look at media presented on webpages.

The 1st W3C example has control buttons defined using JavaScript. I added the "controls" parameter to see what it did. I added another video in which only contained the "controls" parameter so the video is controlled just by the embedded controls.

While the adding of a video to a page is easy there is a bandwidth consideration. When this page loads a portion of the linked videos are loaded into the browser. This can be seen here.

The W3C example

This uses some of my drone footage.

The video is displayed and controlled using the HTML video tag and a script contained on this page.

2nd example

How this works on an iPad/iPhone

There is another attribute, "autoplay" but....

The autoplay attribute does not work in mobile devices like iPad and iPhone.

Also when viewed on an iPad the video initially displays as a "Play" button and displays the contents when the video is played.

Bandwidth Implications

As I said I was holding off starting this project until I had an unlimited fibre Internet connection. It is not that the playing of a few videos would have used a lot of bandwidth, but the testing and devlopment cycle can easily "eat" vast chunks of bandwidth.

So far, at the time of wrting this, I had only uploaded 2 drone videos to my server and provided links to them. The video files are 4k and are 407Mb and 461Mb for videos that are little over 1 minute each. Testing over a couple of days has used around 300Gb of bandwidth.

The use of YouTube in your own webpages

W3C do actually suggest this. I have even implemented a solution to provide some instructional videos linked from my Parish Council website.