Multiple YouTube Player API - javascript

All,
I am trying the implementation of buttons that control multiple videos at once.
▼Sample:
https://jsfiddle.net/g3q6ts0k/31/
▼HTML:
//play
var clickElement = document.getElementById("play");
clickElement.addEventListener("click", function(event) {
player.playVideo();
}, false);
//pause
var clickElement = document.getElementById("pause");
clickElement.addEventListener("click", function(event) {
player.pauseVideo();
}, false);
//change
$('#play').click(function() {
$('#play').css('display', 'none');
$('#pause').css('display', 'inline-block');
});
$('#pause').click(function() {
$('#play').css('display', 'inline-block');
$('#pause').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/ZxnRp4p9SGk?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="media">
<iframe class="player" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/D-eX-rnvEzI?enablejsapi=1" frameborder="0"></iframe>
</div>
<button id="play">play</button>
<button id="pause">pause</button>
Do you know the reason why it does not work properly?
Thanks.

Related

How do I enable a button after a video ends.?

I have a page that contains a video and a button, but i don't want the user to be able to click finish until the video ends.
Code for the video:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Code for the finish button:
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>
you should listen to "ended" event, like so:
var video = document.getElementById("myVideo");
var button = document.getElementById("myButton")
video.addEventListener("ended", function() {
button.disabled = false;
}, true);
See media events here
You can do this:
JavaScript
var element = document.getElementById('video_id');
element.onended = function() {
document.getElementById('btn').disabled = false;
};
jQuery
$("video").on("ended", function (e) {
$('#btn').prop('disabled', false);
});
Same you can use for events play and pause.
For more events you can refer this: https://www.w3.org/2010/05/video/mediaevents.html
You can add an event listener
Like this:
<video width="100%" height="480" controls>
<source src="video/lesson4.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="btn" name="register_btn" class=“enableIfFinish”
disabled="disabled"><h6>FINISH</h6></button>
</div>
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
$(‘.enableIfFinished’).prop(‘disabled’,false);
}
</script>
Do not forget to include jquery library
Following is working example
document.getElementById('someID').addEventListener('ended',videoEndHandler,false);
function videoEndHandler(e) {
document.getElementById("myBtn").disabled = false;
}
<video id="someID" width="100%" height="480" controls>
<source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<form method="POST" action="week.php">
<div class="input-group">
<button type="submit" class="btn" id="myBtn" name="register_btn" disabled="disabled"><h6>FINISH</h6></button>
</div>
</form>

how to play the vimeo video on query automatically?

In the beginning,the video is show,but the it is stop.
I want to play the video when browser starts.
<html>
<head></head>
<body>
<!-- NOTE: ?api=1 and player_id at the end of the URL -->
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
var player = $f(document.getElementById('player'));
player.addEvent('ready', function() {
player.api('play');
});
</script>
</body>
</html>
The froogaloop2 js is not working now try to use player.vimeo.com/api/player.js.
Just try like this
<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var frame = document.querySelector('iframe');
var jqueryPlayer = new Vimeo.Player(frame);
jqueryPlayer.play();
console.log('played the video!');
</script>
I have run this code, just check the out put
You can refer to this https://github.com/vimeo/player.js#create-a-player for more details.

onclick embeded video , background music stop

My problem is exactly like this post
How to stop music when embedded youtube video starts?
But it doesn't solve my problem.
My html for music :
<audio id="myAudio" autoplay>
<source src="music/Morning-Sun.wav">
</audio>
embed video :
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
[edit]
<div class="video">
<div onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio'); aud.pause();">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
First of all, (aside from boohiss for having background music), you are better off to create a function rather than include a string of javascript in your html. You made the error of not defining 'thevid' as a variable, which i corrected. You weren't calling the audio at any point either to stop it, so i created a variable to find it by id, and pause it on video play.
Naturally my sound is different, and as it is short i have set it to loop, but you can easily amend this.
Hope this helps you out :)
var thevid=document.getElementById('thevideo');
var thumb=document.getElementById('thumb');
var playing = 1;
function playvid(){
thevid.style.display='block';
thumb.style.display='none'; document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
var aud = document.getElementById('myAudio');
aud.pause();
playing = 0;
thevid.onended = function(){
aud.play();
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<audio id="myAudio" autoplay loop>
<source src="http://www.rachelgallen.com/monkey.mp3">
</audio>
<div class="video">
<div id="thumb">
<img style="cursor: pointer;" src="images/video-thumb-2.jpg" alt="Walk Through" onclick='playvid();' />
</div>
<div id="thevideo" style="display: none; width:100%;">
<div class="embed-container">
<iframe id="iframe" width="900" height="506" src="https://www.youtube.com/embed/i5e03Re96wY?rel=0&vq=hd720&color=white&autoplay=0&wmode=transparent&theme=dark;controls=0&showinfo=0"frameborder="0" allowscriptaccess="always" allowfullscreen="true"></iframe>
</div>
</div>
</div>
</body>
</html>

Jquery animate HTML5 Video

I am trying to get my video to start at 40% of its original size and once you mouse over it, it animates to 100%. The original size of the div is 760x520 pixels and I need it to start at 300x250 pixels. Heres is the HTML:
<div id="background">
<img src="image/background.jpg" width="760" height="520" style="width:760px;height:520px;position:absolute; top:9px; left:9px;">
<img src="image/videoPanel02.png" style="width:643px; height:366px;position:absolute;top:62px;left:68px;z-index:inherit;">
<img src="image/top_bar2.png" style="width:760px;height:60px;position:absolute;top:9px;left:9px;z-index:inherit;">
<img src="image/bottomMenu_bar.png" style="width:760px;height:45px;position:absolute;top:489px;left:9px;z-index:inherit;">
<div class="big-player" width="500" height="250" style="width:500px;height:250px;overflow:hidden;position:absolute;top:106px;left:134px;z-index:200;">
<video width="500" height="250" id="player2" preload="auto">
<source type="video/mp4" src="http://localhost/HTML5/video/big_buck_bunny.mp4" />
<object width="500" height="250" type="application/x-shockwave-flash" data="js/flashmediaelement.swf">
<param name="movie" value="js/flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=http://localhost/HTML5/video/big_buck_bunny.mp4" />
</object>
</video>
</div>
</div>
and here is the script I have so far:
var videoplayer;
var playCount = 0;
$('video').mediaelementplayer({
features: ['playpause', 'progress'],
success: function (mediaElement, domObject, player) {
videoplayer = player;
$('.mejs-overlay-button').hide();
$('.mutebutton').show();
mediaElement.play();
player.setMuted(true);
//show poster image once the video stops and video restarts
mediaElement.addEventListener('ended', function () {
$('.image-end').show();
playCount++;
if(playCount>=3){
player.pause();
}
},false); //end ended function
}//close success
});//close mediaelementplayer
$('#background').each(function(){
$(this).width($(this).width() * 0.5);
});
$('#background').mouseover(function() {
videoplayer.setMuted(false);
$("#background").animate({
width:"100%",
}, 1500 );
});
Check if this FIDDLE give you some clue.
$(function () {
$("#video")
.on('mouseenter', function () {
$(this).animate({
width: 500,
height: 500
})
})
});

6 Videos in sync Html5

I'm trying to build a page that displays only one video and when we press a button the video is changed to another, but thay all need to stay in sync, because video1 has audio and the other ones needs to be synced to make sense.
Here's what I got, i'm really a noob so sorry for the giant code:
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
var vid1 = document.getElementById("video1");
var vid2 = document.getElementById("video2");
var vid3 = document.getElementById("video3");
var vid4 = document.getElementById("video4");
var vid5 = document.getElementById("video5");
var vid6 = document.getElementById("video6");
if(
$(".button1").click(function(){
$(".video1").show();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button2").click(function(){
$(".video1").hide();
$(".video2").show();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button3").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").show();
$(".video4").hide();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button4").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").show();
$(".video5").hide();
$(".video6").hide();
}
));
if(
$(".button5").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").show();
$(".video6").hide();
}
));
if(
$(".button6").click(function(){
$(".video1").hide();
$(".video2").hide();
$(".video3").hide();
$(".video4").hide();
$(".video5").hide();
$(".video6").show();
}
));
});
</script>
</head>
<body>
<div class="video1">
<video id="video1" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely1.mp4" type="video/mp4">
</video>
</div>
<div class="video2">
<video id="video2" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely2.mp4" type="video/mp4">
</video>
</div>
<div class="video3">
<video id="video3" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely3.mp4" type="video/mp4">
</video>
</div>
<div class="video4">
<video id="video4" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely4.mp4" type="video/mp4">
</video>
</div>
<div class="video5">
<video id="video5" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely5.mp4" type="video/mp4">
</video>
</div>
<div class="video6">
<video id="video6" width="720" height="400" controls preload="auto" autoplay>
<source src="videos/arely6.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="button1">
<button>Camera 1</button>
</div>
<div class="button2">
<button>Camera 2</button>
</div>
<div class="button3">
<button>Camera 3</button>
</div>
<div class="button4">
<button>Camera 4</button>
</div>
<div class="button5">
<button>Camera 5</button>
</div>
<div class="button6">
<button>Camera 6</button>
</div>
</div>
</body>
</html>
I've hacked together a working fiddle prototype; definitely not the most efficient it could be, but it works.
http://jsfiddle.net/3BmDx/
Basically, the way that it works is that the javascript will handle the clicks and will play all of the videos instead of using the 'autoplay' tag. You may want to look into pre-loading the videos before running that .play() for them. Something like:
var videos = 6;
var loaded = 0;
$(video).on("load", function() {
loaded++;
if(loaded==videos) {
// all videos have been loaded on the page, now .play() them
}
}
jQuery is handy because if you want to apply a .hide() to all of the video elements on the page at once, you can simply use $('video').hide() and jQuery will match all video tags.
I use this to my advantage in the reset(b) function. the reset(b) function is called each time a button click is pressed and it will re-enable all buttons, deactivate the current button (helpful for knowing which you selected) and then hide all the videos on the page. Afterward the correct video will be shown.
$(document).ready(function(){
// hide all of the video tags
$("video").hide();
$("button").removeAttr("disabled");
$.each($("video"), function(i,e) {
$(e)[0].play();
});
function reset(b) {
$("button").removeAttr("disabled");
$(b).attr("disabled", "disabled");
$("video").hide();
}
// handle button click for video to show
$("#button1").click(function() {
reset($(this));
$("#video1").show();
});
$("#button2").click(function() {
reset($(this));
$("#video2").show();
});
$("#button3").click(function() {
reset($(this));
$("#video3").show();
});
$("#button4").click(function() {
reset($(this));
$("#video4").show();
});
$("#button5").click(function() {
reset($(this));
$("#video5").show();
});
$("#button6").click(function() {
reset($(this));
$("#video6").show();
});
});
You can use the synchronisation code I used. The essential part is
if (Math.abs(other.currentTime - first.currentTime) > maxDrift) {
// sync all times of videos to first
other.currentTime = first.currentTime;
}
Although this approach works for some cases there are some issues. Browsers synchronise on keyframes, which you have to make sure are in the video. Also lower frame rates (fps<10) tend to be very buggy.

Categories

Resources