Vimeo player pause another video when you play any video - vimeo

I have 2 Vimeo players in my page when I play the first video then play second video first one gets paused.
var vid1=new Vimeo.Player($('.one'));
var vid2=new Vimeo.Player($('.two'));
$('.btnonePlay').on('click',function(){
vid1.play();
})
$('.btnonePause').on('click',function(){
vid1.pause();
})
$('.btntwoPlay').on('click',function(){
vid2.play();
})
$('.btntwoPause').on('click',function(){
vid2.pause();
})
Steps on how to reproduce the issue:
Click on play video one
Click on play video two
Player one will pause when the 'play video two' button is clicked.
Working example on jsFiddle.
The entire code is also in the snippet below.
var vid1 = new Vimeo.Player($('.one'));
var vid2 = new Vimeo.Player($('.two'));
$('.btnonePlay').on('click', function() {
vid1.play();
})
$('.btnonePause').on('click', function() {
vid1.pause();
})
$('.btntwoPlay').on('click', function() {
vid2.play();
})
$('.btntwoPause').on('click', function() {
vid2.pause();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Annihilation Song | Rubblebucket (Official Music Video) from Amanda Bonaiuto on Vimeo.</p>
</div>
<button class="btnonePlay"> Play video one</button>
<button class="btnonePause"> Pause video one</button>
<div class="two">
<iframe src="https://player.vimeo.com/video/286183716" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p>Annihilation Song | Rubblebucket (Official Music Video) from Amanda Bonaiuto on Vimeo.</p>
</div>
<button class="btntwoPlay"> Play video two</button>
<button class="btntwoPause"> Pause video two</button>

By default on our Vimeo videos we enable autopause. Autopause is when one video automatically pauses when another starts playing. Most people do not want two videos playing at the same time.
However, if you do want that you can turn off autopause by using the embed parameter attached to the url ?autopause=0. I have adjusted your jsfiddle to work accordingly. Working JSFiddle!
You can learn more about the available embed parameters from our API readme or this help article.

Related

html change to next site

I am currently working on a homepage for myself.
My idea is to use our intro video as intro for the website. After its finished i want so switch to home.html
thats my curent index.html:
<body>
<video id="introVideo" autoplay muted>
<source src="images/logo.webm">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("introVideo");
vid.onended = function() {
alert("The video has ended");
};
</script>
The alert is working, i am searching a funtion to switch to home.html now.
ty for your help.

Vimeo api play failed because the user didn't interact with the document first

Vimeo player will now play even with allow="autoplay" attribute, check jsfiddle console error, click small icon play button:
https://jsfiddle.net/0vfLtdm8/
var player = document.getElementById('video-player');
var vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
vimeoPlayer.play();
}
vimeoPlayer.on('error', function(error) {
console.log(error);
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://player.vimeo.com/api/player.js"></script>
<div id="video-outer-full">
<div id="video-inner">
<i class="far fa-play-circle" id="playbtn"></i>
<iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
</div>
</div>
#Toniq this is an issue specific to jsfiddle and codepen like services.
On those test pages they wrap the user defined test content in an iframe which doesn't have the allow="autoplay" which prevents the play() action from happening.
Also the Vimeo player iframe has to have the allow="autoplay" attribute.
You can see on the api demo page that this problem doesn't occur if you press the custom play button on the top right.
https://player.vimeo.com/api/demo

Muting an embedded vimeo video

On a website I am building I have a vimeo video embedded. The client needs to keep the sound on the video obviously for people that find it on vimeo. However for her website the sound is just plain annoying. So I need to find a way to mute the audio within the code for the embed. I have googled it but can't seem to find anything legible. As you can see from my code below, I have used the autoplay command within the link I was hoping I could do a similar thing to mute the sound.
<iframe src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Thanks
In case it helps anyone, Vimeo have added a 'background' parameter for embedding videos, that autoplays videos silently. In some cases that will be useful where people want to mute videos - this is their example:
<iframe src="https://player.vimeo.com/video/76979871?background=1"
width="500" height="281" frameborder="0" webkitallowfullscreen
mozallowfullscreen allowfullscreen></iframe>
For non-paying members
You just need to add the muted parameter. E.g.:
<iframe src="https://vimeo.com/48400332?autoplay=1&loop=1&muted=1" ></iframe>
For paid members
According to Vimeo, the background parameter is only supported for videos hosted by paid members.
Source: https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos
you will be using setVolume api in your vimeo.. player.api('setVolume', 0);
it will be like this...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?title=0&byline=0&portrait=0&color=d01e2f&autoplay=1&player_id=vimeo_player" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
I tried the examples in the answers with no luck. After looking into the documentation I noticed there is missing the parameter &player_id=IFRAME_ID. Maybe something changed in the Vimeo API, anyway the following example works for me:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="//player.vimeo.com/video/4415083?api=1&player_id=vimeo_player&autoplay=1&loop=1&color=ffffff" width="1920" height="1080" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<script>
$(function() {
var vimeo_iframe = $('#vimeo_player')[0];
var player = $f(vimeo_iframe);
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
});
</script>
Seems like Vimeo is providing an updated library, and the API syntax is a bit different from the old one (Froogaloop). Here's how to mute an embedded video with JS:
<!--Add the id attr to the iframe tag to use as a selector-->
<iframe id="embeddedVideo" src="http://player.vimeo.com/video/4415083? title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<!--Include the Vimeo API Library-->
<script src="https://player.vimeo.com/api/player.js"></script>
<!--Select and manipulate your video-->
<script type="text/javascript">
//Select the #embeddedVideo element
var video = document.getElementById('embeddedVideo');
//Create a new Vimeo.Player object
var player = new Vimeo.Player(video);
//When the player is ready, set the volume to 0
player.ready().then(function() {
player.setVolume(0);
});
</script>
Hope this helps out anyone who's using the new library. Documentation is at vimeo/player.js
Since most of the answers here are referring to Vimeo's old api. Here is the simplest way with the new api. You can include vimeo player.js from their CDN or you can download it or you can include it from npm.
<script src="https://player.vimeo.com/api/player.js"></script>
or
npm install #vimeo/player
then you can do the following.
<script>
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.setVolume(0);
</script>
that's it. And if you are using angular 2+,
import * as Vimeo from '#vimeo/player';
const iframe = e.target;
const player = new Vimeo(iframe);
player.setVolume(0);
here e.target is $event which would be passed from the template. Probably it could be iframe (load) event. Or may be you can use jquery to select iframe.
#Gadss answer works great but I found that you need update the iframe src to include the activation of the Vimeo api. Just include api=1 after the vimeo id.
I've also found that this sometimes doens't work on Safari for some reason.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="vimeo_player" src="http://player.vimeo.com/video/4415083?api=1&title=0&byline=0&portrait=0&color=d01e2f&autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<script>
var iframe = $('#vimeo_player')[0],
player = $f(iframe),
status = $('.status');
player.addEvent('ready', function() {
player.api('setVolume', 0);
});
</script>
**Here is my solution:
http://jsfiddle.net/jakeoblivion/phytdt9L/5/
(You will need your own play/pause mute/unmute icons)
//load video muted
var video = $("#myvideo");
video.vimeo("play");
video.vimeo("setVolume", 0);
//toggle play/pause
$('#play-pause').click(function() {
$(this).toggleClass('play');
if ($(this).hasClass('play')) {
//pause video
video.vimeo("pause");
$(this).css('background', 'pink');
} else {
//unpause video
video.vimeo("play");
$(this).css('background', 'blue');
}
});
//toggle mute/unmute
$('#mute-unmute').click(function() {
$(this).toggleClass('mute');
if ($(this).hasClass('mute')) {
//unmute video
video.vimeo("setVolume", 1);
$(this).css('background', 'green');
} else {
//mute video
video.vimeo("setVolume", 0);
$(this).css('background', 'red');
}
});
Spent ages trying and nothing seemed to work to.
I just wanted to have a Vimeo autoplay muted (volume 0) with simple Play/Pause Mute/Unmute controls, instead of their default ones. (feel free to use icons instead of the temporary colours I put).
(if you want to add the default controls back but keep muted, remove "?background=1". By default background=1 will set video.vimeo("setVolume", 0) and hide controls, so I also added the mute on load without the background=1 set).
Also note:
"You’ll need to be running on a web server instead of opening the file directly in your browser. JS security restrictions will prevent the API from working when run locally."
I've found a way to do it. You start the video muted so it autoplays, then on the first timeupdate you set the volume to 1.
var options = {
id: 'video_id_here',
width: 640,
loop: false,
muted: true,
autoplay: true
};
var player = new Vimeo.Player('vimeo', options);
player.setVolume(0);
player.on('timeupdate', set_autoplay_volume );
function set_autoplay_volume(){
player.setVolume(1);
player.off('timeupdate', set_autoplay_volume );
}
You try insert ?muted=1 after link in attribute src
For example
<iframe id="vimeo_player" src="https://player.vimeo.com/video/257992348?muted=1">
This is the only way it worked for me: http://jsfiddle.net/87dsjL8q/108/
var iframe = document.getElementsByTagName('iframe')[0];
var player = $f( iframe );
player.addEvent('ready', function() {
player.api('setVolume', 20);
});
<iframe src="http://player.vimeo.com/video/4415083?muted=1; title=0;byline=0;portrait=0;color=d01e2f;autoplay=1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
you can just give "muted=1" so the video will be muted...
chrome allow the videos autoplay that are muted

Unable to stop sound and reset time

I've got multiple instances of the html5 audio player on my page, and I use the jQuery fadeIn() fadeOut() to determine which song to play. When clicking a link to a different page, I have the current playing sound fade out volume, then stop, then reset progress to 0 seconds, then the page (along with the audio player) fades out and the new page fades in. I'm able to fade out the volume, but I can't reset the timer to 0 seconds for some reason:
<script>
$('.link').on('click', function(e){
$('audio').currentTime = 0; /*reset timer*/
displayNone(); /*fade out current page*/
$(this.getAttribute("href")).fadeIn(); /*fade in target page*/
stopAudio();
});
function displayNone() {
$('.pagecontainer>div').fadeOut();
}
function stopAudio() { //fade out any current audio
$('audio').animate({volume: 0}, 1000);
setTimeout(function(){('audio').pause()},1000) /*stop audio after fading out volume*/
}
$('.sound').on('play', function () {
$('audio').animate({volume: 1}, 100); /*reset volume to 100% after clicking play button on player*/
});
</script>
....
....
page 1
page 2
page 3
<div class="pagecontainer">
<div id="page1">
<audio controls class="sound">
<source src="music1.mp3"/>
<source src="music1.ogg"/>
</audio>
</div>
<div id="page2">
<audio controls class="sound">
<source src="music2.mp3"/>
<source src="music2.ogg"/>
</audio>
</div>
<div id="page3">
<audio controls class="sound">
<source src="music3.mp3"/>
<source src="music3.ogg"/>
</audio>
</div>
</div>
For example:
I'm currently on page1, with music1.mp3 playing for 10 seconds
I click the link to page2 without stopping music1.mp3, and music1.mp3 volume fades out along with with page1, and page2 fades in successfully along with the music player for music2.mp3
After let's say 10 seconds I click link for page1 to go back to page1
The player for music1.mp3 is still playing (progress is 20 seconds) and haven't stopped, but now with zero volume
I don't get why music1.mp3 is not resetting its timer to 0 seconds and stopping fully.
Thanks!
Probably because .currentTime is not a jQuery method. Try something like $('audio')[0].currentTime.
Edit:
$('audio').each(function() {
$(this).currentTime = 0;
});

Getting an Embedded YouTube Video to Auto Play and Loop

I am trying to get a basic Youtube video to auto play and auto loop embedded on a page, but I'm having no luck.
<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&loop=1&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1&fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&loop=1&autoplay=1&showsearch=0&version=3&showinfo=0&modestbranding=1&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>
YouTubes HTML5 embed code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>​
You can read about it here: Link View original content on the Internet Archive project.
Here is the full list of YouTube embedded player parameters.
Relevant info:
autoplay (supported players: AS3, AS2, HTML5) Values: 0 or 1. Default
is 0. Sets whether or not the initial video will autoplay when the
player loads.
loop (supported players: AS3, HTML5) Values: 0 or 1. Default is 0. In
the case of a single video player, a setting of 1 will cause the
player to play the initial video again and again. In the case of a
playlist player (or custom player), the player will play the entire
playlist and then start again at the first video.
Note: This parameter has limited support in the AS3 player and in
IFrame embeds, which could load either the AS3 or HTML5 player.
Currently, the loop parameter only works in the AS3 player when used
in conjunction with the playlist parameter. To loop a single video,
set the loop parameter value to 1 and set the playlist parameter value
to the same video ID already specified in the Player API URL:
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Use the URL above in your embed code (append other parameters too).
All of the answers didn't work for me, I checked the playlist URL and seen that playlist parameter changed to list! So it should be:
&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs
So here is the full code I use make a clean, looping, autoplay video:
<iframe width="100%" height="425" src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>
Had same experience, however what did the magic for me is not to change embed to v.
So the code will look like this...
<iframe width="560" height="315" src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>
Hope it helps...
Playlist hack didn't work for me either. Working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrap instead of hard-coding it in JS):
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>