Enables

Overview

HTML5 video made easy

All it takes is a single line of code to make HTML5 video and audio tags work in all major browsers.

How to enable video and audio tags in all major browsers

To make HTML5 video and audio tags work in all major browsers, simply add the following line of code somewhere in the <head> of your document.

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

That's it! There is no second step!

How to embed video

You can embed video into your page using the following code.

<video src="video.mp4" width="320" height="200" controls preload></video>

For more information and troubleshooting, please visit the video wiki page.

How to embed audio

You can embed audio into your page using the following code.

<audio src="audio.mp3" controls preload></audio>

For more information and troubleshooting, please visit the audio wiki page.

Why use html5media?

HTML5 video and audio tags were designed to make embedding a video as easy as embedding an image. They were also designed to give users a faster experience by doing away with browser plugins such as Adobe Flash.

Unfortunately, older browsers don't support HTML5 video and audio tags, and even modern browsers don't support a consistent set of video codecs, making embedding a video rather difficult.

The html5media project makes embedding video or audio as easy as it was meant to be. It's a fire-and-forget solution, and doesn't require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It's one of the smallest, fastest solutions available, and as browser technology improves it will become even faster.

More information

The html5media project is open source and can be found on GitHub. You can find out more information on the html5media wiki, or the main html5media project page.

About the author

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:

Extra credits

The html5media project bundles together a number of excellent open-source and creative-commons projects. They are listed below.

Comments
  • Not working on Firefox 23/24

    Not working on Firefox 23/24

    screen shot 2013-10-18 at 3 50 08 pm

    I have a file embedded in a page but in FF it looks like this. The page appears to try and load flowplayer, but it just renders the blank box, instead of an actual player. This is using v. 1.1.6 and the behaviour is the same in both versions of FF. The file is an mp3, and it works as expected in chrome and safari. Just wondering if i've missed something:

    this is my haml to include in the template: %audio{:src => @song.song_file.expiring_url(600), :controls => true, :preload => true}

    opened by christopherdbull 15
  • Serious timing/caching problem with Flash fallback

    Serious timing/caching problem with Flash fallback

    Hi, I’m doing the HTML5 Video Comparison site http://praegnanz.de/html5video/

    I discovered a strange bug in the flash fallback, which is quite hard to spot. In the case of having only the mp4 file (no webm alternative), Firefox 4 and Firefox 5 load the flash player somehow, but it’s complete black and there comes no Flowplayer logo, and no video, of course.

    It occurs never on the local server and it occurs more often when the browser cache is activated, but even with de-activated cache sometimes the show will not show up correctly!

    I assume there’s some strange kind of timing issue, where the swf is not fully loaded at a certain time, I don’t know. Can you see that problem, too?

    fixed 
    opened by gerritvanaaken 10
  • Video playback in IE9 seems not to work.

    Video playback in IE9 seems not to work.

    I tried to play a m4v-File (exported by QuickTime on Mac for iPhone-Devices) but IE9 does not know how to play the file. There should be the flash fallback but it isn't. The same occures when I try to play some mp4 files (not optimized for iPhone).

    Could it be possible that the IE9 is not supported yet?

    error 
    opened by flixflax 9
  • Tips for easy encoding

    Tips for easy encoding

    People who have an own webspace must encode the video files before uploading and using html5media. I offer a free (and without registration) service for online conversion.

    After conversion a mp4 (h264 / aac), a poster (jpg) and a html file (with html5media!) is available.

    http://mp4generator.reloado.com

    Please give some feedback. A mention for beginners on your site would be great ;)

    opened by refda 8
  • IE8 FlowPlayer implementation bug

    IE8 FlowPlayer implementation bug

    Video in IE8 isn't running. Loading the FlowPlayer fails, cause http://static.flowplayer.org/swf/expressinstall.swf doesn't exist anymore.

    I'm not sure if there is a newer FlowPlayer version which should be used by html5media or if it is an issue of FlowPlayer itself.

    Setup:

    • Windows XP, IE8
    • some old Flash Player, which needs to be updated to use the FlowPlayer, so the script wants to load expressinstall.swf
    • Including html5media via
    • providing mp4 and ogg
    error 
    opened by loeffert 6
  • Fix Styles If Already Assigned

    Fix Styles If Already Assigned

    The fallback element will always be set as a block element as it currently is. I needed the ability to set it as hidden on load, so I set the script to only set to block if it doesn't exist. The audio height also was set to always be 26px high. People may want to set this also, so I put through the getDimension function.

    opened by fanfavorite 5
  • Audio controls dont display in ie9 when preload is set to none.

    Audio controls dont display in ie9 when preload is set to none.

    The audio controls don't display in ie9 when preload is set to none. IE9 doesn't display the native player. I think its an ie bug, the player is actually there and you can right click on it and you get a popup which gives the option to play and pause., and it plays.. its just not visible.

    If preload is set to auto or metadata its visible.

    Do you know a workaround for this? If it loaded the flashplayer in ie9 that would be ok i think..

    I like the simplicity of html5media, and think it should be good if things weren't so complex these days.

    Do you have a list of tested browsers/os and mobile devices?

    Thanks.

    opened by Lakshmana515 5
  • Firefox and ajax loaded html

    Firefox and ajax loaded html

    We have a page in which only the last x number of postings appear. If the user clicks on the See More link, the script makes an ajax call for additional postings. Any of these additional postings that contain video tags do not play/load in Firefox 5.0.

    You can check this by going to our site http://www.mymommemories.com/ and clicking on the see more button at the bottom until you see the Doin' the Macarena! post.

    I've tried several different file formats, ogv, mov (mp4), flv. None of them would play.

    If the video was on the initial page load everything loaded/played fine.

    browserbug 
    opened by mountainpaul 5
  • Setup Fallback Class Names

    Setup Fallback Class Names

    I am in a situation where I need to compile a list of videos after html5media has been run, so I figured that adding classes to the fallback versions would be the easiest solution.

    opened by fanfavorite 4
  • http://api.html5media.info/1.1.7/html5media.min.js not found

    http://api.html5media.info/1.1.7/html5media.min.js not found

    Hello,

    I'm following "README.markdown" and noticed "http://api.html5media.info/1.1.7/html5media.min.js" shows a 404 error. Is it still being hosted?

    -Leslie

    opened by leslc 4
  • Fallback Element New Styles and New Express Install URL

    Fallback Element New Styles and New Express Install URL

    When the fallback element is created, it doesn't copy over styles. This change copies over the inline styles of the element. I also updated the express install url for flowplayer.

    opened by fanfavorite 4
  • When used as mediawiki widget, Safari browser shown fallback code requesting to download flash player ...

    When used as mediawiki widget, Safari browser shown fallback code requesting to download flash player ...

    Note that this project is being used as a mediawiki widget for playing audio files. See here for background:

    https://www.mediawikiwidgets.org/Html5mediaAudio

    Unfortunately, in some cases, this code is resulting in problems for Safari browser (mobile and desktop). Problem manifests as a poorly formatted notice stating that Flash 9.0 or greater is required along with a link to adobe to download flashplayer (see attached screen grab). The issue appears to be triggering perhaps outdated fallback code in this software. Should this fallback code be revised to remove references to flash? As is, fallback code appears to present similarly to adware injection malware (although the link does direct to adobe).

    For demonstration of undesired behavior - please visit following mediawiki sandbox page using Safari browser (mobile or desktop):

    https://sandbox.semantic-mediawiki.org/wiki/Embed_audio_files

    It is unclear specifically what the issue is but the browser console shows following warnings:

    [Log] JQMIGRATE: Migrate is installed with logging active, version 3.0.1 (load.php, line 141) [Warning] This page is using the deprecated ResourceLoader module "jquery.tabIndex". (Embed_audio_files, line 280) [Warning] JQMIGRATE: jQuery.fn.delegate() is deprecated (load.php, line 141) [Warning] JQMIGRATE: jQuery.fn.bind() is deprecated (load.php, line 141)

    Thank you. Hopefully this can be repaired as this is a very useful project.

    Screen Shot 2020-07-23 at 11 45 20 AM

    opened by johnnyBrandom 3
  • Anyway to add playbackrate option to the controls?

    Anyway to add playbackrate option to the controls?

    I can see solutions to change this in the code but having it on the controls allows the user to choose. If not possible, any plans to add the playbackrate at all? Thank You! https://www.w3.org/2010/05/video/mediaevents.html

    opened by tekjava 1
  • Not working in IE10 -- not even on your demo page...

    Not working in IE10 -- not even on your demo page...

    Hi,

    I can't get video playback to work on IE10 (IE11 is fine). And it doesn't work in IE10 when I load your site here: http://html5media.info either.

    In both places, I get... "Error: Unsupported video-type or invalid File path."

    I am on Windows server 2008r2, and have tried both mime-types for mp4: video/mpeg and video/mp4.

    Neither work.

    All suggestions would be greatly appreciated. :)

    worksforme 
    opened by mddog 8
  • Does it support URL with query string?

    Does it support URL with query string?

    Hello. I want to use html5media on IE8. Our audio file are hosted on Amazon S3 ,so query string is required. But, html5media seems not to work when URL is appended some parameter.

    For example, our URL are appended AWSAccessKeyId,Expires,Signature. On IE8, our MP3 file is not loaded and FLASH control doesn't work. Otherwise, URL length or a kind of character affect?

    Example using S3 (not working)

    <audio preload controls>
      <source src="https://aaa.s3.amazonaws.com/a/b/test.mp3?AWSAccessKeyId=AAAAAAAAAA&Expires=99999999999&Signature=ABCDEFGH" />
    </audio>
    

    Example no query string (working)

    <audio preload controls>
      <source src="https://abc.com/audio.mp3" />
    </audio>
    
    opened by Hiromi-Kai 7
Owner
Dave Hall
Experienced Python, Rust and Typescript developer. Equally comfortable in the cloud, or down to the metal on embedded hardware.
Dave Hall
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Dec 27, 2022
HTML5

One file. Any browser. Same UI. Author: John Dyer http://j.hn/ Website: http://mediaelementjs.com/ License: MIT Meaning: Use everywhere, keep copyrigh

MediaElement.js 8k Jan 8, 2023
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

Austin Michaud λ 497 Dec 21, 2022
Secretly record audio and video with chromium based browsers

snoop TCC restricts access to the device camera and microphone to protect user data from unauthorized access. But... If you trusted your browser with

BreakPoint Technologies 10 Aug 30, 2022
:musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser

ts-audio · ts-audio is an agnostic and easy-to-use library to work with the AudioContext API and create Playlists. Features Simple API that abstracts

Evandro Leopoldino Gonçalves 284 Dec 25, 2022
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library included.

Aim-Player This is a simple web based media player for playing video and audio. Build with pure HTML, CSS and Javascript. No framework or library incl

Aim Mikel 2 Jun 27, 2021
Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications

RTC SCORE Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications. The first version of the algorithm

Gustavo Garcia 25 Nov 27, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 7 Dec 15, 2022
Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Mux 6 Aug 2, 2022
jPlayer : HTML5 Audio & Video for jQuery

jPlayer : HTML5 Audio & Video for jQuery Gitter Support for Zepto 1.0+ compiled with the data module. What is jPlayer? jPlayer is a jQuery/Zepto plugi

jPlayer 4.6k Dec 27, 2022
High-quality Interactive Audio/Video Electron SDK

实时音视频(TRTC)Electron 版 SDK 实时音视频(TRTC)Electron 版 SDK 包含实时音视频和直播能力。腾讯实时音视频(Tencent Real-Time Communication,TRTC)将腾讯20多年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播

LiteAVSDK 14 Jan 6, 2023
High-quality Interactive Audio/Video Uni-app SDK

如何使用 步骤一:注册并创建 uni-app 账号 搭建 App 开发环境步骤如下: 下载 HBuilderX 编辑器 。 项目中 HBuilderX 目前使用的最新版本,如果此前下载过 HBuilderX,为保证开发环境统一请更新到最新版本。 DCloud 开发者中心注册 之后登录 HBuilde

LiteAVSDK 19 Dec 20, 2022
Frontend for a social audio & video app

LɪᴛᴛʟᴇAᴘᴇ littleape is a frontend for the free social audio & video social-media platform greatape. littleape, via greatape, is a Fediverse technology

Charles Iliya Krempeaux 2 Sep 7, 2022
Modern browsers already had a vivid player for video

Modern browsers already had a vivid player for video. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> support, customize control panel will become a piece of cake. <msc-ez-video /> adopts CSS custom properties, developers could style them as they want.

Paul 1 Dec 29, 2021
A Node JS Express/Serverless demo application that creates a slideshow video using the Pexels image library and Shotstack video editing API.

Shotstack Pexels Slideshow Video Demo This project demonstrates how to use the Shotstack cloud video editing API to create a video using an HTML form

Shotstack 25 Dec 9, 2022
A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams.

MP4Inspector A Chrome extension to help you inspect Mp4 video content and find irregularities in video streams. Installation In chrome navigate to chr

Bitmovin 48 Nov 28, 2022
Video.js - open source HTML5 & Flash video player

Video.js - HTML5 Video Player Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 video and Media Source Ext

Video.js 34.8k Jan 5, 2023
Telegram bot with a graphical interface that enables you to schedule messages and generate automatic replies 🤖

Telegram bot with a graphical interface that enables you to schedule messages and generate automatic replies ??

rn0x 5 Dec 6, 2022