Tag Archives: video

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

How to use HLS (HTTP Live Streaming) with Amazon CloudFront

I have a mp4/h.264 video that is a around 300mb. I would like users to be able to watch it on both desktop browsers and mobile devices. I have the video file stored on Amazon S3. I have two cloudfront sources enabled – one for download and one for streaming. I know I can use something like VideoJS to play the file with the ‘video/mp4’ source being the “download” cloudfront source which, I believe, plays while the file is being downloaded – I think this is called “progressive download” but it is not true streaming. I also realize that I can use something like JWPlayer and the “streaming” cloudfront source to give users on a desktop device, or a device that supports flash, the RTMP streaming experience. The problem I’m facing is poor performance on iOS devices – especially ones with limited bandwidth. From what I’ve been reading HTTP Live Streaming (HLS) seems to be the only “streaming” protocol that iOS devices really support. And as far as I can tell, Amazon Cloudfront only natively offers RTMP streaming of uploaded mpeg/h.264 files (not HLS). Amazon has a Live Smooth Streaming tutorial for use with Amazon CloudFront which appears to be, in a nutshell, a Windows IIS server running Adobe Flash Media Server and pushing out the HLS stream via Amazon Cloudfront. So, my questions were: If I want to push H.264/mpeg4 files “streaming” to iOS devices or HTML5 players, is the “right” way to do this to use HLS? Can … Continue reading

Posted in Web Development | Tagged , , , , , , | 2 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

Save $45 on Roku + 6 Months of Hulu Plus

Celebrate the dads and grads in your life with this special offer. The Roku HD streaming player connects easily to TVs with the included HDMI cable. Simply connect the Roku HD to a wireless network to start streaming current hit TV shows, classic series, and acclaimed movies in high-def — it only takes minutes to set up! Hurry, this limited-time offer is only available until Father’s Day, June 17, 2012.

Posted in Marketing, Tech Tips | Tagged , , , | Leave a comment

Facebook Video Party

Facebook Video Party 12 Participants Moderation Controls HD Video Apparently you can mute the whole room for presentations, kick/ban trolls, and has two extra spots for presenters. I’ve heard the video and sound quality is absolutely unreal, plus you’ll be able to use a bluetooth headset with the iphone to participate via mobile. I’ll try to see if I can get a beta screen shot sometime tomorrow. via https://plus.google.com/115957092291818573863/posts/cAVySAw8icX

Posted in Marketing, Social Media, Tech Opinion, Tech Tips | Tagged , , , , , , , | Leave a comment

Roku 2 XS USB Video Formats

The Roku 2 XS supports video, audio, and photo playback in the following formats: Video: MKV using H.264, MP4/M4V/MOV using H.264 (and MPEG4), WMV/ASF using WMV9 or VC-1. Audio: AAC, MP3, or Dolby Digital/DTS Passthru Photos: JPEG & PNG These have to be loaded using the USB port, as the Micro SD slot is only for additional storage. Of the Roku 2 series boxes only the Roku 2 XS supports media playback of your own external media. Also please note that for “security reasons” you can’t move a microSD card from one Roku 2 player to another without re-formatting it.

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

Hurricane Irene Videos

Posted in Random | Tagged , | Leave a comment

Video and Special Effects Tools

Posted in Software | Tagged , , | Leave a comment