I'm encountering issues with a relatively simple code that I have.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
-->
<script src="https://raw.github.com/vimeo/player-api/master/javascript/froogaloop.js"></script>
</head>
<body>
<iframe
id="vimeo_1"
src="http://player.vimeo.com/video/7100569?api=1&player_id=test"
width="400"
height="225"
frameborder="0">
</iframe>
<a id="play" href="javascript:void(0)">play</a>
<a id="pause" href="javascript:void(0)">pause</a>
<a id="mute" href="javascript:void(0)">mute</a>
<input id="volume" type="range" min="0" max="1" value="0.5" step="0.01" />
<a id="videoInfo" href="javascript:void(0)">video info</a>
<div>
<ul id="showVideoInfo">
</ul>
</div>
<div id="debug"></div>
<script>
var v1 = document.getElementById('vimeo_1');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var mute = document.getElementById('mute');
var volume = document.getElementById('volume');
var videoInfo = document.getElementById('videoInfo');
var debug = document.getElementById('debug');
$f(v1).addEvent('ready', function(pID){
console.log('ready');
});
addEvent(play, 'click', playVideo);
addEvent(pause, 'click', pauseVideo);
addEvent(mute, 'click', muteVideo);
addEvent(volume, 'change', volumeVideo);
addEvent(videoInfo, 'click', infoVideo);
function addEvent(obj, name, callback) {
if (obj.addEventListener)
obj.addEventListener(name, callback, false);
else
obj.attachEvent(name, callback, false);
}
function playVideo() {
console.log('play');
$f(v1).api('play');
}
function pauseVideo() {
console.log('pause');
$f(v1).api('pause');
}
function muteVideo() {
console.log('mute');
$f(v1).api('setVolume', 0);
}
function volumeVideo() {
console.log(this.value);
$f(v1).api('setVolume', this.value);
}
function infoVideo() {
console.log('videoInfo: ');
$f(v1).api('paused', function(v) {
console.log(v);
});
}
</script>
</body>
</html>
Initially, functionalities like PLAY, PAUSE, MUTE, and the volume slider (webkit only) are functioning properly. However, when attempting to retrieve video data and display it somewhere (e.g., console), nothing seems to be working - an error message is displayed:
After looking through some related questions, I haven't had much luck with the solutions provided by others. Can anyone offer assistance? Thank you.