We Keep Coding

auto-advance to next page when iframe video ends in Qualtrics

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

Youtube Player API iframe Embed | player.clearVideo() not working

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.

Is it possible to react to Brightcove events on Apple devices?

I was trying to build a video / image slider for mobile devices and I'm using Brightcove to display my videos.
Though due to limitations in the Brightcove versions I'm struggling to get my slider to work after a video has been played since I remove my overlay and Brightcove inserts an Iframe which disables pretty much all of my touch events (which are handled via hammer.js).
Let me show you my code:
Slider Markup:
<div id="wrapper">
<div class='slide'>
//Brightcove Player get's inserted here. Images are displayed via background
</div>
<div class='slideprevious'>
</div>
<div class='slidefollowing'>
</div>
</div>
Brightcove Initialisation:
var addVideo = function(){
$('.slide').append('<div id="tsVideoPlayer"></div>');
tsCreatePlayer('tsVideoPlayer', slides.eq(num).data('video-id'), 'XXXXXXXX');
if(typeof bcPlayer === 'undefined'){
$.when(
//asynchronous loading of JS
$.getScript( "http://admin.brightcove.com/js/BrightcoveExperiences_all.js" ),
$.getScript( "/xxx/xxx/brightcove_video.js" ),
$.Deferred(function( deferred ){
$( deferred.resolve );
})
).done(function(){
addVideo();
});
} else {
addVideo();
}
Event Handling:
function getPlayerId(data) {
for (var prop in data)
return prop;
}
var player = bcPlayer.getExperience(getPlayerId(bcPlayer.experienceObjects)).modules.videoPlayer;
player.addEventListener(BCMediaEvent.PLAY, onPlayEventFired);
player.addEventListener(BCMediaEvent.STOP, onStopEventFired);
function onPlayEventFired() {
alert("play");
}
function onStopEventFired() {
alert("stop");
}
brightcove_video.js: http://pastebin.com/fTL5Uhqc
This actually works flawlessly on my Desktop in every browser. But as soon as I test it on Apple devices it doesn't work since the Flash Object isn't loaded anymore, but instead an iFrame.

There are two Brightcove player API versions -- the legacy Flash-only player API and the Smart Player API. You're using the former which as you've guessed by now doesn't work with HTML players.
This doc on the Brightcove support site details refactoring your code from the old to the new player API.

Detect embedded Youtube player captions

Is it possible to detect whether youtube captions are on or off in an embedded player?
There is currently no way to suppress the captions if users choses to display them. I would like to show a customized message if the captions are on.
In the documentation there is no mention of this as far as I can say.

I have not found this anywhere in their api docs, but with your youtube player object you should be able to do:
player.getOptions("captions") || player.getOptions("cc") //detects if captions were ever loaded at one point.
You can also turn it on via js by:
player.loadModule("captions"); //Works for html5 ignored by AS3
player.loadModule("cc"); //Works for AS3 ignored by html5
to turn it off:
player.unloadModule("captions"); //Works for html5 ignored by AS3
player.unloadModule("cc"); //Works for AS3 ignored by html5
to change which language if the module is loaded:
player.setOption("captions", "track", {"languageCode": "es"}); //Works for html5 ignored by AS3
player.setOption("cc", "track", {"languageCode": "es"}); //Works for AS3 ignored by html5

Easy as pie, you can ;)
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/QRS8MkLhQmM?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "640", "480", "8", null, null, params, atts);
var stateChange = function(a) {
if (ytplayer.getOptions().indexOf("cc") !== -1) {
alert("closed captions are on");
} else {
alert("closed captions are off");
}
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange","stateChange");
}
</script></body>
</html>
BTW: Google rocks ;)
this should do the trick - please don't use it in production mode - it was just a quick sum-up. You need to listen to the state you want, I'm just alerting at any event ;)

Youtube API not loading in firefox

I have this test slider http://jsfiddle.net/dUyLY/2/
In Chrome it works nice, but in firefox and safari it bugs out when the animation is done.
In the scripts file I check after each animation if the current visible element is the youtube player, if so play the video. And when leaving the slide pause it.
I get this error in console player.pauseVideo is not a function
Anyone has a solution to this?

You're deferring the definition of onYouTubePlayerAPIReady. For this reason, it's likely that the YouTube API finishes before onYouTubePlayerAPIReady is defined. In that case, your code will fail.
To solve the problem, check whether the API is ready at run-time.
window.onYouTubePlayerAPIReady = function () {
player = new YT.Player('player', {
height: '315',
width: '560',
videoId: 'bpOR_HuHRNs',
});
};
if (window.YT) {
// Apparently, the API was ready before this script was executed.
// Manually invoke the function
onYouTubePlayerAPIReady();
}
Note. For simple one-way functions, such as player.playVideo() and player.pauseVideo(), I recommend to use this simple function, which is not as bloated as the documented YouTube API. See this answer.
Here's a the updated part of your page, using the callPlayer function from my other answer instead of the YouTube API: http://jsfiddle.net/ryyCZ/
<div id="player">
<iframe width="560" height="315" frameborder="0" src="http://www.youtube.com/embed/bpOR_HuHRNs?enablejsapi=1"></iframe>
</div>
if ($(".slides_control > div:visible #player").length == 1) {
callPlayer("player","playVideo");
} else {
callPlayer("player", "pauseVideo");
}