H5VT è un plugin jQuery per avere video in HTML5 nei tooltip!

Intro

Ci stiamo veramente divertendo con jQuery e HTML5, sono un'accoppiata interessante, dalle grandissime potenzialità!

Una delle tante idee a cui stiamo lavorando, nel tempo che dedichiamo alla ricerca, si è trasformata in una plugin jQuery e visto l'animo Open Source che caratterizza TrustWeb, abbiamo deciso di distribuirla a tutti, gratuitamente, sperando di dare una mano a qualcuno e, perché no, uno spunto a qualche sviluppatore per ideare qualcosa di grandioso!

Come funziona

Il funzionamento di questa plugin è nativamente limitata ai browser che supportano HTML5, è possibile integrare script come l'ottimo Modernizr per gestire le retrocompatibilità su browser meno moderni, ma nel demo e nei file contenuti nel download non sarà inclusa nessuna di queste soluzioni, perché vogliamo mantenere più semplice possibile la comprensione di questa plugin.

Per vari motivi i browser che supportano HTML5 non sono arrivati ad un formato standard, questo significa che non si è giunti ad un unico formato video standard che tutti utilizzano; ogni browser supporta un formato piuttosto che un'altro.
La soluzione è inserire le alternative di formato nel tag <video>.

Vediamo la HEAD della pagina

	<script type="text/javascript" src="javascript/jquery.min.js"></script>
		
	<!-- H5VT Plugin -->
	<script type="text/javascript" src="javascript/h5vt/jquery.h5vt.js"></script>
	<link rel="stylesheet" type="text/css" href="javascript/h5vt/h5vt.css" />
	<script type="text/javascript">
		$(document).ready(function(){	
			$("a.h5vt").h5vt();
		});
	</script>
	<!-- END H5VT Plugin -->

Il codice, come potete notare, è molto semplice: includiamo l'ultima versione di jquery minimizzata, includiamo la plugin jquery.h5vt.js e il suo css h5vt.css.

Lo funzione jQuery assegna semplicemente a tutti i link con classe h5vt la funzione h5vt, rendendoli dotati di video tooltip!

Vediamo l'HTML per il funzionamento della plugin

	<a href="http://www.trustweb.it/it/portfolio/multimedia/trustweb.html" class="h5vt" rel="t1">Questo link ha 
	un Video ToolTip in HTML5!

	<div id="t1">
		<video width="320" height="180" loop>
			<source src="video/trustweb.mp4" type="video/mp4"/>
			<source src="video/trustweb.theora.ogv" type="video/ogg"/>
			<source src="video/trustweb.webm" type="video/webm"/>
		</video>
	</div>

In nei link in cui vogliamo far comparire un tooltip al mouseover, assegneremo al classe h5vt pratica l'attributo rel identifica l'id del div contenente il video che sarà mostrato nel tooltip. Il tag <video> imposta le dimensioni del video e assegna l'attributo loop; al suo interno vi sono tre tag <source> che vanno a definire il medesimo video codificato nei tre formati supportati dai browser: MP4, WebM e Theora Ogg Video.

Il browser richiederà automaticamente il formato supportato.

Fatto! È stato semplice, vero?

Download

Attualmente (01/12/2011) la plugin è alla sua primissima release, ma siamo degli entusiasti e vogliamo condividere con tutti questa plugin, è anche un ottimo modo per aprire il primo articolo tecnico sul questo nuovo blog.

H5VT verrà aggiornato e migliorato la dove sarà necessario, vi invitiamo quindi a segnalarci malfunzionamenti o inviarci i vostri suggerimenti, lasciando un commento a questa pagina.

Versione Attuale: H5VT 0.1

Scarica il pacchetto zip: Scarica H5VT

Live Demo

Passa il mouse sopra questo link, per vedere qualcosa di sexy!

Commenti dell'articolo
Lascia il tuo commento
 
 
 
 
 
 
1
Whatever
Yeah, I knew it was a html5 plugin so I put the object tag into the video tag. What I meant by "doesn't work on IE" it's just that the function onmouseOut doesn't seems to work, since we still see the video when the mouse comes out of the <a> zone. Anyways I'll try to fix it by myself today, but if you have an idea on how to do this, it would be appreciated ;)
 
2
@Whaterver: this is an html5 video plugin, it doesn't work on non html5 browser, but you can check compatibility using modernizr and do your changes (static tooltip, or flash) @Deyson: i will patch i soon (hard times), please be back soon :)
 
3
Whatever
Hey there. Still working with that great plugin, even made a video/photo gallery out of it. But still have a problem; it doesn't work on IE and since I'm not THAT good with all javascript stuff... Do someone have any clue how to make it works on IE?
 
4
Please let me know when you have added the patch. :) P.S. this would make a very good and popular wordpress plugin ( hint ) ( hint )
 
5
Hello Mike. I figured out the problem with the image I had. It seems that if I add a movie as slink it causes a conflict with my Shadowbox plugin. But now with either # or another link it works fine. I guess I will have to add a link to be able to play the movie back in full quality. Thank you :)
 
6
@Deyson: can't you put the image inside the link like: <a href="#" class="h5vt" rel="t1"><img src="http://mypathtoimage.jpg" /></a> ??
 
7
@Deyson: i will patch the plugin to implement these features. But you have to wait a few days.
 
8
Hello Mike I have another question. Is there a way I can have the video restart from the start when the mouse comes back after the mouse un-hovers. Thank you! :)
 
9
Yea!! It is working now! Thank you Mike! I have a question. Is it possible I can add the hover action to an image instead of text? Thank you so very much :)
 
10
@deyson: sorry i made a mistake in this post, i am updating it. Actually the javascript code had an unclosed function
 
11
Here is the link: http://motion-master-templates.com/test-page
 
12
@Deyson: i get a blank page at your url
 
13
Hello Mike! Thank you for answering. I looked in Firebug and I found an error stating "missing } after function body” on line 94. Which is where the Javascript above is placed. Any idea on how I can fix that? Thank you for your time :)
 
14
Whatever
@Mike : I'll try hard to find by myself, but of course, a little help will be appreciated. So thanks in advance. ;)
 
15
@Whatever: surely it can be used for a video gallery. I will publish a tutorial when i have a few spare time. @Deyson: man, you have JS error on your page, first of all fix them ;-)
 
16
Whatever
That's a great plugin. But I still have a question, is there a way to make it works on a video gallery?
 
17
I tried and I am not able to get it to work: http://motion-master-templates.com/test-page
 
18
it depends on how your WP website is build. First of all add the JS to header.php
 
19
This is exactly what I was looking for. Can you help by explaining how to add this to a wordpress site? Thank you very much!
 
20
Complimenti per il plugin e grazie per averlo condiviso gratuitamente...veramente un ottimo lavoro.