Making a component that shows you tube video.
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 !!