Streaming video in the new age
Streaming video in the new age
Streaming video just got a lot easier with HTML5. Many scripts still do FFMPEG which we have installed and ready to go. The advancements with HTML5 now allow us to simply just add a special code to our website and video will stream. This is done by modern browsers having the decoder built in.
This is faster and easier to install than steaming video has ever been.
As you might have noticed on our front page, we have a small video streaming behind the main text. This is done with HTML5.
The code is quite simple:
<video autoplay="autoplay" loop="loop" muted="" width="300" height="150">
<source src="video/video-name.mp4" type="video/mp4" />
<source src="video/video-name.webm" type="video/webm" />
<source src="video/video-name.ogv" type="video/ogg" /></video>We have auto play, loop, and mute activated in the code.
Here it is in action:
There is even more options, first I want to explain why there is three video files.
MP4 – is the most common video to stream, if you only do one I suggest this one.
WebM – is slowing growing on MP4 and is used on mobile browsers.
OGG – is for Apple Mac’s and Iphones.
It’s highly recommended to use all three formats at this time.
Keeping it fast
Even with this great new technology it will still load slow if your videos are not compressed well. We found a great site to run your videos through to get a good compression and each format. You can see the site here: Video Conversion
I suggest converting your video to WebM first, then converting that to MP4 and OGG to make all three.
Now that your videos are ready, you can play with your html5 streaming video code options. Here is the options available:
- autoplay – autoplay – Specifies that the video will start playing as soon as it is ready
- controls – controls – Specifies that video controls should be displayed (such as a play/pause button etc).
- height – pixels – Sets the height of the video player
- loop – loop – Specifies that the video will start over again, every time it is finished
- muted – muted – Specifies that the audio output of the video should be muted
- poster – URL – Specifies an image to be shown while the video is downloading, or until the user hits the play button
- preload – auto – metadata none Specifies if and how the author thinks the video should be loaded when the page loads
- src – URL – Specifies the URL of the video file
- width – pixels – Sets the width of the video player