Tag Archives: html5

Video Modal Popup similar to Apple.com for HTML5 video

I wanted to know “Are there any open source tools to create modal popups for videos like the ones used on apple.com ?” I wanted something to do video popups in a modal like those on Apple.com – for product videos, etc. I was looking for how the popups are done on the main website – not the regular dialog popups on the apple “store” site. After a lot of looking I found SublimeVideo which is not open source but it is free. So, if you need it for popping up a video like how the main apple website does their videos, check out SublimeVideo and click on “lightbox”: The customization is really easy and it is really easy to add multiple video sources / formats to have both low and high def ( HD ) video and posters, as well as a nice javascript API to interface with the video player.

Posted in Web Development | Tagged , | Leave a comment

VideoJS m3u8 example

Here is an example of how to use video.js with HTTP Live Streaming (HLS) with an m3u8 playlist file: < !doctype html> <html> <head> <link rel=”nofollow” href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”/> <script src=”http://vjs.zencdn.net/c/video.js”></script> </head> <body> <video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”> <source src=”http://server.name.tld/HLS/path.m3u8″ type=’application/vnd.apple.mpegurl’/> </video> </body> </html> via

Posted in Web Development | Tagged , , , | 3 Comments

Using VideoJS with YouTube

I have been using VideoJS for some streaming videos and mp4 videos, but also wanted to pull YouTube videos into the player along with the other videos I had on the site. First of all, the working example. Then, the list of problems ;) VideoJS and Youtube Example How to replicate the Youtube and VideoJS integration: First, clone or download this fork of videoJS and build it. Next, place this in your webpage’s <head> (needs to be there to work with older browsers). Also fix the odd character after the href in the first line (sorry about that) and make sure the path points to the correct location for the files. <link href≠”/video-js/video-js.css” rel=”stylesheet” type=”text/css”/> <script src=”/video-js/video.js”></script> And then place this in your document’s <body>: <video id=”example_video_1″ class=”video-js vjs-default-skin” controls preload=”none” width=”640″ height=”360″ data-setup='{“techOrder”:[“youtube”,”html5″],”ytcontrols”:false}’> <source src=”http://www.youtube.com/watch?v=v1uyQZNg2vE” type=’video/youtube’ /> </video> There is also an example file in the dist directory which will only be created after you “build” the fork you have cloned from github. VideoJS and Youtube Problems With Integration I tried simply giving VideoJS the URL to the YouTube video but that didn’t workout so well. Here are a few things that might help you out with playing You Tube videos in Video JS: There is a pull request for changes that would allow VideoJS to work with YouTube. A few problems with it are: Has not been pulled in Both the Video JS maintainer and the pull requestor have become busy with other projects so it might not … Continue reading

Posted in Tech Tips, Web Development | Tagged , , , | 1 Comment

jQuery.getCSS

jQuery has a nice jQuery.getScript function that allows you to easily add <script> tags to a webpage. How can you do the same thing for CSS files? jQuery doesn’t have a built-in jQuery.getCSS / getCSS function, but you can use jQuery(‘head’).append instead. Here’s an example of how to dynamically insert remote CSS and JavaScript for (free) the HTML5 VideoJS player. jQuery(‘head’).append(‘<link rel=”stylesheet” rel=”nofollow” href=”http://vjs.zencdn.net/c/video-js.css” type=”text/css” />’); jQuery.getScript(‘http://vjs.zencdn.net/c/video.js’,function() { // you can also set callback items here // var myPlayer = _V_(“myvideo”); }); It would be nice if there was this sort of function, but there isn’t :\ jQuery.getCSS(‘http://vjs.zencdn.net/c/video-js.css’);

Posted in Tech Tips, Web Development | Tagged , , | Leave a comment

phpmyadmin: Drag And Drop File Upload

I use phpMyAdmin to manage mySql databases quite often and I find myself uploading / importing SQL files. I’ve gotten a little spoiled with WordPress’ HTML5 drag and drop ajax style uploader. Every time I go to use phpMyAdmin I start wishing that it had a HTML5 style drag-and-drop file uploader, something like this: I think it would be fairly easy to write a plugin and implement this idea but I have not done it yet. Leave a comment if the lack of a drag and drop HTML5 file uploader for phpMyadmin bugs you too.

Posted in Server Administration, Tech Opinion, Web Development | Tagged , , , , , | Leave a comment