Vimeo stop video jquery

Vimeo.API.js is a lightweight jQuery wrapper around the Vimoe video API which allows you to control Vimeo videos embedded in your webpage with custom jQuery methods and events.

Basic usage:

1. Make sure both the jQuery vimeo.api.js and jQuery library are included.

2. Embed an iframe Vimoe player into your web page.

3. Available API methods to control the Vimeo video.

// play the video $["iframe"].vimeo["play"]; // pause the video $["iframe"].vimeo["pause"]; // jump to a defined position [seconds] in the video $["iframe"].vimeo["seekTo", 10]; // set the volume $["iframe"].vimeo["setVolume", 0.6]; // enable looping $["iframe"].vimeo["setLoop", true]; // set the color $["iframe"].vimeo["setColor", "#666"]; // unload the plugin $["iframe"].vimeo["unload"];

4. Get the return information about the vidoe.

// whether video is paused // return true or false $["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 ]; }] // get video's height $["iframe"].vimeo["getVideoHeight", function[data]{ console.log[ "Height", data ]; }] // get video's width $["iframe"].vimeo["getVideoWidth", function[data]{ console.log[ "Width", data ]; }] // get video's URL $["iframe"].vimeo["getVideoUrl", function[data]{ console.log[ "Video URL", data ]; }] // get video's color $["iframe"].vimeo["getColor", function[data]{ console.log[ "Player color", data ]; }]

5. Events.

// 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 ]; }]; // return information as video is seeking. $["iframe"].on["seek", function[event, data]{ console.log[ data ]; }];

6. Mixing methods and events.

$["iframe"].vimeo["play"] .vimeo["getVolume", function[d]{ console.log["volume", d]; }] .vimeo["setVolume", 0.6] .vimeo["getVolume", function[d]{ console.log["new volume", d]; }] .on["pause", function[]{ console.log["paused"]; }]

This awesome jQuery plugin is developed by jrue. For more Advanced Usages, please check the demo page or visit the official website.

 Posted in Uncategorized

 Author: Admin  Published Date: June 4, 2017  2 Comments on How to pause or stop youtube, vimeo and html5 video on tab change

How to stop video. In this post we will guide you step by step about how to stop youtube video, vimeo video and html5 video on tab change or accordion change or button click using jQuery. By using following methods you can stop video or multiple videos on same page, unlike other methods to stop video these methods allow you to stop more than one video on a page.

How to stop youtube video on tab change

Note: jQuery library must be included before using bellow jquery code.

You can stop youtube video on tab change, accordion change or any button click using jquery. To stop youtube video you need to use bellow iframe with some special attributes. This is a test video you can use your video ID which you can find at the end of video:

url: //www.youtube.com/embed/C0DPdy98e4c

jQuery Magic:- add bellow jQuery code into your footer.php file in a tag:

$['.tabs li a'].on['click', function[] { $['.popup-youtube-player'][0].contentWindow.postMessage['{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*']; }];

How to stop vimeo video on tab change

Note: jQuery library must be included before using bellow jquery code.

You can stop vimeo video on tab change, accordion change or any button click using jquery. To stop vimeo video you need to use bellow iframe with some special attributes. This is a test video you can use your video ID which you can find at the end of video:

url: //player.vimeo.com/video/205350867

jQuery Magic:- add bellow jQuery code into your footer.php file in a tag:

var iframe = document.getElementById['video']; var player = $f[iframe]; $['.tabs li a'].on['click', function[] { player.api["pause"]; }];

How to stop html5 player video on tab change

jQuery Magic:- Add bellow code into your footer.php file using script tag

$['.tabs li a'].on['click', function[] { $['video'].trigger['pause']; }];

Note: if you want to avoid hassle of using iframe you can create shortcodes for your videos which you can use easily to create videos shortcodes follow bellow link:

create videos shortcodes

a { background: #000; color: #fff;} STOP PLAY var iframe = $['#vimeo-player'][0]; var player = $f[iframe]; $['#stop'].click[function[] { console.log['stoped']; player.api['pause']; }]; $['#play'].click[function[]{ console.log['play']; player.api['play']; }]

Page 2