This is how to embed a video in a webpage using html5’s video tag.
First, the video must be in a format supported by the browser that it will be viewed with. It seems that the format that has the most widespread browser support (well, at least with the browsers that I like, Firefox and Chrome) right now is ogg (Theora + Vorbis). Another format that is widespread is WebM, but as of this time it isn’t supported by Safari.
First, we must install ffmpeg and ffmpeg2theora, using these commands:
sudo apt-get install ffmpeg sudo apt-get install ffmpeg2theora
Now you should be ready to convert your videos. A simple approach using default settings would look like this. For the purpose of the guide, I used this command.
ffmpeg2theora -o video.ogv video.mp4
Where video.mp4 was the video that I wanted to convert, and video.ogv was what I wanted to output to be called. It would seem that the default settings have the audio at 72 kbps and the video at a variable bit rate that seems to be hanging at a little over 1 Mbps, so this video should stream pretty easily over even a meager broadband connection.
Using this method, I use the server’s computing power to convert the video, rather than uploading an already-converted copy. If you want to get rid of the old video after conversion (which may take a while), just use this command:
rm video.mp4
Now let’s try it out with a very simple html file. Put the following into a file called video.html, and open it with your browser:
<html>
<head>
<style type="text/css">
body {
background-color: #000000;
margin: 0;
border: 0;
padding: 0;
}
</style>
</head>
<body>
<video width="100%" height="100%" controls>
<source src="video.ogv"
type='video/ogg; codecs="theora, vorbis"'>
If you are seeing this, your browser doesn't
support the HTML5 video tag.
</video>
</body>
</html>
This works fine in Firefox (17.0.1), but not Internet Explorer (9.0.12). I haven’t tested it on Chrome or Safari.
I haven’t tried this yet, but this would be the way to convert it to a WebM video, using the default settings:
ffmpeg -i video.mp4 video.webm
If you want to know what format to convert your videos, there is a table on this site that shows which browsers support which formats. Both Safari and IE only support MP4 (H.264 + AAC), whereas Chrome and Firefox both support ogg and WebM. Chrome supports MP4 as well.
A few additional guides I referenced: