Permalink
Browse files

changed/added support to UI-videoize currently existing videotags

  • Loading branch information...
1 parent 09f26b2 commit 9aa54404f8adc28f9dc43149c885c6900d86e222 Carl Fürstenberg committed Mar 21, 2010
Showing with 47 additions and 50 deletions.
  1. +33 −43 example.html
  2. +1 −2 jquery.video.css
  3. +13 −5 jquery.video.js
View
@@ -1,49 +1,39 @@
<?xml version="1.1" charset="UTF-8"?>
<!DOCTYPE html>
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-<script src="http://js.azatoth.net/libs/jquery/1.4.2/jquery.js"></script>
-<script src="http://js.azatoth.net/libs/jquery-ui/1.8rc3/ui/jquery-ui.js"></script>
-<script src="jquery.video.js"></script>
-<link rel="stylesheet" href="http://js.azatoth.net/libs/jquery-ui/1.8rc3/themes/base/jquery-ui.css" />
-<link rel="stylesheet" href="jquery.video.css" />
-<title>jQuery UI Video test</title>
-<style>
- #foo {
- width: 854px;
- height: 480px;
- }
-</style>
-<script type="text/javascript"
- src="http://jqueryui.com/themeroller/themeswitchertool/">
-</script>
-<script>
- $(function(){
- $('#switcher').themeswitcher();
- $('#foo').video({
- poster: 'http://stream.azatoth.net/big_buck_bunny.png',
- sources: [
- {'title': 'http://stream.azatoth.net/big_buck_bunny_480p_surround-fix.avi', 'type': 'video/mp4'},
- {'title': 'http://stream.azatoth.net/big_buck_bunny_480p_h264.mov', 'type': 'video/h264'},
- {'title': 'http://stream.azatoth.net/big_buck_bunny_480p_stereo.ogg', 'type': 'video/ogg'},
- {'title': 'http://stream.azatoth.net/big_buck_bunny_720p_surround.avi', 'type': 'video/mp4'},
- {'title': 'http://stream.azatoth.net/big_buck_bunny_720p_h264.mov', 'type': 'video/h264'},
- {'title': 'http://stream.azatoth.net/big_buck_bunny_720p_stereo.ogg', 'type': 'video/ogg'}
- ]
- }
- );
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <script src="http://js.azatoth.net/libs/jquery/1.4.2/jquery.js"></script>
+ <script src="http://js.azatoth.net/libs/jquery-ui/1.8rc3/ui/jquery-ui.js"></script>
+ <script src="jquery.video.js"></script>
+ <link rel="stylesheet" href="http://js.azatoth.net/libs/jquery-ui/1.8rc3/themes/base/jquery-ui.css" />
+ <link rel="stylesheet" href="jquery.video.css" />
+ <title>jQuery UI Video test</title>
+ <style>
+ #foo {
+ width: 854px;
+ height: 480px;
+ }
+ </style>
+ <script type="text/javascript"
+ src="http://jqueryui.com/themeroller/themeswitchertool/">
+ </script>
+ <script>
+ $(function(){
+ $('#switcher').themeswitcher();
+ $('video').video();
+ });
+ </script>
+ </head>
+ <body>
+ <video width="854px" height="480px" poster="http://stream.azatoth.net/big_buck_bunny.png">
+ <source src="http://stream.azatoth.net/big_buck_bunny_480p_h264.mov" type="video/h264"></source>
+ <source src="http://stream.azatoth.net/big_buck_bunny_480p_stereo.ogg" type="video/ogg"></source>
+ <source src="http://stream.azatoth.net/big_buck_bunny_480p_surround-fix.avi" type="video/mp4"></source>
+ </video>
+ <div>© copyright Blender Foundation | www.bigbuckbunny.org</div>
+ <div id="switcher"></div>
-
- });
-</script>
-
-</head>
-<body>
- <div id="foo"></div>
- <div>© copyright Blender Foundation | www.bigbuckbunny.org</div>
-<div id="switcher"></div>
-
-</body>
+ </body>
</html>
View
@@ -1,8 +1,7 @@
.video-control {
width: 320px;
height: 40px;
-/* background: #787878;*/
- position: relative;
+ position: absolute;
opacity: .8;
}
.video-progress {
View
@@ -91,7 +91,7 @@ $.widget("ui.video", {
poster: null,
autoPlay: false,
loop: false,
- autoBuffer: true,
+ autoBuffer: false,
degrade: '<p>Your browser does not support this widget.</p>'
},
@@ -109,7 +109,13 @@ $.widget("ui.video", {
html: self.options.degrade
};
- self.videoElement = $('<video/>', videoOptions).appendTo( self.element );
+ if( self.element.is('video') ) {
+ self.videoElement = self.element;
+ self.element.wrapAll( '<div />' );
+ self.element = self.element.parent();
+ } else {
+ self.videoElement = $('<video/>', videoOptions).appendTo( self.element );
+ }
$.each( this.options.sources, function() {
self.videoElement.append(
@@ -154,7 +160,7 @@ $.widget("ui.video", {
if( self["_event_" + this] ) {
self.videoElement.bind( this + ".video", $.proxy(self["_event_" + this],self) );
} else {
- //self.videoElement.bind( this + ".video", $.proxy(function(){console.log("event %s", this, arguments)},this) );
+ self.videoElement.bind( this + ".video", $.proxy(function(){console.log("event %s", this, arguments)},this) );
}
}
);
@@ -184,7 +190,8 @@ $.widget("ui.video", {
'my': 'bottom',
'at': 'bottom',
'of': this.videoElement,
- 'offset': '0 -10'
+ 'offset': '0 -10',
+ 'collision': 'none'
}
);
@@ -356,7 +363,8 @@ $.widget("ui.video", {
'my': 'bottom',
'at': 'bottom',
'of': this.videoElement,
- 'offset': '0 -10'
+ 'offset': '0 -10',
+ 'collision': 'none'
}
);
},

0 comments on commit 9aa5440

Please sign in to comment.