Expand my Community achievements bar.

SOLVED

Making a component that shows you tube video.

Avatar

Level 2
Level 2
1/12/17 9:20:23 AM

Hi All ,

I am new to AEM so just trying to make few components.I made a component and add a dialog to it to fetch the You tube url to be shown in the page.
I am successful in fetching the data from URL and also able to manipulate it but can't able to send that data into js file which will take up the you video.I am providing the code .Please have a look and guide.
My component.

<%@include file="/libs/foundation/global.jsp"%>
<script src="https://www.youtube.com/iframe_api"></script>
<%@ page import="com.day.cq.dam.api.Asset,
                   com.day.cq.wcm.api.WCMMode,
                   com.day.cq.wcm.api.components.DropTarget,
                   com.day.cq.wcm.foundation.Placeholder,
                   org.apache.jackrabbit.commons.JcrUtils"%>
<html>                       
<%@ page import="java.util.*"%>
<script type="text/javascript" src="/apps/aemfirstproject/components/page/youtubevideocomponent/clientlibs/youtubeapi.js"></script>
<body>


<cq:includeClientLib categories="JSSamples" />
<%
    String vpath=properties.get("videopath","");

    String a="";
    String b="";
    StringTokenizer st=new StringTokenizer(vpath,"=");
while(st.hasMoreTokens()){
a=st.nextToken();
b=st.nextToken();

}
%>
<input type="hidden" id="uri" value="<%=b%>">

</body>
</html>

JS file
 

 

var player;
var a=document.getElementById('uri').value;
alert("a");
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'a',
        alert("videoId");
        playerVars: {
            color: 'white',
            playlist: ''
        },
        events: {
            onReady: initialize
        }
    });
}
function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}
// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}
$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});
// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}
$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
    player.pauseVideo();
});
$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});
$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});
$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});
$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});
$('.thumbnail').on('click', function () {

    var url = $(this).attr('data-video-id');

    player.cueVideoById(url);

});


Thanks in advance !!

Views

2.7K

Replies

5
Sign in to like this content

Total Likes

Translate
Translate
1 Accepted Solution

Avatar

Correct answer by
Administrator
Administrator
1/13/17 12:44:04 AM
  1. Login to CRXDELite.
  2. Navigate to the directory stucure we have created earlier.
  3. Go inside the Component folder.
  4. Right-click and select Create Component.
  5. Enter the following:
    Label: youtube
    Title: DisplayYouTube
    Description: This component is used to display the YouTube video
    Group: AEM Company
  6. Click Next and Next.
  7. Enter Allowed Parent as */parsys
  8. Click Next and Click OK.
  9. Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
  10. Add the following code:
    <div style="overflow: hidden;"> <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe> </div>

    (I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)

  11. Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
  12. Right click YouTube, select Create > Create Dialog.
  13. Enter title as YouTube and select OK.

The component is created now. Let us enable it.

  1. Open the web page you created.
  2. Go to the Design View.
  3. Enable the Component Group; that is, AEM Company.
  4. Go to the Edit view.
  5. From the component group, drag and drop the component to your page.
  6. See the way YouTube video appears.

~kautuk



Kautuk Sahni

View solution in original post

Views

1.4K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply
5 Replies

Avatar

Administrator
Administrator
1/13/17 12:42:58 AM

Pleas have a look at this bolg post :- http://blogs.adobe.com/sunil/2015/07/10/create-your-first-sightly-component/

//Create your first Sightly component (YouTube component !!!)

Video Link:- https://youtu.be/85CTsguW3fY

I hope this would help you.

~kautuk



Kautuk Sahni

Views

1.4K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Correct answer by
Administrator
Administrator
1/13/17 12:44:04 AM
  1. Login to CRXDELite.
  2. Navigate to the directory stucure we have created earlier.
  3. Go inside the Component folder.
  4. Right-click and select Create Component.
  5. Enter the following:
    Label: youtube
    Title: DisplayYouTube
    Description: This component is used to display the YouTube video
    Group: AEM Company
  6. Click Next and Next.
  7. Enter Allowed Parent as */parsys
  8. Click Next and Click OK.
  9. Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
  10. Add the following code:
    <div style="overflow: hidden;"> <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe> </div>

    (I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)

  11. Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
  12. Right click YouTube, select Create > Create Dialog.
  13. Enter title as YouTube and select OK.

The component is created now. Let us enable it.

  1. Open the web page you created.
  2. Go to the Design View.
  3. Enable the Component Group; that is, AEM Company.
  4. Go to the Edit view.
  5. From the component group, drag and drop the component to your page.
  6. See the way YouTube video appears.

~kautuk



Kautuk Sahni

Views

1.4K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate
Jump to reply

Avatar

Level 2
Level 2
1/13/17 11:19:53 PM

Hi Kautuk ,

 

Thanks for your valuable reply.It helped me a lot in understanding the concept.But there is slight change in my requirement .I want that author should provide the you tube URL in dialog box and that url will be processed. I have created the dialog box and provided the text box for youtube url to provide. I have rendered that URL in my JSP page and converted that url into embeded url as you mentioned.Below is the code :

<%@include file="/libs/foundation/global.jsp"%>

<%@ page import="java.util.*"%>

<%
    String vpath=properties.get("videopath","");
    String a="";
    String b="";
    StringTokenizer st=new StringTokenizer(vpath,"=");
    while(st.hasMoreTokens()){
    a=st.nextToken();
    b=st.nextToken();
    }
String url="https://www.youtube.com/embed/"+b;
%>
<%=b%>

<%=url%>// for seeing the url is embedded or not(working fine)
<div style="overflow: hidden;">
        <iframe width="560" height="315" src='url' frameborder="0" allowfullscreen></iframe>
</div>

But in the html page there is one error showing "A custom errorhandler for 404 responses".
Can you please help me out of this.smiley

Kind regards,

kdatta

Views

1.5K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate

Avatar

Level 2
Level 2
4/10/18 6:38:29 AM

You can refer below link, that has reference of Creating an Experience Manager YouTube Component

https://helpx.adobe.com/experience-manager/using/aem63_htl_youtube.html

Views

1.5K

Replies

0
Sign in to like this content

Total Likes

Translate
Translate