I was given a task to embed questions in between youtube videos. The questions should appear after a particular timeframe i.e like after 10 seconds and after 30 seconds. I found a javascript file which takes care of the same. Create a div tag in your html page, the id attribute of the div tag should be "player". There is also a div which has a popup with id "myModal" which is used to invoke the popup. You can use any jquery or javascript popup for the same. In this case I have used inbu
Here is the complete code of the file
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player,videoid;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '415px',
width: '780px',
videoId: 'YOUR_YOUTUBE_VIDEO_ID',
playerVars: { 'autoplay': 0, 'controls': 1,'autohide':1,'wmode':'opaque' },
events: {
'onStateChange': onPlayerStateChange
}
});
}
var done = false,isQ1displayed=false,isQ2displayed=false;
function onPlayerStateChange(event) {
setInterval(function () {
var current_time = player.getCurrentTime();
console.log(current_time);
if(Math.floor(current_time)==10 && isQ1displayed==false)
{
$("#myModalLabel").html("Q. Question 1?");
pauseVideo();
isQ1displayed=true;
done=true;
}
else if(Math.floor(current_time)==30 && isQ2displayed==false)
{
$("#myModalLabel").html("Q. Question 2?");
pauseVideo();
isQ2displayed=true;
done=true;
}
}, 1);
}
function hidePopup(){
$('#myModal').modal('hide');
done=false;
playVideo();
}
function showPopup(){
$('input[type=radio]').each(function() { this.checked = false; });
$('#myModal').modal({
backdrop:'static',
keyboard:false
});
}
function pauseVideo() {
player.pauseVideo();
showPopup();
}
function playVideo() {
player.playVideo();
}
function stopVideo() {
player.stopVideo();
}
</script>
Thanks
Ritesh Tandon
Here is the complete code of the file
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player,videoid;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '415px',
width: '780px',
videoId: 'YOUR_YOUTUBE_VIDEO_ID',
playerVars: { 'autoplay': 0, 'controls': 1,'autohide':1,'wmode':'opaque' },
events: {
'onStateChange': onPlayerStateChange
}
});
}
var done = false,isQ1displayed=false,isQ2displayed=false;
function onPlayerStateChange(event) {
setInterval(function () {
var current_time = player.getCurrentTime();
console.log(current_time);
if(Math.floor(current_time)==10 && isQ1displayed==false)
{
$("#myModalLabel").html("Q. Question 1?");
pauseVideo();
isQ1displayed=true;
done=true;
}
else if(Math.floor(current_time)==30 && isQ2displayed==false)
{
$("#myModalLabel").html("Q. Question 2?");
pauseVideo();
isQ2displayed=true;
done=true;
}
}, 1);
}
function hidePopup(){
$('#myModal').modal('hide');
done=false;
playVideo();
}
function showPopup(){
$('input[type=radio]').each(function() { this.checked = false; });
$('#myModal').modal({
backdrop:'static',
keyboard:false
});
}
function pauseVideo() {
player.pauseVideo();
showPopup();
}
function playVideo() {
player.playVideo();
}
function stopVideo() {
player.stopVideo();
}
</script>
Thanks
Ritesh Tandon