HTML5 video and audio tags make embedding media into documents as easy as
embedding an image. All it takes is a single <video> or <audio> tag.
Unfortunately, not all browsers natively support these HTML5 tags.
This fork modifies the Flowplayer-based Flash fallback so subititles in SubRip SRT format can be displayed for video clips embedded on web pages. When HTML5 <video> tag is used directly, the subtitles can be shown with the help of jquery videosub library. How to embed a movie with captions into a HTML document? Here's an example:
<video width="320" height="240" controls poster="video/train_ride_poster.jpg">
<source src="video/train_ride.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="video/train_ride.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
<source src="video/train_ride.webm" type='video/webm; codecs="vp8, vorbis"'></source>
<track src="video/train_ride.srt" kind="subtitle" srclang="en-US" label="English"></track>
</video>
This will play the video with subtitles without Flash in any HTML5-capable browser. For any older browser it will revert to Flowplayer (Flash) and display the same SRT subtitles using Flowplayer plugins called FlowplayerCaptions and FlowplayerContent.
One more thing: Flowplayer has been upgraded to version 3.2.7 in this fork.
All it takes is three simple steps to enable HTML5 video and audio tags in all major browsers!
- Download the and unzip the latest html5media build from the html5media download area.
-
Upload the contents of the unpacked
html5media/folder to your webserver. Be sure to keep all the bundled files together in the same folder. -
Add the following snippet the to
<head>of your document:<script src="/path/to/your/html5media.min.js"></script>
You can see this code in action on the html5media demo site.
Please read our Getting Started guide for more information.
HTML5 allows you to embed video and audio into your document using the following easy syntax:
<video src="video.mp4" width="320" height="240" controls preload></video>
<audio src="audio.mp3" controls preload></audio>
Find out more about HTML5 on the Dive Into HTML5 video page.
You can ask for help and discuss all aspects of HTML5 media and audio on the html5media discussion group.
It's probably encoded incorrectly. Videos should always be saved as h.264 (mp4), or Theora (ogv) files. Find out more on our Video Formats page.
Audio files should be saved as mp3, AAC (m4a) or Vorbis (ogg).
The html5media project consists of a single, minified Javascript file that is used to detect your browser's HTML5 video capabilities. Any video tags that cannot be played are dynamically replaced with a Flash video player.
The bundled Flash video player is provided by Flowplayer under the GPL3 licence. You can find out more about Flowplayer on the Flowplayer website.
The html5media project was developed by Dave Hall. You can get the code from the html5media project site.
Dave Hall is a freelance web developer, based in Cambridge, UK. You can usually find him on the Internet in a number of different places:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent