HTML 5 has brought a few cool things with its arrivals. With browsers starting to understand these features and people updating their browsers, we can start to implement some of these items and get them into every day use. The ability to embed audio and video without being required to wrap it in an external player and require that your users also have that plugin is a great step forward for a multimedia web. To make its implementation a little more practical, here you can see how it works and how to use it in a phpBB forum. Check out the comments on this article in our forums to see it in action.
A modern browser is required to properly render HTML 5, like Firefox 3.5 and the current version of Google Chrome, and hopefully more browsers will update to include the HTML 5 standards. The video and audio tags can accept different formats of files and there isn’t a specified standard due to many technicalities to specify and adopt one across the Web Industry. You can use the HTML 5 audio and video tags with Ogg Theora, Ogg Vorbis, and WAV format media if you’re using Mozilla Firefox 3.5+.
Video
To incorporate the HTML 5 video tag, we’ll create a standard BBCode. We need to obtain the width, height, and source of the video from the individual making the post, so we’ll use a BBCode like this:
The Number1 should be filled in with the width (in pixels), Number2 with the height, and the Text with the URL to the video.
The HTML tag for video is surprisingly simple compared to having to use embed or object tags. It also feels very familiar due to how closely it resembles the img tag.
your browser does not support the HTML5 video tag
Your BBCode should appear similar to how mine is configured and shown in the following screenshot. You can alter your html and add more attributes as you wish from the W3C site linked above. For example, I use the controls attribute to add the play/pause interface to the video. You might also consider the autobuffer attribute depending on how you expect to use it. The text between the opening and closing tag is what you’ll see if your browser doesn’t understand HTML 5.
To use it in a post, you just type the video BBCode with the width, height, and URL to a video.
If you view the post in a modern browser that understands HTML 5, you should see the video, plain and simple. The control bar is at the bottom since we included that attribute in our HTML replacement. It will move out of the way as soon as the cursor is not over that part of the video.
If you view the post in a browser that doesn’t understand HTML 5, you’ll see the message that you put between the opening and closing tags in the BBCode. You could also use this area of the code to put a fail-over to the previous embed/object method of showing videos. I would say just leave it with the error message. It’s the only way some people will ever be forced to move from old, dying browsers, in my opinion.
Audio
The HTML 5 audio tag works much the same way as the video tag above and it’s actually a little simpler because we don’t have to worry about the size of the video.
The BBCode will look like:
The Text wrapped inside the audio BBCode will be the URL to the source file.
The HTML replacement will be similar to the video but simpler:
Your browser does not support the HTML5 audio element.
To use the Audio BBCode, you just put the URL to the source audio file in the post and wrap it with the BBCode.
Viewing the embedded audio tag will appear like this:
If your browser doesn’t understand HTML 5, you can expect to see the message you put between the audio tags to show through.
Thanks to the simplicity of the new HTML 5 tags, you can very easily implement them as BBCode into your phpBB forum to start working with the new audio and video tags. Thanks to a few browsers pushing the envelope and quickly adopting these new standards, you can experience these changes already. Check out the comments on this article in the forum to see examples of the HTML 5 components.