• Home
  • About 404TS
  • Contact

404 Tech Support

Where IT Help is Found

  • Articles
    • Code
    • Entertainment
    • Going Green
    • Hardware, Gadgets, and Products
    • Management
    • Network
    • News
    • Operating Systems
    • Security and Privacy
    • Software
    • System Administration
    • Talking Points
    • Tech Solutions
    • Web
    • Webmaster
  • Reviews
  • Media
    • Infographics
    • Videos
  • Tech Events
  • Tools
    • How do I find my IP address?
    • Browser and plugin tests
  • Get a Technical Consultation
You are here: Home / Articles / Webmaster / HTML5 Video and Audio tags BBCode for phpBB

HTML5 Video and Audio tags BBCode for phpBB

2009-12-09 by Jason

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.
videobbcode

To use it in a post, you just type the video BBCode with the width, height, and URL to a video.

videousage

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.

videodemo

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.

videoerror

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.

audiobbcode
To use the Audio BBCode, you just put the URL to the source audio file in the post and wrap it with the BBCode.

audiousage

Viewing the embedded audio tag will appear like this:

audiodemo

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.

Filed Under: Webmaster

Trending

  • Domain typo squatting spreads malware as Pinterest Tool
    In Media, Security and Privacy
  • Using Meraki’s free MDM tools for the mobile devices in your household
    In Network, Security and Privacy
  • HP Smart Web Printing – Reducing paper and toner waste
    In Hardware, Gadgets, and Products, Software

Latest Media Posts

Find Out Where To Download SNES ROMs

Find Out Where To Download SNES ROMs

Multifunctional Video Conversion Tools – Wondershare Video Converter

Multifunctional Video Conversion Tools – Wondershare Video Converter

  • Popular
  • Latest
  • Today Week Month All
  • How to ‘Unblock’ multiple files at a time with PowerShell How to 'Unblock' multiple files at a time with PowerShell
  • Increase IIS Private Memory Limit to improve WSUS availability Increase IIS Private Memory Limit to improve WSUS availability
  • Command line to take ownership and change permissions Command line to take ownership and change permissions
  • Creating and editing views in phpMyAdmin Creating and editing views in phpMyAdmin
  • Read the Event Logs on Windows Server Core Read the Event Logs on Windows Server Core
  • How to Purchase Cryptocurrencies? How to Purchase Cryptocurrencies?
  • Top 6 necessary aspects to consider when hiring Angular developers Top 6 necessary aspects to consider when hiring Angular developers
  • Full guide on drawbacks and benefits of Node.js for making the perfect choice for your business Full guide on drawbacks and benefits of Node.js for making the perfect choice for your business
  • Benefits of End-To-End Testing That Will Match Company Expectations Benefits of End-To-End Testing That Will Match Company Expectations
  • 3 Key Features of Pets Health Monitoring Systems 3 Key Features of Pets Health Monitoring Systems
Ajax spinner

Elevator Pitch

404 Tech Support documents solutions to IT problems, shares worthwhile software and websites, and reviews hardware, consumer electronics, and technology-related books.

Subscribe to 404TS articles by email.

Recent Posts

  • How to Purchase Cryptocurrencies?
  • Top 6 necessary aspects to consider when hiring Angular developers
  • Full guide on drawbacks and benefits of Node.js for making the perfect choice for your business

Search

FTC Disclaimer

404TechSupport is an Amazon.com affiliate; when you click on an Amazon link from 404TS, the site gets a cut of the proceeds from whatever you buy. This site also uses Skimlinks for smart monetization of other affiliate links.
Use of this site requires displaying and viewing ads as they are presented.

Copyright © 2023 · Magazine Pro Theme on Genesis Framework · WordPress · Log in