Categories Uncategorised

How to manage all control on vimeo video.

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Vimeo All Controll Management</title>
<script src=”http://code.jquery.com/jquery-1.11.3.min.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”src/jquery.vimeo.api.js”></script>
<link rel=”stylesheet” href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script type=”text/javascript”>
$(document).ready(function($) {
$( “#play” ).click(function() {
$(“iframe”).vimeo(“play”);
});

$( “#pause” ).click(function() {
$(“iframe”).vimeo(“pause”);
});

$( “#seek-to” ).click(function() {
$(“iframe”).vimeo(“seekTo”, 10);
});

$( “#set-volume” ).click(function() {
$(“iframe”).vimeo(“setVolume”, 0.6);
});
$(“iframe”).vimeo(“paused”, function(data){
console.log( “Is paused?”, data );
});
// get current position (time)
$(“iframe”).vimeo(“getCurrentTime”, function(data){
console.log( “Current time”, data );
});
// get total duration in seconds
$(“iframe”).vimeo(“getDuration”, function(data){
console.log( “Video length”, data );
});
// get volume in percentage
$(“iframe”).vimeo(“getVolume”, function(data){
console.log( “Volume is”, data );
});
});
</script>
</head>
<body>
<h1 class=”text-center”>jQuery Vimeo.API.js Plugin Demo</h1>
<div class=”container” style=”margin:30px auto; max-width:500px”>
<div class=”row”>
<div class=”col-lg-12″>
<iframe src=”https://player.vimeo.com/video/128947850?title=0&amp;byline=0&amp;portrait=0&amp;color=f2f2ea” width=”500″ height=”281″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
</div>
<div class=”row”>
<div class=”col-lg-12 text-center”>
<button id=”play” class=”btn btn-danger”>Play</button>
<button id=”pause” class=”btn btn-danger”>Pause</button>
<button id=”seek-to” class=”btn btn-danger”>Seek to 10 sec</button>
<button id=”set-volume” class=”btn btn-danger”>Set volume to 0.6</button>
</div>
</div>
</div>
<script type=”text/javascript”>
var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-36251023-1’]);
_gaq.push([‘_setDomainName’, ‘jqueryscript.net’]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
// fired when the video is playing
$(“iframe”).on(“play”, function(){
console.log( “Video is playing” );
});
// fired when the video is paused
$(“iframe”).on(“pause”, function(){
console.log( “Video is paused” );
});
// fired when the video is finished
$(“iframe”).on(“finish”, function(){
console.log( “Video is done playing” );
});
// return information as video is playing
$(“iframe”).on(“playProgress”, function(event, data){
console.log( data[‘seconds’] );
if(parseInt(data[‘seconds’]) == 5){
console.log(“Achieved”);
$(“iframe”).vimeo(“pause”);
$(“iframe”).vimeo(“seekTo”, 0);
return false;
}
});
// return information as video is seeking.
$(“iframe”).on(“seek”, function(event, data){
console.log( data );
});
</script>
</body>
</html>

Note :: If you face any problem. do the following changes.
1] Please replace  this symbol (  ” ) to ” into whole document.
and replace this symbol ‘ and ’ to  ‘ and  ‘  into whole document.
2] Replace all $ sign to jQuery. like as

from

$(document).ready(function(){
  alert('test');
});

To

jQuery(document).ready(function(){
  alert('test');
});

Alternatively, you can use noConflict() …

$j=jQuery.noConflict();

// Use jQuery via $j(...)
$j(document).ready(function(){
  alert('test');
});

Leave a Reply

Your email address will not be published. Required fields are marked *