Showing posts with label Video. Show all posts
Showing posts with label Video. Show all posts

Saturday, 12 December 2015

Asset Grabber – oEmbed a complete asset embed solution

If you are an AEM/CQ developer and had worked on multiple projects, then you might be very well familiar with how exasperating is to create components for embedding assets in for web page. Here’s how actually it goes from development perspective.
Things starts with video component. Now create a component for YouTube, let’s assume you created. Next day client knock’s your door and say’s, “We are now planning to embed Vimeo also, please add this into your requirement and start working“. Somehow you managed to create a Vimeo component. After 2 days, client again shoots a missile, “We had an internal discussion and now we are planning to feature Ted videos as well, please get started“. At this point what development team and with  how much anger they get into you will be aware, But before leaving for the day you run this command: “project XYZ: Completed Ted Video module“. It means you have completed this as well.
When it comes to assets, it’s very strenuous to take care of all scenarios. Let me introduce youoEmbed, we call it as “Assets Grabber”. Yes, you heard right, it’s having secret magnetic attraction power to pull things from other sites and show in yours. That’s so called secret magnetic attraction is it’s ability to handle and support huge amount of sites starting from VimeoYouTube for videos to Flickr for images to Infogram for charts to Slideshare for slide to Meetup for meetings.

Friday, 20 November 2015

Integrate AEM with YouTube

You can use youtube API to add video in your webpages. Below is the sample code snippet for embedding youtube videos into your webpages.

Note:  In order to make sure your javascript works, add "enablejsapi=1" parameter to the src atttribute. Please check below HTML code.

HTML Code

<h1>In page youtube video player API</h1>
<br/>
<h2><span id="YTvideoLoadTime"></span> </h2>

<h3>Check console logs for player events</h3>
<iframe id='player' width="560" height="315" 
src="https://www.youtube.com/embed/axCKOu3YjmM?list=PLkBe8kbE_7-xmNihqYr19TlYGH7jUhQkY&enablejsapi=1" frameborder="5" allowfullscreen></iframe>



Javascript:

//YOUTUBE API
var player;
var timerStart, timetaken;

jQuery(document).ready(function ($) {
    console.log("ready!");
    loadPlayer();
});

function getArtistId() {
    return 'axCKOu3YjmM';
}

function loadPlayer() {
   console.log("Youtube IFRAME api");
    timerStart = Date.now();
    if (typeof (YT) == 'undefined' || typeof (YT.Player) == 'undefined') {
        var tag = document.createElement('script');        
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        window.onYouTubePlayerAPIReady = function () {
           // console.log("YT undefined calling onYouTubePlayer ");
            onYouTubePlayer();
        };

    } else {
       // console.log("calling onYouTubePlayer ");
        onYouTubePlayer();

    }
}


function onYouTubePlayer() {
    player = new YT.Player('player', {
        // height: '490',
        //width: '880',
       // videoId: getArtistId(),
       // playlist: 'PLkBe8kbE_7-xmNihqYr19TlYGH7jUhQkY',
        playerVars: {
            controls: 1,
            showinfo: 0,
            rel: 0,
            showsearch: 0,
            iv_load_policy: 3
        },
        events: {
            'onStateChange': onPlayerStateChange,
                'onError': catchError,
                'onReady': onPlayerReady
        }
    });
}

var done = false;

function onPlayerStateChange(event) {
    console.log("onPlayerStateChange: " + event.data);
    if (event.data == YT.PlayerState.PLAYING ) {
        console.log("playing");
        done = true;
    } else if (event.data == YT.PlayerState.ENDED) {
        console.log("ended");
        location.reload();
    }
    else if (event.data == YT.PlayerState.PAUSED) {
        console.log("paused");
    }
}

function onPlayerReady(event) {
    //console.log("onPlayerReady");
    timetaken = Date.now() - timerStart;
    $('#YTvideoLoadTime').html("Youtube Video player has loaded in : " + timetaken / 1000 + " seconds");

}

function catchError(event) {
    if (event.data == 100) console.log("ERROR");
}

function stopVideo() {
    console.log("stopVideo");
    player.stopVideo();
}