SimpleVideo – a jQuery Plugin for Simple HTML5 Video Control

20,11,2010 at 14:25 Yorum bırakın

<![CDATA[

Post Source

Plugin Source Files

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 lte8 lte7 lte6"> <![endif]-->
<!--[if IE 7 ]>		 <html class="ie ie7 lte8 lte7"> <![endif]-->
<!--[if IE 8 ]>		 <html class="ie ie8 lte8"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

<head>
	<title>SimpleVideo</title>

	<meta charset="utf-8">

	<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />


</head>


<body>

	<video width="853" height="480" poster="poster.png" id="test">
		<source src="trailer_480p.ogg" type="video/ogg">
		<source src="trailer_480p.mov" type="video/mp4">
	</video>
	<p>
		(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
	</p>
	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
		google.load("jquery", "1");
	</script>
	<script src="jquery.simplevideo.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() {

			$('video').simpleVideo();

		});
	</script>


</body>

</html>
/*
 simpleVideo jQuery plugin
 http://www.viget.com/inspire

 Copyright 2010, Viget Labs
 Licensed under GPL

 This program is free software; you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation; version 2 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
*/

(function() {

	$.fn.simpleVideo = function(options) {
		var opts = $.extend({}, $.fn.simpleVideo.defaults, options);
		return this.each(function() {
			var video = this,
				o = $.meta ? $.extend({}, opts, $video.data()) : opts,
				$video = $(this),

				elements = {
					overlay: $(o.overlay),
					video: $video,
					wrapper: $(o.wrapper)
				},
				playing = false,
				playCheck = null;

			function init() {
				if(video.play && typeof(video.play) === "function") {
					$video.wrap(elements.wrapper).before(elements.overlay);
					$video.bind({
						click: function() {
							$video.trigger("toggle");
						},
						pause: function() {
							pause();
						},
						play: function() {
							play();
						},
						stop: function() {
							stop();
						},
						toggle: function() {
							if(isPlaying()) {
								pause();
							} else {
								play();
							}
						}
					});
					elements.overlay.bind({
						click: function() {
							$video.trigger("toggle");
						}
					});
				} else {
					if(o.isNotSupported && typeof(o.isNotSupported) === "function")
						o.isNotSupported();
				}
			};

			function play() {
				video.play();
				pingVideo();
				if(o.onPlay && typeof(o.onPlay) === "function")
					o.onPlay(elements);
			};

			function pause() {
				video.pause();
				endPing();
				if(o.onPause && typeof(o.onPause) === "function")
					o.onPause(elements);
			};

			function stop() {
				video.pause();
				if(o.onStop && typeof(o.onStop) === "function")
					o.onStop(elements);
			}

			function isPlaying() {
				if(video.paused || video.ended) {
					return false;
				}
				return true;
			};

			function pingVideo() {
				playing = true;
				playCheck = setInterval(function() {
					if(isPlaying()) {
						return;
					}
					endPing();
				}, 1000);
			};

			function endPing() {
				playing = false;
				clearInterval(playCheck);
				o.onStop(elements);
			};

			init();
		});
	};

	$.fn.simpleVideo.defaults = {
		isNotSupported: function() {},
		onPause: function(elements) {
			elements.overlay.fadeIn();
		},
		onPlay: function(elements) {
			elements.overlay.fadeOut();
		},
		onStop: function(elements) {
			elements.overlay.fadeIn();
		},
		overlay: '<span class="simple-video-overlay"></span>',
		wrapper: '<div class="simple-video-wrapper"></div>'
	};

})(jQuery);
body {
	background: #ccc;
	padding: 50px;
}

.simple-video-wrapper {
	box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 5px 15px rgba(0,0,0,0.4);
	height: 480px;
	margin: 0 auto;
	position: relative;
	width: 853px;

}

.simple-video-overlay {
	background: rgba(0,0,0,0.4) url(button.png) 50% 50% no-repeat;
	cursor: pointer;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
}

Plugin DemoDownload the Plugin]]>

Reklamlar

Entry filed under: Html5, Jquery, Out-source, Video.

UX experiment – An alternative way for a user to pass data between web sites A Beginner’s Guide to Google Website Optimizer

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Kasım 2010
P S Ç P C C P
« Eki   Ara »
1234567
891011121314
15161718192021
22232425262728
2930  

Most Recent Posts


%d blogcu bunu beğendi: