geschiedenis
Dit is de zoveelste incarnatie van mijn website wie nieuwsgierig is kan de
oudere 'recente' wijzigingen bekijken.
A few weeks ago I wanted a way to place a HTML5 video in a page without Safari immediately downloading it. I came up with a sort of lightbox solution, loading video in a page with ajax.
On the desktop WebKit will normally auto-buffer all video it finds on your webpage. With just one video that is not a problem, but when having multiple video's it may take a while and you may not even wish to play all of them putting an unnecessary strain on your connection and the server. Firefox typically loads just the first part, but the default Safari way made me want to load the video only when requested.
With a few lines of jQuery Javascript and css I made a sort of lightbox like interface to show the video only when a user requests it. This way I can put multiple thumbnails or video previews on a page, make them play almost directly but still have a page that should load fast.
First make sure you have a html page with working video example. I recommend copying the source right from Open Images, like "Beeldtelefoon" one of our most used and most favorite examples.
<div xmlns:dct="http://purl.org/dc/terms/"
xmlns:cc="http://creativecommons.org/ns#"
class="oip_media"
about="http://www.openbeelden.nl/files/23/23180.23172.WEEKNUMMER741-HRE00016E93.ogv">
<video poster="http://www.openbeelden.nl/images/67910/WEEKNUMMER741-HRE00016E93.png"
controls="controls">
<source type="video/ogg; codecs=theora"
src="http://www.openbeelden.nl/files/23/23180.23172.WEEKNUMMER741-HRE00016E93.ogv" />
<source type="video/mp4; codecs=h264"
src="http://www.openbeelden.nl/files/23/23186.23172.WEEKNUMMER741-HRE00016E93.mp4" />
<source type="application/x-mpegurl"
src="http://www.openbeelden.nl/files/23/37679.23172.WEEKNUMMER741-HRE00016E93.m3u8" />
</video>
<span class="license"><a
href="http://www.openbeelden.nl/media/23173/Eerste_proef_met_beeldtelefoon"
rel="cc:attributionURL" property="dct:title">Eerste proef met beeldtelefoon</a>, door
<a href="http://www.openbeelden.nl/users/beeldengeluid"
rel="dct:creator"
property="cc:attributionName">Polygoon-Profilti (producent) / Nederlands Instituut voor Beeld en Geluid (beheerder)</a>,
is gelicenseerd onder
<a href="http://creativecommons.org/licenses/by-sa/3.0/nl/"
rel="license">Creative Commons - Naamsvermelding-Gelijk delen</a>.</span>
</div>
It is quite a lot, but it includes its Creative Commons license information and three kind of video files for all flavors of web browsers, even mobile ones. It looks like this using oiplayer of course since I activate it on all media in my site, yours may look a bit differently without it (more like 'video.html' read below).
The only thing I added to it were width="288" and height="520" in the video tag.
Save it as a seperate html page, for example 'video.html'. This is the page I want to load via Ajax.
To make sure you have it completely woking with oiplayer you need to include these files in the head of your html document.
<script src="js/jquery-1.5.1.min.js" type="text/javascript"><!-- help ie --></script>
<script src="js/jquery.oiplayer.js" type="text/javascript"><!-- help ie --></script>
<link href="css/oiplayer.css" rel="stylesheet" type="text/css" />
This enable the black version of oiplayer on top of all media tags in the body of your html page.
$(document).ready(function() {
$('body').oiplayer({controls:'top dark'});
});
For the sake of simplicity I used the short version without the fallback plugins. More information about how to include the Flash and Java fallback mechanisms can be found at the oiplayer readme, scroll down to the how-to.
One of the nice things of developing a jQuery plugin is not only that it makes your code easier to use, you can do jQuery like stuff with it like activate it later etc.
Create a new html page and include the jQuery and oiplayer scripts in its head like in the previous paragraph. I saved the previous example as 'video.html' and made a new page 'demo1.html'. Since all the Javascript work will be done now in 'demo1.html' I moved all files from the header of 'video.html' and put them in 'demo1.html'.
Make a div in our new page with a class 'video' that includes a link that points to your video. You could for example put it around a preview image of the video for a nicer look, but in this example it is just a link.
<div class="video"><a href="video.html">Click here to open an historical video</a></div>
Make sure the correct page opens when you click it.
The jQuery Javascript piece that doing all the work. This works on the above illustrated div with class 'video'.
$(document).ready(function() {
// only when there are div's with a class .video
if ($('div.video').length) {
// append zoom div once to your html page
if ($('div#zoom-video').length < 1) {
$('body').append('<div id="zoom-video"><div></div></div>');
}
$('div.video').find('a').click(function(ev){
ev.preventDefault();
var videolink = $(this).attr('href'); // the page to load
$('div#zoom-video > div').load(videolink, function(){
$('div#zoom-video').fadeIn('slow');
// activating oiplayer is just one line, yeah!
$(this).oiplayer({controls:'top dark'});
// close zoomed video when clicked outside video
$(this).click(function(ev){ ev.stopPropagation(); });
$('div#zoom-video, a#zoom-video-close').click(function(ev){
ev.preventDefault();
$('div#zoom-video').fadeOut('slow');
$('div#zoom-video > div').empty();
});
});
});
}
});
That all the functionality. You'll only need some css to make it look pretty.
OIPlayer is activated after the jQuery.load() command finishes loading the page with the video tag. The video is loaded in our fullscreen window: 'div#zoom-video > div' created earlier.
At last a few lines of css to make it work and look pretty. In case you want to beatify how your video is shown in your page, the Javascript adds a div with an id 'zoom-video' to the page. Within that div is another div that holds the html that is loaded.
div#zoom-video {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 1000;
width: 100%;
height: 100%;
background-color: rgba(51,51,51,0.9);
}
div#zoom-video > div {
margin: 10% auto;
width: 512px;
border: 8px solid #efefef;
position: relative;
background-color: #000;
color: #efefef;
}
That's it basically. Check the demo.
OIPlayer 'listens' to the standard media player attributes, so when you want the video to auomatically play when you open it add the autoplay attribute to the video tag. Like below:
<video poster="http://www.openbeelden.nl/images/67910/WEEKNUMMER741-HRE00016E93.png"
controls="controls"
autoplay="autoplay">
...
</video>
These attributes can be left empty in html5, this for example is valid:<video autoplay controls>, but I like to write proper xml since I normally work with jspx templates.
2 comments
Hi Toly
first of all great work!
I'd like to ask how and if its possible to implement auto play.
thanks
Thanks a lot for your kind reaction!
I thought autoplay just worked. At least I promise somewhere in my docs that OIPlayer listens to the normal video attributes and it did previously I believe, but somewhere along the way it got lost in development I am afraid. I restored it now though in my last check in http://scm.mmbase.org/view/openimages/trunk/src/main/webapp/oiplayer/js/jquery.oiplayer.js hope you'll find it useful.
Dit is de zoveelste incarnatie van mijn website wie nieuwsgierig is kan de
oudere 'recente' wijzigingen bekijken.En ik heb hier een pagina waarop ik nieuwe en oudere versies van my_editors verzamel.