Thursday 18 April 2013

How to Embed Just a Portion of a YouTube Video

YouTube Video Embed
How do you embed just that green segment of a YouTube video?
Sometimes you may want to embed just a portion of a YouTube video in your web pages.
For instance, you are embedding a movie from YouTube but want the viewer to focus of one particular scene that begins at ‘x’ seconds and ends at ‘y’ seconds. When the scene has finished, the embedded clip should stop playing irrespective of the length of the video.
Well, here are two simple ways to help you embed a part of any YouTube video:

Case A: Embed YouTube Video with Start Time

This is a scenario where you specify a start time for the embedded video and let it play through the end. Here you can use the standard embed code and append the start time parameter to the YouTube URL as illustrated in the following example:
  1. <iframe width="500" height="300" frameborder="0" allowfullscreen
  2. src="http://www.youtube.com/embed/VIDEO_ID#t=1234s"></iframe>
Replace VIDEO_ID with the actual ID of your YouTube video and replace 1234s with the start time (in seconds). For instance, if you want the video to start playback at the 03:24 (mm:ss) mark, you’ll specify the time as t=204s (60*3 + 24).

Case B: Embed YouTube Video with Start & End Time

The following YouTube video from an Apple event is over an hour long but I have only embedded the most interesting 2-minute segment (22:10 – 24:26) where Steve Jobs first announced the iPhone.
Hit the play button inside the embedded player for a quick demo.
The standard YouTube embed code doesn’t support the end time parameter but we can make use of the YouTube JavaScript API to embed a part of any YouTube video. Without boring you with the technical details, here’s your new embed code:
  1. <div videoID="t2MOwQ089eQ" startTime="1330" endTime="1466" height="400" width="400" 
  2.  id="youtube-player"></div>
  3. <script src="http://labnol.googlecode.com/files/youtube-embed.js"></script>
You just have to replace the Video ID, the start time (in seconds), the end time (in seconds), the height of the player (in pixels) and the width in the <DIV> tag as per your needs. See this annotated source code to learn how the playback is controlled via the YouTube API.
Also, if you are planning to use this embed code on a popular site, please host the youtube-embed.js file on your own server as googlecode.com may offer limited bandwidth.

Saturday 13 April 2013

Download Web Pages as PDFs with Chrome for iOS

Just like the desktop version of Chrome, you can now the Google Chrome browser on your iPad or iPhone to download web pages as PDF files without requiring a separate app. The menu options aren’t very intuitive though so here’s a quick walk-through.
PDF Printing with Chrome
Save web pages as PDFs with Chrome on your iPad and iPhone

Print Web Pages as PDFs with Chrome

While you are inside Google Chrome, tap the Menu button and then choose the Print option. Choose Google Cloud Print and you’ll see a list of all your Android and iOS devices that also have Chrome installed on them. Choose the Save to Google Drive option instead and a PDF version of the current web page will instantly get saved to your Google Drive.
Alternatively, you can pick any of your other Android /iOS devices under the Google Cloud Print menu and the PDF file will remotely download to that device. You’ll have to open Chrome on that other device to access the PDF file.
If the PDF printing option isn’t working on your iOS device, make sure that you are signed-in with your Google Account and that Chrome to Mobile option is enabled. This is available under Menu -> Settings -> Google Account (your email address) -> Chrome to Mobile.
One more thing. It is also possible to save web pages as PDFs directly on your iOS device, bypassing Google Drive, but you can’t export that file into other PDF reading apps like iBooks or even your Mail application.
Chrome internally uses the Quartz API of Apple to generate PDF files – the page layout is well preserved but the hyperlinks won’t work inside the PDF.

Find Who is Linking to your Website with Google Analytics

The organic search rankings and Google PageRank of your web pages depend on several factors but the most crucial one is incoming links (also known as backlinks). Search engines treat external links pointing to your website as “votes” and more votes will often translate into higher search rankings.

Find Sites That Are Linking To You

You can use Google Analytics to quickly find out which external websites are linking to your home page or any of your internal pages.  Analytics can also tell you how many incoming links have you “earned” since yesterday and where these backlinks are coming from.
Step 1: Sign-in to your Google Analytics Account and open the “Traffic Sources” section under “Standard Reports.” These options are available in the left sidebar.
Step 2: Under Traffic Sources, expand the Social group and then choose Trackbacks. You can think of Trackbacks as notifications that Site A sends to Site B when A links to B’s content. 
Analytics Trackbacks Report
See all the incoming links to your website in the Analytics Trackbacks report
Step 3: Google Analytics will now display a list of external web pages that have recently linked to any of the pages on your domain. The report also mentions the number of visits that may have been generated to your site as a result of these incoming links.
If you would like to know how many new sites have linked to your websites in the last day, just change the Date Range to “Yesterday” or you can even choose custom dates.

When you cannot open Google or Gmail in Chrome, try this simple fix

Ever since I upgraded to the latest version of Google Chrome, I keep getting “socket” errors when trying to open Google, Gmail or any other website under the google.com domain.
This isn’t as issue with my Internet connection as I can easily access the Google websites from IE and Firefox but they simply refuse to load inside Chrome with the following error:
Google Chrome - Socket Error
Error 15 (net::ERR_SOCKET_NOT_CONNECTED): Unknown error.
The problem gets resolved when the computer is restarted but that’s just a temporary solution as the errors keep coming back. It turns out that this is a known issue in Google Chrome and has also been experienced by dozens of Google users on Twitter.

Fix Socket Errors in Google Chrome

While we wait for the Chrome team to fix the issue, the irony is that it only seems to affect Google websites, there’s one simple step you can perform to get rid of the socket errors without having to restart the computer.
Open Google Chrome and type chrome://net-internals in the address bar (omni box). Switch to the Sockets tab and choose Flush Socket Pools. Now open Gmail or Google.com in Chrome and the site should open without problems.

Monday 8 April 2013

A Podcast Directory Integrated with Dropbox and Google Drive

Podcast Gallery
My latest project, Podcast Gallery is now live. It is an online directory of audio and video podcasts that you can watch /listen in the browser without requiring any software or apps.
Please watch this YouTube video for a quick introduction.
The show pages are integrated with Dropbox and Google Drive and thus you can send your favorite podcast episodes to your online drive directly via the cloud. For instance, if you are on a desktop, you can start a download request and the podcast will instantly become available on your mobile phone (or vice-versa).
The other feature of Podcast Gallery is Collections. You can sign-in with your Facebook or Twitter accounts and add your favorite podcast shows to a collection. These collections have a unique web URL that you can share with friends  or you can download the list as an OPML file. This will help you importing your favorite podcasts into any RSS Reader or another podcasting app.
Podcast Gallery uses the HTML5 media player and hence the audio /video files would play inline without requiring Flash or other plugins.
You can follow the gallery on Twitter, Facebook or through RSS Feeds.
Internally, the site is built on top of WordPress and the podcast data is sourced from iTunes API and the Google Feeds API. The integration with Dropbox and Google Drive is done with the help of filepicker.io while the media players are powered by the MediaElement.js library. The icon fonts are courtesy the Entypo and Font Awesome libraries.

Adobe Media Player for Watching Podcasts and FLV Videos

Adobe Media Player, a desktop media player that lets you play Flash Videos (flv), podcasts and QuickTime movies, just got better.
 adobe-media-player

Adobe today posted a new build of Adobe Media Player on Adobe Labs – the UI is more or less the same but Adobe Media player can now play videos that are encoded using H.264 codec.
You would need Adobe AIR to install Adobe Media Player. And though you can watch videos that are already saved on your desktop, the current build of AMP won’t let you add new RSS feeds.
Updated: For subscribing to your favorite video podcasts inside Adobe Media Player, go to “My Favorites” and click the “Add RSS Feed” link at the bottom. Thanks Brian.
Get Adobe Media Player [Available for Win and Mac]