I'm using Vimeo player's JavaScript API for starting a video when a user clicks on the specific button on the site.
Here's the embedded code:
<iframe id="vimeo-player" src="<?php the_sub_field('slide_video'); ?>?title=0&byline=0&portrait=0" width="1880" height="1058" frameborder="0" ></iframe>
Here's the JavaScript:
var iframe = document.querySelector('#vimeo-player');
var player = new Vimeo.Player(iframe);
$('.slide-area__slides__video svg').click(function(){
$(this).hide();
$(this).closest('.item').find('img').hide();
$(this).siblings('iframe').show();
player.play();
});
player.on('ended', function(data) {
$('.slide-area__slides__video svg').show();
$('.slide-area__slides__video iframe').hide();
$('.slider-area__slides .item img').show();
});
It works perfectly in Chrome, but in every other browser, it just keeps throwing the error:
The player element passed isn’t a Vimeo embed.
Has anyone encountered this before? It's quite frustrating.
Looking at player.js, it seems that the error displays when:
if (element.nodeName === 'IFRAME' && !isVimeoUrl(element.getAttribute('src') || '') {...}
Make sure the_sub_field('slide_video') outputs a valid Vimeo URL.
Related
I am trying to embed a vimeo video using iframe in my Qualtrics survey. When this video ends, I want to automatically advance to the next page (i.e., automatically press the "next button"). Before using vimeo, my videos were stored on dropbox and I used the following code for this (the url is not the real one):
<video autoplay="" id="video1" height="580" width="740"><source src="https://dl.dropboxusercontent.com/u/6339921/att/fam.mp4" type="video/mp4"></video>
Qualtrics.SurveyEngine.addOnload(function() {
that = this;
document.getElementById('video1').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) {
e = window.event;
}
that.clickNextButton();
}
});
However, it seems that I have to use iframe with vimeo, but I am unable to make the auto-advance work (the video will play but the page will not advance). Maybe it is because I am assigning the "ID" the wrong way. Here is the code:
<iframe id="player1" src="https://player.vimeo.com/video/20708824?autoplay=1api=1&player_id=player1&title=0&byline=0&portrait=0&background=1&mute=0&loop=0" width="600" height="400" frameborder="0"></iframe>
Qualtrics.SurveyEngine.addOnload(function() {
that = this;
var idPlayer = new Vimeo.Player('player1');
document.getElementByID('player1').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
that.clickNextButton();
}
});
I am looking for a) an option to fix the iframe code, or b) an option to embed a vimeo video using the old code that I had used with dropbox videos.
Thanks so much and I apologize if this all sounds naive, I am not a programmer :-(
You can't add an event listener to an iframe from a different domain. It is called cross-domain scripting and for security reasons isn't allowed by the browser.
You have to use postMessage. There is a JavaScript class already written, but you would have figure out how to integrate it into Qualtrics:
https://github.com/vimeo/player.js
I'm trying to detect a click of the play button using hte vimeo js api. Here is my code:
html:
<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
and the JS:
var iframe = document.getElementById('video');
var player = $f(iframe);
player.on('play', function() {
console.log('played the video!');
});
At the moment i'm not getting anything logged in the console. I do have another function using the Vimeo API later down in the DOM which seems to be working fine:
jQuery("body").on("click",".watch-vid-cta",function(){
player.api("play");
});
I got the code straight form their API so not sure what I could be doing wrong:
https://github.com/vimeo/player.js
It seems that there are two issues here.
First : vimeo has released it's new api (2016) recently, and it's not compatible with the former one. The code you provided is a mix of the two api, player.api("play") is the old syntax, while the new synax is player.play().
As you second function is working, I would assume that you're using the old api (known as froogaloops). The github page of vimeo contains all the explanation you may nedd to migrate and it's super easy.
Second : within the new api, it seems that you mixed the event listener player.on('play', function() {} whitch do something when the player is played and the play() method, use to play the player.
With the new api your code might look like this :
html :
<button type="button" id="playButton">Play</button>
then you need to include the api in your page
<script src="https://player.vimeo.com/api/player.js"></script>
and finally your js :
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
function vimeoPlay(){
player.play().then(function(){
})
.catch(function(error) {
switch (error.name) {
case 'PasswordError':
break;
case 'PrivacyError':
break;
default:
break;
}
});
}
document.getElementById("playButton").onclick = function (){vimeoPlay()}
Here the player.play() method has a promise .then(function{}), this enable you to do something once the player is played, and thus only once every time you call the vimeoPlay function, by clicking on the button in this case.
Hope this helps
EDIT :
regarding your comment, I belive that you are facing the first issue.
If your second function, which contains player.api("play") works, it probably means that you are using the old api (froogaloops) as with the new api (2016) it would be player.play().
If so, you can't expect player.on('play', function() {console.log('played the video!');}); to work as it is the syntax of the new api.
You should double check which version of the api you are using, the link to the old and the new ones are respectively :
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
//versus
<script src="https://player.vimeo.com/api/player.js"></script>
If your wish is indeed to listen to a play event then you may try this with the new api
<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.on('play', function() {
console.log('played the video!');
});
</script>
I highligh your attention toward the difference between the way you embed the video and the way I do, you shouldn't add ?api=1 with the new api :
<iframe id="video" src="https://player.vimeo.com/video/21777784?api=1"></iframe>
//versus
<iframe id="video" src="https://player.vimeo.com/video/21777784"></iframe>
and toward the difference between the way you set your variables and I do:
var iframe = document.getElementById('video');
var player = $f(iframe);
//versus
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
If you have multiple vimeo video on the same page you may of couses attribute an id to your vimeo iframes, for instance vimeoPlayer1 and vimeoPlayer2 and write
<iframe id="vimeoPlayer1" src="https://player.vimeo.com/video/21777784"></iframe>
<iframe id="vimeoPlayer2" src="https://player.vimeo.com/video/21777784"></iframe>
var vPlayer1 = document.getElementById("vimeoPlayer1");
var player1 = new Vimeo.Player(vPlayer1)
var vPlayer2 = document.getElementById("vimeoPlayer2");
var player2 = new Vimeo.Player(vPlayer2)
Finally you may upgrade you second function by replacing player.api("play") by player.play() (but I'm not confortable with jQuery if there is something else going on here):
Well, I think this is a major Youtube bug but I don't find any report about it.
I have a web app which is displayed in full screen browser using the JavaScript Fullscreen API.
In the web app there is an embedded Youtube player. When you open the Youtube player in fullscreen, then clicks the Youtube's fullscreen button again to exit the player's fullscreen, it doesn't respond!
I am sure it is related to the fact that the browser is already in full screen mode so there is some kind of conflict.
I have created a simplified example which can be viewed here:
http://run.plnkr.co/CjrrBGBvrSspfa92/
Click the "GO FULLSCREEN" button.
Play the video and click the
fullscreen button. The video will go fullscreen.
Click the
fullscreen button again. It won't exit.
EDIT:
The code for the html file above is here:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe>
<button id="btn">GO FULLSCREEN</button>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
</script>
</body>
</html>
The thing is I did some searching and it seams Youtube doesn't know if the video is in fullscreen or not when using the JavaScript Fullscreen API nor does Google provide an API call to fo in or out of fullscreen. So, When you click the button and it goes in fullscreen, you'll see the player's fullscreen button not pressed. So, in order to get back to the window view, the user has two options:
1) click on the button 2 times (the first time, the player tries to go in fullscreen and the button changes state, the second time, the player goes in window mode) - this is the solution
2) click Esc on the keyboard.
I checked with the HTML5 player.
Furthermore, I tried injecting a button inside YouTube's iframe so I can select it in order to exit fullscreen, but it didn't work... would have been silly to actually.
This should work:
<div id="videoplayer"></div>
<p><button id="btn">GO FULLSCREEN</button></p>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('videoplayer', {
height: '380',
width: '500',
videoId: 'h7ArUgxtlJs',
fs: 1
});
}
document.getElementById("btn").addEventListener("click", function() {
var elem = document.getElementById('videoplayer');
var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
if (requestFullScreen) {
requestFullScreen.bind(elem)();
}
});
</script>
You can use the classic embed, I belive.
Working demo
This may help: "Exiting Fullscreen Mode":
// Whack fullscreen
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
// Cancel fullscreen for browsers that support it!
exitFullscreen();
Source.
Side note: Youtube's API is still pretty scarce in terms of what you can customize even in 2015 (due to how it relies on so much iFrame, and they don't want you to reskin their player). You'll likely get to a point where your using a bunch of funky JavaScript hacks to get what you want, which can get messy and unstable. It would be better practice to utilize one of many customizable video players where you can have more control with JS; like JW player, Video.js, Flow player, popcorn.js etc.
I checked the Youtube API v3 iframe embed docs and am trying to apply player.clearVideo() function to my button as follows (ellipsis replaces code) :
...
function onPlayerReady(event) {
var zapButton = document.getElementById('zapvideo');
zapButton.addEventListener("click", function() {
player.clearVideo(); // NOT WORKING
});
}
...
$(function(){
$('#zapvideo').on('click', function(){ ... });
});
Nothing happens (no errors). player.stopVideo() and other controls work. How can I clear the video from the Youtube player? I'm using Youtube's HTML5 player, but even when Youtube switches to Flash player for some videos, I still cannot clear the video that's in the player (what's worst is that Youtube doesn't revert to the HTML5 player when an HTML5 compatible video is subsequently selected and played in my app regardless if I have opt-in HTML5 or added the relevant html5 playerVars, which means I cannot tab out of Flash-based player controls when they're in focus. So much for "key-bored" navigation!). I'm using Firefox 36.0.1 .
Any suitable workaround function to clear video while keeping the player available will be fine with me.
Found a workaround with the following code:
...
function onPlayerReady(event) {
...
$('#zapvideo').on('click', function(){
$('#player').hide();
event.target.loadVideoById('',0);
event.target.seekTo(0); // iOS
event.target.stopVideo();
return false;
});
}
#zapvideo button hides the iframe player since we don't want to see any error message in player after an empty or dummy video id is submitted via event.target.loadVideoById(). Remember to show player before playing a new video. The relevant code is encapsulated within the onPlayerReady() function to make sure the player is always ready prior to code execution.
Site plays a full screen video with sound. The site was designed to play the video without sound. When a link is clicked the other portions of the site appear on top of the video.
Unfortunately the client has insisted on having sound, so when something is clicked you still hear the music until the video ends. I know it is possible to have the video stop or even have it muted when a link is clicked but I cannot seem to understand where exactly to implement this. Your help is appreciated. I'm not a jquery person so I'm rather dim on this. Site uses the YTPlayer ( http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-ytplayer/ )
The site: http://www.bradfordweb.com/clients/concannon2/
The code in the page that is playing the video is:
<a id="P2" class="player" data-property="{videoURL:'http://youtu.be/OgAr2jQr3rg',containment:'#home',autoPlay:true, mute:false, loop:false, opacity:.6}"></a>
The link is:
<div class="link-home"><div class="cl-effect-8"><span>ABOUT US</span> </div></div>
I tried:
onclick="stop()"
and
stopYTP
I found the function in the jquery.mb.YTPlayer.js file:
stopYTP: function () {
var YTPlayer = this.get(0);
var controls = jQuery("#controlBar_" + YTPlayer.id);
var playBtn = controls.find(".mb_YTVPPlaypause");
playBtn.html(jQuery.mbYTPlayer.controls.play);
YTPlayer.player.stopVideo();
},
Help?
I've had this issue as well and found it in the onYouTubePlayerReady function.
Look for it in that file and do the following changes:
function onYouTubePlayerReady(playerId) {
var player=$("#"+playerId);
player.mb_setMovie();
// Remove or comment out the lines below.
// $(document).on("mousedown",function(e){
// if(e.target.tagName.toLowerCase() == "a")
// player.pauseYTP();
// });
}
That line just simply binds the mousedown event on an a tag and consequently pauses the player.
Hope that helps.