Video in HTML files

Hosting and streaming video requires a lot of storage and bandwidth. Many shared hosting plans will allow you to host your video. In this instance, you would use the <video> tag to provide that content to your users. However the performance can sometimes be terrible because shared hosting can contain many web sites and are not optimized for media streaming. Streaming services like youTube, Vimeo, Blip, and other commercial solutions exist to provide the infrastructure to deliver your videos with good data throughput and buffering (i.e. without pauses). When using those services to deliver media, they will provide you with the necessary code to use to get the media content to play on your web site.

Example

On the Youtube page there will be an option to share.

Share button
Share button

Under the share option are several options:

 

Share Options
Share Options

One of those options is an embed option which will provide a line of code (usually an iframe).

Embed Code
Embed Code

Just copy and paste the iframe code where the video tag code would normally be and you’re good to go. The iframe points to a resource that makes heavy use of javascript to play the video.

Note: Youtube utilizes both Flash technology and HTML5 technology. Flash technology is not mobile compatible; at least, not on iOS devices (which have a huge market share). To ensure your YouTube embedded videos are mobile compatible see the following article on Stack Overflow:  http://stackoverflow.com/questions/13516345/howto-play-youtube-videos-via-html5-video-tag. The article explains how to ensure your videos are being streamed from YouTube using HTML5 technology and therefore mobile compatible.

In Summary

There is more than one way to get video content onto your web site. The video tag is the method of choice if you happen to know the exact URI of your video content. However, many streaming services have their own infrastructure and will provide a block of code that you can use to deliver the content onto your page.