Skip to content

rrrodrigo/html5media

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

html5media

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.

Why this fork?

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.

Enabling video and tags in all major browsers

All it takes is three simple steps to enable HTML5 video and audio tags in all major browsers!

  1. Download the and unzip the latest html5media build from the html5media download area.
  1. Upload the contents of the unpacked html5media/ folder to your webserver. Be sure to keep all the bundled files together in the same folder.

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

Using HTML5 video and audio

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.

Help! My file won't play!

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

What's in the box?

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.

More information

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:

About

Enables <video> and <audio> tags in all major browsers.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 92.1%
  • Python 7.9%