Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 67faa97832143e2561900b8deb4cb75a9ce7296e @maccman committed May 25, 2010
@@ -0,0 +1,3 @@
+examples
+server.py
+media/FlareVideo.swf
@@ -0,0 +1,20 @@
+Copyright (c) 2009 Made by Many Limited and Alexander MacCaw
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
@@ -0,0 +1,147 @@
+
+###Features
+
+ * HTML5 video with Flash fallback
+ * Easy CSS/JS/HTML customization and theming
+ * Full screen support
+ * Completely open source and free for commercial use
+
+###Formats
+
+Format supported depends on your browser.
+
+ - All browsers: MP4, FLV
+ - Firefox: Ogg
+ - Safari: MP4, MOV
+
+###Browser support
+
+ * Safari
+ * Firefox
+ * IE 7 >=
+
+###Examples
+
+ jQuery(function($){
+ var fv = $("#video").flareVideo();
+ fv.load([
+ {
+ src: 'http://your/site.mp4',
+ type: 'video/mp4'
+ },
+ ]);
+ });
+
+###Requirements
+
+* [jQuery](http://jquery.com)
+* [jquery.flash.js](http://jquery.lukelutman.com/plugins/flash)
+* [jquery.ui.slider](http://jqueryui.com)
+
+###Usage
+
+To use, you need to include all the required JavaScript libraries (above), and then flarevideo.js.
+You then need to include flarevideo.css, and a theme - such as flarevideo.default.css.
+Once that is sorted you may need to fix the path to the images in the CSS files, and the path to the swf (flashSrc option).
+
+Then, just follow the examples or API below.
+
+###API
+
+New FlareVideo. Options:
+
+ * autoplay
+ * width
+ * height
+ * poster (src to poster image)
+ * preload
+ * autobuffer
+ * keyShortcut (add listeners for space/escape key events)
+ * flashSrc (path to flash file)
+ * useNative
+
+Called on a jQuery element.
+
+ jQuery.flareVideo(options);
+
+Load sources:
+e.g.
+ flareVideo.load([{
+ src: 'video.mp4',
+ type: 'video/mp4'
+ }]);
+
+ FlareVideo#load(sources)
+
+Self explanatory:
+
+ FlareVideo#play
+ FlareVideo#pause
+ FlareVideo#stop
+ FlareVideo#togglePlay
+ FlareVideo#fullScreen(state = true)
+ FlareVideo#toggleFullScreen
+
+Seek to position in video
+
+ FlareVideo#seek(position)
+
+Set video volume, number between 0.0 and 1.0
+
+ FlareVideo#setVolume(volume)
+
+Remove video from the DOM
+
+ FlareVideo#remove
+
+##Events
+
+Add callback for when FlareVideo is setup
+
+ FlareVideo#ready(func)
+
+Bind callback to event
+
+ FlareVideo#bind(name, callback)
+
+Bind single callback to event
+
+ FlareVideo#one(name, callback)
+
+Event types:
+
+ * click
+ * dblclick
+ * onerror
+ * onloadeddata
+ * oncanplay
+ * ondurationchange
+ * ontimeupdate
+ * onpause
+ * onplay
+ * onended
+ * onvolumechange
+
+You can also access the events on the FlareVideo instance. e.g.
+
+ FlareVideo#onplay(callback)
+
+###Theming
+
+Take a look at flarevideo.default.css and flarevideo.spotify.css for tips.
+
+You'll need to style both the input range element, and the jQuery UI slider fallback.
+
+When the video player is idle, a class of idle will be added to it. You can hide the controls using that class.
+
+When the video player is playing, a class of playing will be added to it.
+
+The state of the video player is available under the data-state attribute.
+
+###Flash
+
+Flash is, by default, a fallback when HTML5 video is not supported.
+
+If you pass a relative path as a video file src, Flash will take that relative path from the SWF.
+
+If the video source path you pass is on a separate domain, you will need to set up a [crossdomain.xml](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html) file.
5 TODO
@@ -0,0 +1,5 @@
+TODO
+ * IE support
+ * Flash full screen
+ * Flash full screen controls
+ * Fix seek jump on Firefox
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <title>Flare Video</title>
+ <link rel="stylesheet" href="stylesheets/flarevideo.css" type="text/css">
+ <link rel="stylesheet" href="stylesheets/flarevideo.default.css" type="text/css">
+ <script src="javascripts/jquery.js" type="text/javascript"></script>
+ <script src="javascripts/jquery.ui.slider.js" type="text/javascript"></script>
+ <script src="javascripts/jquery.flash.js" type="text/javascript"></script>
+ <script src="javascripts/flarevideo.js" type="text/javascript"></script>
+ <script type="text/javascript" charset="utf-8">
+ jQuery(function($){
+ fv = $("#video").flareVideo();
+ fv.load([
+ {
+ src: 'http://flarevideo.s3.amazonaws.com/stylo.mp4',
+ type: 'video/mp4'
+ }
+ ]);
+ })
+ </script>
+ <style type="text/css" media="screen">
+ body {
+ background: #27282C url(images/bg.png) repeat;
+ }
+
+ #video {
+ -webkit-box-shadow: 0 0 20px #000;
+ -moz-box-shadow: 0 0 20px #000;
+ width: 900px;
+ height: 500px;
+ overflow: none;
+ margin: 5% auto;
+ }
+ </style>
+</head>
+<body>
+ <div id="video"></div>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 67faa97

Please sign in to comment.