常见 HTML5 视频播放器介绍

HTML5 引入了 <audio> 和 <video> 标签用于在HTML文档中播放多媒体文件。HTML5视频是新标准的方式来显示在网络上的视频，而无需使用任何插件，但不同的Web浏览器和操作系统，不同视频格式的支持都有所限制。

视频格式和浏览器支持情况

Browser	MP4	WebM	Ogg
Internet Explorer 9+	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	No Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	Yes	Yes
Safari	Yes	No	No
Opera	No	Yes	Yes
iOS Safari 3.2	Yes	No	No

 

Embedding Video Player

<video poster="movie.jpg" controls>  <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>  <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'>  <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>  <p>This is fallback content</p>  </video>

How to Create HTML5 Video files

There are some free software available which can convert any video format to HTML5 video format. You can download Miro Video Converter to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and iPad.

HTML5 Video Players

1. Projekktor: The Free Web Video Player

Projekktor is a self-hosted, open source video (and audio) player for the web, written in Javascript, released under GPLv3. It simplifies the way you implement and work with web video by solving tons of cross browser- and compatibility- issues, adding eye candy and by providing extremely powerful non standard features. With other words: We try to create the best truely free web media player – period.

2. MediaElement.js

HTML5 player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers.

3. Kaltura HTML5 Video Player

HTML5 Enables Web Pages to playback and manipulate video and audio across platforms and devices - powering amazing rich-media applications that work everywhere. HTML5video.org is an online community of web developers and the home of the Kaltura open source video player Javascript library.

4. Codo Player

Codo Player solves the problem of various browser/platform video support mismatches in order to reach maximum possible audience. Offering support for HTML5 / FLASH and even 油Tube platforms and providing unified setup, api and user interface.

5. Video.js

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an HTML5 Video Player. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like fullscreen and subtitles, manages the fallback to Flash or other playback technologies when HTML5 video isn't supported, and also provides a consistent JavaScript API for interacting with the video..