3v4l.org

run code in 150+ php & hhvm versions
Bugs & Features
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type='text/javascript'> var status =true; var i=2; var j =1; <?php $filename = "basic.srt"; $arr = file($filename); $array = json_encode($arr); echo "var js_arr = ". $array . ";\n"; ?> </script> <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <hgroup> <h1><img src="http://a.vimeocdn.com/images_v6/vimeo_logo.png"> Player API Playground</h1> </hgroup> <div class="container"> <div> <h2>Vimeo Player 1</h2> <iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0" webkitallowfullscreen></iframe> <div id="subs" class="inner">replace this</div> <dl class="simple"> <dd><button class="play">Play</button></dd> <dd><button class="pause">Pause</button></dd> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js?d43a8-1394020097"></script> <script> var hour = parseInt(js_arr[j].substring(0,1)); var min = parseInt(js_arr[j].substring(3,4)); var seconds = parseInt(js_arr[j].substring(6,7)); var mil_sec = parseInt(js_arr[j].substring(9,11)); var time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; var bool = false; var a =0; function timeout(status){ setTimeout(function() { if(status) { document.getElementById('subs').innerHTML = js_arr[i]; i=i+4; j=j+4; hour = parseInt(js_arr[j].substring(0,1)); min = parseInt(js_arr[j].substring(3,4)); seconds = parseInt(js_arr[j].substring(6,7)); mil_sec = parseInt(js_arr[j].substring(9,11)); time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; timeout(status); } else{ timeout(status); } },time); } (function(){ // Listen for the ready event for any vimeo video players on the page var vimeoPlayers = document.querySelectorAll('iframe'), player; for (var i = 0, length = vimeoPlayers.length; i < length; i++) { player = vimeoPlayers[i]; $f(player).addEvent('ready', ready); } /** * Utility function for adding an event. Handles the inconsistencies * between the W3C method for adding events (addEventListener) and * IE's (attachEvent). */ function addEvent(element, eventName, callback) { if (element.addEventListener) { element.addEventListener(eventName, callback, false); } else { element.attachEvent('on' + eventName, callback); } } /** * Called once a vimeo player is loaded and ready to receive * commands. You can add events and make api calls only after this * function has been called. */ function ready(player_id) { // Keep a reference to Froogaloop for this player var container = document.getElementById(player_id).parentNode.parentNode, froogaloop = $f(player_id); /** * Sets up the actions for the buttons that will perform simple * api calls to Froogaloop (play, pause, etc.). These api methods * are actions performed on the player that take no parameters and * return no values. */ function setupSimpleButtons() { var buttons = container.querySelector('div dl.simple'), playBtn = buttons.querySelector('.play'), pauseBtn = buttons.querySelector('.pause') // Call play when play button clicked addEvent(playBtn, 'click', function() { froogaloop.api('play'); timeout(status); }, false); // Call pause when pause button clicked addEvent(pauseBtn, 'click', function() { froogaloop.api('pause'); timeout(status=false); }, false); } /** * Sets up the actions for the buttons that will modify certain * things about the player and the video in it. These methods * take a parameter, such as a color value when setting a color. */ /** * Sets up actions for buttons that will ask the player for something, * such as the current time or duration. These methods require a * callback function which will be called with any data as the first * parameter in that function. */ function setupGetterButtons() { var buttons = container.querySelector('div dl.getters'), timeBtn = buttons.querySelector('.time'), pausedBtn = buttons.querySelector('.paused'), widthBtn = buttons.querySelector('.width'), heightBtn = buttons.querySelector('.height'); // Get the current time and log it to the API console when time button clicked addEvent(timeBtn, 'click', function(e) { froogaloop.api('getCurrentTime', function (value, player_id) { // Log out the value in the API Console apiLog('getCurrentTime : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(pausedBtn, 'click', function(e) { froogaloop.api('paused', function (value, player_id) { // Log out the value in the API Console apiLog('paused : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(widthBtn, 'click', function(e) { froogaloop.api('getVideoWidth', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoWidth : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(heightBtn, 'click', function(e) { froogaloop.api('getVideoHeight', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoHeight : ' + value); }); }, false); } /** * Adds listeners for the events that are checked. Adding an event * through Froogaloop requires the event name and the callback method * that is called once the event fires. */ function setupEventListeners() { var checkboxes = container.querySelector('.listeners'), loadProgressChk = checkboxes.querySelector('.loadProgress'), playProgressChk = checkboxes.querySelector('.playProgress'), playChk = checkboxes.querySelector('.play'), pauseChk = checkboxes.querySelector('.pause'), finishChk = checkboxes.querySelector('.finish'); function onLoadProgress() { if (loadProgressChk.checked) { froogaloop.addEvent('loadProgress', function(data) { apiLog('loadProgress event : ' + data.percent + ' : ' + data.bytesLoaded + ' : ' + data.bytesTotal + ' : ' + data.duration); }); } else { froogaloop.removeEvent('loadProgress'); } } function onPlayProgress() { if (playProgressChk.checked) { froogaloop.addEvent('playProgress', function(data) { apiLog('playProgress event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration); }); } else { froogaloop.removeEvent('playProgress'); } } function onPlay() { status = true; } function onPause() { status = false; } function onFinish() { if (finishChk.checked) { froogaloop.addEvent('finish', function(data) { apiLog('finish'); }); } else { froogaloop.removeEvent('finish'); } } // Listens for the checkboxes to change addEvent(loadProgressChk, 'change', onLoadProgress, false); addEvent(playProgressChk, 'change', onPlayProgress, false); addEvent(playChk, 'change', onPlay, false); addEvent(pauseChk, 'change', onPause, false); addEvent(finishChk, 'change', onFinish, false); // Calls the change event if the option is checked // (this makes sure the checked events get attached on page load as well as on changed) onLoadProgress(); onPlayProgress(); onPlay(); onPause(); onFinish(); } /** * Sets up actions for adding a new clip window to the page. */ function setupAddClip() { var button = container.querySelector('.addClip'), newContainer; addEvent(button, 'click', function(e) { // Don't do anything if clicking on anything but the button (such as the input field) if (e.target != this) { return false; } // Gets the index of the current player by simply grabbing the number after the underscore var currentIndex = parseInt(player_id.split('_')[1]), clipId = button.querySelector('input').value; newContainer = resetContainer(container.cloneNode(true), currentIndex+1, clipId); container.parentNode.appendChild(newContainer); $f(newContainer.querySelector('iframe')).addEvent('ready', ready); }); /** * Resets the duplicate container's information, clearing out anything * that doesn't pertain to the new clip. It also sets the iframe to * use the new clip's id as its url. */ function resetContainer(element, index, clipId) { var newHeading = element.querySelector('h2'), newIframe = element.querySelector('iframe'), newCheckBoxes = element.querySelectorAll('.listeners input[type="checkbox"]'), newAddBtn = element.querySelector('.addClip'); // Set the heading text newHeading.innerText = 'Vimeo Player ' + index; // Set the correct source of the new clip id newIframe.src = 'http://player.vimeo.com/video/' + clipId + '?api=1&player_id=player_' + index; newIframe.id = 'player_' + index; // Reset all the checkboxes for listeners to be checked on for (var i = 0, length = newCheckBoxes.length, checkbox; i < length; i++) { checkbox = newCheckBoxes[i]; checkbox.setAttribute('checked', 'checked'); } // Clear out the API console newApiConsole.innerHTML = ''; // Update the clip ID of the add clip button return element; } } setupSimpleButtons(); setupModifierButtons(); setupGetterButtons(); setupEventListeners(); setupAddClip(); // Setup clear console button var clearBtn = container.querySelector('.console button'); addEvent(clearBtn, 'click', function(e) { apiConsole.innerHTML = ''; }, false); apiLog(player_id + 'ready!'); } })(); </script> </body> </html>
Output for 5.3.0 - 5.6.28, 7.0.0 - 7.1.0
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type='text/javascript'> var status =true; var i=2; var j =1; Warning: file(basic.srt): failed to open stream: No such file or directory in /in/VchgQ on line 14 var js_arr = false; </script> <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <hgroup> <h1><img src="http://a.vimeocdn.com/images_v6/vimeo_logo.png"> Player API Playground</h1> </hgroup> <div class="container"> <div> <h2>Vimeo Player 1</h2> <iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0" webkitallowfullscreen></iframe> <div id="subs" class="inner">replace this</div> <dl class="simple"> <dd><button class="play">Play</button></dd> <dd><button class="pause">Pause</button></dd> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js?d43a8-1394020097"></script> <script> var hour = parseInt(js_arr[j].substring(0,1)); var min = parseInt(js_arr[j].substring(3,4)); var seconds = parseInt(js_arr[j].substring(6,7)); var mil_sec = parseInt(js_arr[j].substring(9,11)); var time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; var bool = false; var a =0; function timeout(status){ setTimeout(function() { if(status) { document.getElementById('subs').innerHTML = js_arr[i]; i=i+4; j=j+4; hour = parseInt(js_arr[j].substring(0,1)); min = parseInt(js_arr[j].substring(3,4)); seconds = parseInt(js_arr[j].substring(6,7)); mil_sec = parseInt(js_arr[j].substring(9,11)); time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; timeout(status); } else{ timeout(status); } },time); } (function(){ // Listen for the ready event for any vimeo video players on the page var vimeoPlayers = document.querySelectorAll('iframe'), player; for (var i = 0, length = vimeoPlayers.length; i < length; i++) { player = vimeoPlayers[i]; $f(player).addEvent('ready', ready); } /** * Utility function for adding an event. Handles the inconsistencies * between the W3C method for adding events (addEventListener) and * IE's (attachEvent). */ function addEvent(element, eventName, callback) { if (element.addEventListener) { element.addEventListener(eventName, callback, false); } else { element.attachEvent('on' + eventName, callback); } } /** * Called once a vimeo player is loaded and ready to receive * commands. You can add events and make api calls only after this * function has been called. */ function ready(player_id) { // Keep a reference to Froogaloop for this player var container = document.getElementById(player_id).parentNode.parentNode, froogaloop = $f(player_id); /** * Sets up the actions for the buttons that will perform simple * api calls to Froogaloop (play, pause, etc.). These api methods * are actions performed on the player that take no parameters and * return no values. */ function setupSimpleButtons() { var buttons = container.querySelector('div dl.simple'), playBtn = buttons.querySelector('.play'), pauseBtn = buttons.querySelector('.pause') // Call play when play button clicked addEvent(playBtn, 'click', function() { froogaloop.api('play'); timeout(status); }, false); // Call pause when pause button clicked addEvent(pauseBtn, 'click', function() { froogaloop.api('pause'); timeout(status=false); }, false); } /** * Sets up the actions for the buttons that will modify certain * things about the player and the video in it. These methods * take a parameter, such as a color value when setting a color. */ /** * Sets up actions for buttons that will ask the player for something, * such as the current time or duration. These methods require a * callback function which will be called with any data as the first * parameter in that function. */ function setupGetterButtons() { var buttons = container.querySelector('div dl.getters'), timeBtn = buttons.querySelector('.time'), pausedBtn = buttons.querySelector('.paused'), widthBtn = buttons.querySelector('.width'), heightBtn = buttons.querySelector('.height'); // Get the current time and log it to the API console when time button clicked addEvent(timeBtn, 'click', function(e) { froogaloop.api('getCurrentTime', function (value, player_id) { // Log out the value in the API Console apiLog('getCurrentTime : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(pausedBtn, 'click', function(e) { froogaloop.api('paused', function (value, player_id) { // Log out the value in the API Console apiLog('paused : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(widthBtn, 'click', function(e) { froogaloop.api('getVideoWidth', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoWidth : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(heightBtn, 'click', function(e) { froogaloop.api('getVideoHeight', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoHeight : ' + value); }); }, false); } /** * Adds listeners for the events that are checked. Adding an event * through Froogaloop requires the event name and the callback method * that is called once the event fires. */ function setupEventListeners() { var checkboxes = container.querySelector('.listeners'), loadProgressChk = checkboxes.querySelector('.loadProgress'), playProgressChk = checkboxes.querySelector('.playProgress'), playChk = checkboxes.querySelector('.play'), pauseChk = checkboxes.querySelector('.pause'), finishChk = checkboxes.querySelector('.finish'); function onLoadProgress() { if (loadProgressChk.checked) { froogaloop.addEvent('loadProgress', function(data) { apiLog('loadProgress event : ' + data.percent + ' : ' + data.bytesLoaded + ' : ' + data.bytesTotal + ' : ' + data.duration); }); } else { froogaloop.removeEvent('loadProgress'); } } function onPlayProgress() { if (playProgressChk.checked) { froogaloop.addEvent('playProgress', function(data) { apiLog('playProgress event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration); }); } else { froogaloop.removeEvent('playProgress'); } } function onPlay() { status = true; } function onPause() { status = false; } function onFinish() { if (finishChk.checked) { froogaloop.addEvent('finish', function(data) { apiLog('finish'); }); } else { froogaloop.removeEvent('finish'); } } // Listens for the checkboxes to change addEvent(loadProgressChk, 'change', onLoadProgress, false); addEvent(playProgressChk, 'change', onPlayProgress, false); addEvent(playChk, 'change', onPlay, false); addEvent(pauseChk, 'change', onPause, false); addEvent(finishChk, 'change', onFinish, false); // Calls the change event if the option is checked // (this makes sure the checked events get attached on page load as well as on changed) onLoadProgress(); onPlayProgress(); onPlay(); onPause(); onFinish(); } /** * Sets up actions for adding a new clip window to the page. */ function setupAddClip() { var button = container.querySelector('.addClip'), newContainer; addEvent(button, 'click', function(e) { // Don't do anything if clicking on anything but the button (such as the input field) if (e.target != this) { return false; } // Gets the index of the current player by simply grabbing the number after the underscore var currentIndex = parseInt(player_id.split('_')[1]), clipId = button.querySelector('input').value; newContainer = resetContainer(container.cloneNode(true), currentIndex+1, clipId); container.parentNode.appendChild(newContainer); $f(newContainer.querySelector('iframe')).addEvent('ready', ready); }); /** * Resets the duplicate container's information, clearing out anything * that doesn't pertain to the new clip. It also sets the iframe to * use the new clip's id as its url. */ function resetContainer(element, index, clipId) { var newHeading = element.querySelector('h2'), newIframe = element.querySelector('iframe'), newCheckBoxes = element.querySelectorAll('.listeners input[type="checkbox"]'), newAddBtn = element.querySelector('.addClip'); // Set the heading text newHeading.innerText = 'Vimeo Player ' + index; // Set the correct source of the new clip id newIframe.src = 'http://player.vimeo.com/video/' + clipId + '?api=1&player_id=player_' + index; newIframe.id = 'player_' + index; // Reset all the checkboxes for listeners to be checked on for (var i = 0, length = newCheckBoxes.length, checkbox; i < length; i++) { checkbox = newCheckBoxes[i]; checkbox.setAttribute('checked', 'checked'); } // Clear out the API console newApiConsole.innerHTML = ''; // Update the clip ID of the add clip button return element; } } setupSimpleButtons(); setupModifierButtons(); setupGetterButtons(); setupEventListeners(); setupAddClip(); // Setup clear console button var clearBtn = container.querySelector('.console button'); addEvent(clearBtn, 'click', function(e) { apiConsole.innerHTML = ''; }, false); apiLog(player_id + 'ready!'); } })(); </script> </body> </html>
Output for hhvm-3.10.0 - 3.12.0
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type='text/javascript'> var status =true; var i=2; var j =1; Warning: No such file or directory in /in/VchgQ on line 14 var js_arr = false; </script> <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <hgroup> <h1><img src="http://a.vimeocdn.com/images_v6/vimeo_logo.png"> Player API Playground</h1> </hgroup> <div class="container"> <div> <h2>Vimeo Player 1</h2> <iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0" webkitallowfullscreen></iframe> <div id="subs" class="inner">replace this</div> <dl class="simple"> <dd><button class="play">Play</button></dd> <dd><button class="pause">Pause</button></dd> <script src="http://a.vimeocdn.com/js/froogaloop2.min.js?d43a8-1394020097"></script> <script> var hour = parseInt(js_arr[j].substring(0,1)); var min = parseInt(js_arr[j].substring(3,4)); var seconds = parseInt(js_arr[j].substring(6,7)); var mil_sec = parseInt(js_arr[j].substring(9,11)); var time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; var bool = false; var a =0; function timeout(status){ setTimeout(function() { if(status) { document.getElementById('subs').innerHTML = js_arr[i]; i=i+4; j=j+4; hour = parseInt(js_arr[j].substring(0,1)); min = parseInt(js_arr[j].substring(3,4)); seconds = parseInt(js_arr[j].substring(6,7)); mil_sec = parseInt(js_arr[j].substring(9,11)); time = (hour*3600000)+(min*60000)+(seconds*1000)+mil_sec; timeout(status); } else{ timeout(status); } },time); } (function(){ // Listen for the ready event for any vimeo video players on the page var vimeoPlayers = document.querySelectorAll('iframe'), player; for (var i = 0, length = vimeoPlayers.length; i < length; i++) { player = vimeoPlayers[i]; $f(player).addEvent('ready', ready); } /** * Utility function for adding an event. Handles the inconsistencies * between the W3C method for adding events (addEventListener) and * IE's (attachEvent). */ function addEvent(element, eventName, callback) { if (element.addEventListener) { element.addEventListener(eventName, callback, false); } else { element.attachEvent('on' + eventName, callback); } } /** * Called once a vimeo player is loaded and ready to receive * commands. You can add events and make api calls only after this * function has been called. */ function ready(player_id) { // Keep a reference to Froogaloop for this player var container = document.getElementById(player_id).parentNode.parentNode, froogaloop = $f(player_id); /** * Sets up the actions for the buttons that will perform simple * api calls to Froogaloop (play, pause, etc.). These api methods * are actions performed on the player that take no parameters and * return no values. */ function setupSimpleButtons() { var buttons = container.querySelector('div dl.simple'), playBtn = buttons.querySelector('.play'), pauseBtn = buttons.querySelector('.pause') // Call play when play button clicked addEvent(playBtn, 'click', function() { froogaloop.api('play'); timeout(status); }, false); // Call pause when pause button clicked addEvent(pauseBtn, 'click', function() { froogaloop.api('pause'); timeout(status=false); }, false); } /** * Sets up the actions for the buttons that will modify certain * things about the player and the video in it. These methods * take a parameter, such as a color value when setting a color. */ /** * Sets up actions for buttons that will ask the player for something, * such as the current time or duration. These methods require a * callback function which will be called with any data as the first * parameter in that function. */ function setupGetterButtons() { var buttons = container.querySelector('div dl.getters'), timeBtn = buttons.querySelector('.time'), pausedBtn = buttons.querySelector('.paused'), widthBtn = buttons.querySelector('.width'), heightBtn = buttons.querySelector('.height'); // Get the current time and log it to the API console when time button clicked addEvent(timeBtn, 'click', function(e) { froogaloop.api('getCurrentTime', function (value, player_id) { // Log out the value in the API Console apiLog('getCurrentTime : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(pausedBtn, 'click', function(e) { froogaloop.api('paused', function (value, player_id) { // Log out the value in the API Console apiLog('paused : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(widthBtn, 'click', function(e) { froogaloop.api('getVideoWidth', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoWidth : ' + value); }); }, false); // Get the paused state and log it to the API console when time button clicked addEvent(heightBtn, 'click', function(e) { froogaloop.api('getVideoHeight', function (value, player_id) { // Log out the value in the API Console apiLog('getVideoHeight : ' + value); }); }, false); } /** * Adds listeners for the events that are checked. Adding an event * through Froogaloop requires the event name and the callback method * that is called once the event fires. */ function setupEventListeners() { var checkboxes = container.querySelector('.listeners'), loadProgressChk = checkboxes.querySelector('.loadProgress'), playProgressChk = checkboxes.querySelector('.playProgress'), playChk = checkboxes.querySelector('.play'), pauseChk = checkboxes.querySelector('.pause'), finishChk = checkboxes.querySelector('.finish'); function onLoadProgress() { if (loadProgressChk.checked) { froogaloop.addEvent('loadProgress', function(data) { apiLog('loadProgress event : ' + data.percent + ' : ' + data.bytesLoaded + ' : ' + data.bytesTotal + ' : ' + data.duration); }); } else { froogaloop.removeEvent('loadProgress'); } } function onPlayProgress() { if (playProgressChk.checked) { froogaloop.addEvent('playProgress', function(data) { apiLog('playProgress event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration); }); } else { froogaloop.removeEvent('playProgress'); } } function onPlay() { status = true; } function onPause() { status = false; } function onFinish() { if (finishChk.checked) { froogaloop.addEvent('finish', function(data) { apiLog('finish'); }); } else { froogaloop.removeEvent('finish'); } } // Listens for the checkboxes to change addEvent(loadProgressChk, 'change', onLoadProgress, false); addEvent(playProgressChk, 'change', onPlayProgress, false); addEvent(playChk, 'change', onPlay, false); addEvent(pauseChk, 'change', onPause, false); addEvent(finishChk, 'change', onFinish, false); // Calls the change event if the option is checked // (this makes sure the checked events get attached on page load as well as on changed) onLoadProgress(); onPlayProgress(); onPlay(); onPause(); onFinish(); } /** * Sets up actions for adding a new clip window to the page. */ function setupAddClip() { var button = container.querySelector('.addClip'), newContainer; addEvent(button, 'click', function(e) { // Don't do anything if clicking on anything but the button (such as the input field) if (e.target != this) { return false; } // Gets the index of the current player by simply grabbing the number after the underscore var currentIndex = parseInt(player_id.split('_')[1]), clipId = button.querySelector('input').value; newContainer = resetContainer(container.cloneNode(true), currentIndex+1, clipId); container.parentNode.appendChild(newContainer); $f(newContainer.querySelector('iframe')).addEvent('ready', ready); }); /** * Resets the duplicate container's information, clearing out anything * that doesn't pertain to the new clip. It also sets the iframe to * use the new clip's id as its url. */ function resetContainer(element, index, clipId) { var newHeading = element.querySelector('h2'), newIframe = element.querySelector('iframe'), newCheckBoxes = element.querySelectorAll('.listeners input[type="checkbox"]'), newAddBtn = element.querySelector('.addClip'); // Set the heading text newHeading.innerText = 'Vimeo Player ' + index; // Set the correct source of the new clip id newIframe.src = 'http://player.vimeo.com/video/' + clipId + '?api=1&player_id=player_' + index; newIframe.id = 'player_' + index; // Reset all the checkboxes for listeners to be checked on for (var i = 0, length = newCheckBoxes.length, checkbox; i < length; i++) { checkbox = newCheckBoxes[i]; checkbox.setAttribute('checked', 'checked'); } // Clear out the API console newApiConsole.innerHTML = ''; // Update the clip ID of the add clip button return element; } } setupSimpleButtons(); setupModifierButtons(); setupGetterButtons(); setupEventListeners(); setupAddClip(); // Setup clear console button var clearBtn = container.querySelector('.console button'); addEvent(clearBtn, 'click', function(e) { apiConsole.innerHTML = ''; }, false); apiLog(player_id + 'ready!'); } })(); </script> </body> </html>