0.0.3-dev • Published 11 years ago
xhtml-video v0.0.3-dev
xhtml-video 
A jQuery plugin to use object based video instead of html5 tags
Description
xhtml-video intends to be an accessible, lightweight and a design-agnostic video player for xhtml. The main purpose of this project was to offer a way to use video player capabilities of modern browsers on xHtml documents
It's simple, accessible and can be used with strict xHtml pages.
How to use it
In a web page, just include jquery.js then the jquery.xhtml-video.js file.
xhtml-video is intended to be applied on object tags.
Here is an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>video</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="jquery.xhtml-video.js"></script>
<script type="text/javascript">
$(function(){
$('object[type="video/ogg"]').xhtmlvideo();
$('object[type="video/quicktime"]').xhtmlvideo();
});
</script>
</head>
<body>
<div>
<object type="video/ogg" data="/video/big_buck_bunny_480p_stereo.ogv" width="854" height="480">
<p><a type="video/ogg" href="/video/big_buck_bunny_480p_stereo.ogv">download this video</a></p>
</object>
<object type="video/quicktime" data="/video/big_buck_bunny_480p_h264.mov" width="854" height="480">
<p><a type="video/quicktime" href="/video/big_buck_bunny_480p_h264.mov">download this video</a></p>
</object>
</div>
</body>
</html>So here is the deal:
- If the browser is able to read the file by itself,
objecttag is replaced by animgtag. One click on the image will play the video, an other click will pause it. - If the browser can't read it by itself but has a plugin to do that... it will probably launch it.
- If the browser can't read the file, it will download it. So you can read it in your favorite media player