Click here to Skip to main content
12,951,606 members (61,462 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
This is my code to play videos in asp.net application..........if i pause the video get the paused time in text box.......
so how to get the paused time in text box.........
pls hlp me.......

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default13.aspx.cs" Inherits="Default13" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
<!--
       var WMState = new Array();
        WMState[0]  = "Undefined";
 
        WMState[1]  = "Stopped";
 
        WMState[2]  = "Paused";
 
        WMState[3]  = "Playing";
 
        WMState[4]  = "Scan Forward";
 
        WMState[5]  = "Scan Reverse";
 
        WMState[6]  = "Buffering";
 
        WMState[7]  = "Waiting";
 
        WMState[8]  = "Media Ended";
 
        WMState[9]  = "Transitioning";
 
        WMState[10] = "Ready";
 
        WMState[11] = "Reconnecting";
 
        function Status ()
        {
                 x = Player.playState;
 
                 alert("Windows Media Player is " + WMState[x] + "\r\r" + "Player Version:" + Player.versionInfo);
 
        }
 
        function Play ()
        {
                 x = Player.playState;
 
                 if (x == 2) {
 
                    Player.controls.play();
 
                 }else{
 
                    Player.URL = "video.mpeg";
 
                 }
 
        }
        function Pause ()
        {
 
                 Player.controls.pause();
 

 
        }
 
        function Stop () {
 
                 Player.controls.stop();
 

        }
-->
</script>
 
</head>
<body>
   <object id="Player" width="320" height="300" type ="video/x-ms-wmv">
 
        <param name = "Volume" value="50"/>
 
        <param name = "AutoStart" value="True"/>
 
</object>
 
<br />
 

<input type="button" name="BtnPlay"    value="Play"     accesskey="q"  onclick="Play()"/>
 
<input type="button" name="BtnPause"   value="Pause"    accesskey="w"  onclick="Pause()"/>
 
<input type="button" name="BtnStop"    value="Stop"     accesskey="s"  onclick="Stop()"/>
 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</body>
</html>


pls hlp me.......
Posted 7-Feb-12 19:49pm
Comments
Member 8629971 8-Feb-12 3:45am
   
how to save the music file in the sql database.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

Player.controls.currentPositionString[^] can be used for current position.
  Permalink  
Comments
saravana_solai 8-Feb-12 2:37am
   
Thank you for your solution
saravana_solai 8-Feb-12 2:39am
   
you know how to disable media player controls because i am using button controls..
pls hlp me..
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

function Play ()
{
var timer = window.setInterval("txtsound.value = Player.controls.currentPositionString",1000);

x = Player.playState;

if (x == 2) {

Player.controls.play();



}else{

Player.URL = "Traffic motion detector.avi";

}

}
  Permalink  
v2
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=700,maximum-scale=1.0,user-scalable=yes">
        <title>Vimeo Froogaloop API Playground</title>
        <style>
            body, html, dl, dd { margin: 0; padding: 0;}
 
            body, html {
                font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
                color: #343434;
                background: #f7f7f7;
            }
 
            iframe {
                display:block;
                border:0;
                margin-bottom: 20px;
            }
 
            h1 {
                font-weight: normal;
                text-align: center;
            }
 
            button {
                background: #e9e9e9;
                cursor: pointer;
                border: 1px solid #ddd;
                padding: 2px 13px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                margin: 0;
                cursor: pointer;
            }
 
            .wrapper {
                width: 600px;
                margin: 0 auto;
                margin-bottom: 30px;
            }
 
            .wrapper .container > div {
                background: #fff;
                padding: 30px;
                border: 1px solid #ddd;
                box-sizing: border-box;
                margin-top: 30px;
            }
 
            .wrapper .container:first-child {
                margin-top: 0;
            }
 
            .wrapper .container h2 {
                margin: 0 0 20px 0;
            }
 
            .wrapper .container button {
                line-height: 19px;
            }
 
            .wrapper .container input[type="text"] {
                font-size: 12px;
            }
 
            button input[type="text"] {
                border: 1px solid #ddd;
                text-align: center;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                margin: 0 -11px 0 5px;
                padding: 2px;
            }
 
            .wrapper div dl {
                margin-bottom: 15px;
            }
 
            .wrapper div dt {
                margin-bottom: 5px;
            }
 
            .wrapper div dt span {
                font-size: 0.9em;
                color: #666;
            }
 
            .wrapper div dd {
                display: inline-block;
                font-size: 12px;
                margin-bottom: 5px;
            }
 
            .wrapper div dd label {
                margin-right: 10px;
            }
 
            .wrapper div .output {
                display: block;
                width: 100%;
                height: 100px;
                border: 1px solid #ddd;
                overflow-y: auto;
                font-size: 13px;
                padding: 5px;
                box-sizing: border-box;
                line-height: 1.4em;
                resize: vertical;
                font-family: Inconsolata, Monaco, monospace;
            }
 
            .wrapper .container > button {
                border: 1px solid #ddd;
                font-weight: bold;
                font-size: 1.2em;
                margin: -1px 0 0 0;
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }
 
            .wrapper > button input[type="text"] {
                padding: 6px;
            }
 
            .console dd {
                width: 100%;
                white-space: nowrap;
            }
 
            .console .clear {
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <hgroup>
                <h1>Vimeo Froogaloop 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"></iframe>
                    <dl class="simple">
                        <dt>Simple Buttons <span>(buttons with simple API calls)</span></dt>
                        <dd><button class="play">Play</button></dd>
                        <dd><button class="pause">Pause</button></dd>
                        <dd><button class="unload">Unload</button></dd>
                    </dl>
                    <dl class="modifiers">
                        <dt>Modifier Buttons <span>(buttons that modify the player)</span></dt>
                        <dd><button class="seek">Seek <input type="text" value="30" size="3" maxlength="3" /></button></dd>
                        <dd><button class="volume">Volume <input type="text" value="0.5" size="3" maxlength="3" /></button></dd>
                        <dd><button class="loop">Loop <input type="text" value="0" size="3" maxlength="3" /></button></dd>
                        <dd><button class="color">Color <input type="text" value="00adef" size="5" /></button></dd>
                        <dd><button class="randomColor">Random Color</button></dd>
                    </dl>
                    <dl class="getters">
                        <dt>Getters <span>(buttons that get back a value; logged out in the console)</span></dt>
                        <dd><button class="time">Current Time</button></dd>
                        <dd><button class="duration">Duration</button></dd>
                        <dd><button class="color">Color</button></dd>
                        <dd><button class="url">URL</button></dd>
                        <dd><button class="embed">Embed Code</button></dd>
                        <dd><button class="paused">Paused</button></dd>
                        <dd><button class="getVolume">Volume</button></dd>
                        <dd><button class="height">Video Height</button></dd>
                        <dd><button class="width">Video Width</button></dd>
                    </dl>
                    <dl class="listeners">
                        <dt>Event Listeners</dt>
                        <dd><label><input class="loadProgress" type="checkbox" checked />loadProgress</label></dd>
                        <dd><label><input class="playProgress" type="checkbox" checked />playProgress</label></dd>
                        <dd><label><input class="play" type="checkbox" checked />play</label></dd>
                        <dd><label><input class="pause" type="checkbox" checked />pause</label></dd>
                        <dd><label><input class="finish" type="checkbox" checked />finish</label></dd>
                        <dd><label><input class="seek" type="checkbox" checked />seek</label></dd>
                    </dl>
                    <dl class="console">
                        <dt>Console</dt>
                        <dd><textarea class="output" readonly="readonly"></textarea><button class="clear">Clear</button></dd>
                    </dl>
                </div>
                <button class="addClip" title="Add a new clip.">+ <input type="text" value="3718294" size="8" /></button>
            </div>
 
        <script src="froogaloop.js"></script>
        <script>
            (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(eventName, callback, false);
                    }
                }
 
                /**
                 * 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),
                        apiConsole = container.querySelector('.console .output');
 
                    /**
                     * Prepends log messages to the example console for you to see.
                     */
                    function apiLog(message) {
                        apiConsole.innerHTML = message + '\n' + apiConsole.innerHTML;
                    }
 
                    /**
                     * 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'),
                            unloadBtn = buttons.querySelector('.unload');
 
                        // Call play when play button clicked
                        addEvent(playBtn, 'click', function() {
                            froogaloop.api('play');
                        }, false);
 
                        // Call pause when pause button clicked
                        addEvent(pauseBtn, 'click', function() {
                            froogaloop.api('pause');
                        }, false);
 
                        // Call unload when unload button clicked
                        addEvent(unloadBtn, 'click', function() {
                            froogaloop.api('unload');
                        }, 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.
                     */
                    function setupModifierButtons() {
                        var buttons = container.querySelector('div dl.modifiers'),
                            seekBtn = buttons.querySelector('.seek'),
                            volumeBtn = buttons.querySelector('.volume'),
                            loopBtn = buttons.querySelector('.loop'),
                            colorBtn = buttons.querySelector('.color'),
                            randomColorBtn = buttons.querySelector('.randomColor');
 
                        // Call seekTo when seek button clicked
                        addEvent(seekBtn, '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;
                            }
 
                            // Grab the value in the input field
                            var seekVal = this.querySelector('input').value;
 
                            // Call the api via froogaloop
                            froogaloop.api('seekTo', seekVal);
                        }, false);
 
                        // Call setVolume when volume button clicked
                        addEvent(volumeBtn, '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;
                            }
 
                            // Grab the value in the input field
                            var volumeVal = this.querySelector('input').value;
 
                            // Call the api via froogaloop
                            froogaloop.api('setVolume', volumeVal);
                        }, false);
 
                        // Call setLoop when loop button clicked
                        addEvent(loopBtn, '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;
                            }
 
                            // Grab the value in the input field
                            var loopVal = this.querySelector('input').value;
 
                            //Call the api via froogaloop
                            froogaloop.api('setLoop', loopVal);
                        }, false);
 
                        // Call setColor when color button clicked
                        addEvent(colorBtn, '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;
                            }
 
                            // Grab the value in the input field
                            var colorVal = this.querySelector('input').value;
 
                            // Call the api via froogaloop
                            froogaloop.api('setColor', colorVal);
                        }, false);
 
                        // Call setColor with a random color when random color button clicked
                        addEvent(randomColorBtn, '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;
                            }
 
                            // Generate a random color
                            var colorVal = Math.floor(Math.random() * 16777215).toString(16);
 
                            // Call the api via froogaloop
                            froogaloop.api('setColor', colorVal);
                        }, false);
                    }
 
                    /**
                     * 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'),
                            durationBtn = buttons.querySelector('.duration'),
                            colorBtn = buttons.querySelector('.color'),
                            urlBtn = buttons.querySelector('.url'),
                            embedBtn = buttons.querySelector('.embed'),
                            pausedBtn = buttons.querySelector('.paused'),
                            getVolumeBtn = buttons.querySelector('.getVolume'),
                            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 duration and log it to the API console when time button clicked
                        addEvent(durationBtn, 'click', function(e) {
                            froogaloop.api('getDuration', function (value, player_id) {
                                // Log out the value in the API Console
                                apiLog('getDuration : ' + value);
                            });
                        }, false);
 
                        // Get the embed color and log it to the API console when time button clicked
                        addEvent(colorBtn, 'click', function(e) {
                            froogaloop.api('getColor', function (value, player_id) {
                                // Log out the value in the API Console
                                apiLog('getColor : ' + value);
                            });
                        }, false);
 
                        // Get the video url and log it to the API console when time button clicked
                        addEvent(urlBtn, 'click', function(e) {
                            froogaloop.api('getVideoUrl', function (value, player_id) {
                                // Log out the value in the API Console
                                apiLog('getVideoUrl : ' + value);
                            });
                        }, false);
 
                        // Get the embed code and log it to the API console when time button clicked
                        addEvent(embedBtn, 'click', function(e) {
                            froogaloop.api('getVideoEmbedCode', function (value, player_id) {
                                // Use html entities for less-than and greater-than signs
                                value = value.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
                                // Log out the value in the API Console
                                apiLog('getVideoEmbedCode : ' + 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(getVolumeBtn, 'click', function(e) {
                            froogaloop.api('getVolume', function (value, player_id) {
                                // Log out the value in the API Console
                                apiLog('volume : ' + 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'),
                            seekChk = checkboxes.querySelector('.seek');
 
                        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() {
                            if (playChk.checked) {
                                froogaloop.addEvent('play', function(data) {
                                    apiLog('play event');
                                });
                            }
                            else {
                                froogaloop.removeEvent('play');
                            }
                        }
 
                        function onPause() {
                            if (pauseChk.checked) {
                                froogaloop.addEvent('pause', function(data) {
                                    apiLog('pause event');
                                });
                            }
                            else {
                                froogaloop.removeEvent('pause');
                            }
                        }
 
                        function onFinish() {
                            if (finishChk.checked) {
                                froogaloop.addEvent('finish', function(data) {
                                    apiLog('finish');
                                });
                            }
                            else {
                                froogaloop.removeEvent('finish');
                            }
                        }
 
                        function onSeek() {
                            if (seekChk.checked) {
                                froogaloop.addEvent('seek', function(data) {
                                    apiLog('seek event : ' + data.seconds + ' : ' + data.percent + ' : ' + data.duration);
                                });
                            }
                            else {
                                froogaloop.removeEvent('seek');
                            }
                        }
 
                        // 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);
                        addEvent(seekChk, 'change', onSeek, 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();
                        onSeek();
                    }
 
                    /**
                     * 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"]'),
                                newApiConsole = element.querySelector('.console .output'),
                                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
                            newAddBtn.querySelector('input').setAttribute('value', clipId);
 
                            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>


alert('Remove this line before using in production!');
 
// Init style shamelessly stolen from jQuery http://jquery.com
var Froogaloop = (function(){
    // Define a local copy of Froogaloop
    function Froogaloop(iframe) {
        // The Froogaloop object is actually just the init constructor
        return new Froogaloop.fn.init(iframe);
    }
 
    var eventCallbacks = {},
        hasWindowEvent = false,
        isReady = false,
        slice = Array.prototype.slice,
        playerDomain = '';
 
    Froogaloop.fn = Froogaloop.prototype = {
        element: null,
 
        init: function(iframe) {
            if (typeof iframe === "string") {
                iframe = document.getElementById(iframe);
            }
 
            this.element = iframe;
 
            // Register message event listeners
            playerDomain = getDomainFromUrl(this.element.getAttribute('src'));
 
            return this;
        },
 
        /*
         * Calls a function to act upon the player.
         *
         * @param {string} method The name of the Javascript API method to call. Eg: 'play'.
         * @param {Array|Function} valueOrCallback params Array of parameters to pass when calling an API method
         *                                or callback function when the method returns a value.
         */
        api: function(method, valueOrCallback) {
            if (!this.element || !method) {
                return false;
            }
 
            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                params = !isFunction(valueOrCallback) ? valueOrCallback : null,
                callback = isFunction(valueOrCallback) ? valueOrCallback : null;
 
            // Store the callback for get functions
            if (callback) {
                storeCallback(method, callback, target_id);
            }
 
            postMessage(method, params, element);
            return self;
        },
 
        /*
         * Registers an event listener and a callback function that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to listen for.
         * @param callback (Function): Function that should be called when the event fires.
         */
        addEvent: function(eventName, callback) {
            if (!this.element) {
                return false;
            }
 
            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null;
 

            storeCallback(eventName, callback, target_id);
 
            // The ready event is not registered via postMessage. It fires regardless.
            if (eventName != 'ready') {
                postMessage('addEventListener', eventName, element);
            }
            else if (eventName == 'ready' && isReady) {
                callback.call(null, target_id);
            }
 
            return self;
        },
 
        /*
         * Unregisters an event listener that gets called when the event fires.
         *
         * @param eventName (String): Name of the event to stop listening for.
         */
        removeEvent: function(eventName) {
            if (!this.element) {
                return false;
            }
 
            var self = this,
                element = self.element,
                target_id = element.id !== '' ? element.id : null,
                removed = removeCallback(eventName, target_id);
 
            // The ready event is not registered
            if (eventName != 'ready' && removed) {
                postMessage('removeEventListener', eventName, element);
            }
        }
    };
 
    /**
     * Handles posting a message to the parent window.
     *
     * @param method (String): name of the method to call inside the player. For api calls
     * this is the name of the api method (api_play or api_pause) while for events this method
     * is api_addEventListener.
     * @param params (Object or Array): List of parameters to submit to the method. Can be either
     * a single param or an array list of parameters.
     * @param target (HTMLElement): Target iframe to post the message to.
     */
    function postMessage(method, params, target) {
        if (!target.contentWindow.postMessage) {
            return false;
        }
 
        var url = target.getAttribute('src').split('?')[0],
            data = JSON.stringify({
                method: method,
                value: params
            });
 
        if (url.substr(0, 2) === '//') {
            url = window.location.protocol + url;
        }
 
        target.contentWindow.postMessage(data, url);
    }
 
    /**
     * Event that fires whenever the window receives a message from its parent
     * via window.postMessage.
     */
    function onMessageReceived(event) {
        var data, method;
 
        try {
            data = JSON.parse(event.data);
            method = data.event || data.method;
        }
        catch(e)  {
            //fail silently... like a ninja!
        }
 
        if (method == 'ready' && !isReady) {
            isReady = true;
        }
 
        // Handles messages from moogaloop only
        if (event.origin != playerDomain) {
            return false;
        }
 
        var value = data.value,
            eventData = data.data,
            target_id = target_id === '' ? null : data.player_id,
 
            callback = getCallback(method, target_id),
            params = [];
 
        if (!callback) {
            return false;
        }
 
        if (value !== undefined) {
            params.push(value);
        }
 
        if (eventData) {
            params.push(eventData);
        }
 
        if (target_id) {
            params.push(target_id);
        }
 
        return params.length > 0 ? callback.apply(null, params) : callback.call();
    }
 

    /**
     * Stores submitted callbacks for each iframe being tracked and each
     * event for that iframe.
     *
     * @param eventName (String): Name of the event. Eg. api_onPlay
     * @param callback (Function): Function that should get executed when the
     * event is fired.
     * @param target_id (String) [Optional]: If handling more than one iframe then
     * it stores the different callbacks for different iframes based on the iframe's
     * id.
     */
    function storeCallback(eventName, callback, target_id) {
        if (target_id) {
            if (!eventCallbacks[target_id]) {
                eventCallbacks[target_id] = {};
            }
            eventCallbacks[target_id][eventName] = callback;
        }
        else {
            eventCallbacks[eventName] = callback;
        }
    }
 
    /**
     * Retrieves stored callbacks.
     */
    function getCallback(eventName, target_id) {
        if (target_id) {
            return eventCallbacks[target_id][eventName];
        }
        else {
            return eventCallbacks[eventName];
        }
    }
 
    function removeCallback(eventName, target_id) {
        if (target_id && eventCallbacks[target_id]) {
            if (!eventCallbacks[target_id][eventName]) {
                return false;
            }
            eventCallbacks[target_id][eventName] = null;
        }
        else {
            if (!eventCallbacks[eventName]) {
                return false;
            }
            eventCallbacks[eventName] = null;
        }
 
        return true;
    }
 
    /**
     * Returns a domain's root domain.
     * Eg. returns http://vimeo.com when http://vimeo.com/channels is sbumitted
     *
     * @param url (String): Url to test against.
     * @return url (String): Root domain of submitted url
     */
    function getDomainFromUrl(url) {
        if (url.substr(0, 2) === '//') {
            url = window.location.protocol + url;
        }
 
        var url_pieces = url.split('/'),
            domain_str = '';
 
        for(var i = 0, length = url_pieces.length; i < length; i++) {
            if(i<3) {domain_str += url_pieces[i];}
            else {break;}
            if(i<2) {domain_str += '/';}
        }
 
        return domain_str;
    }
 
    function isFunction(obj) {
        return !!(obj && obj.constructor && obj.call && obj.apply);
    }
 
    function isArray(obj) {
        return toString.call(obj) === '[object Array]';
    }
 
    // Give the init function the Froogaloop prototype for later instantiation
    Froogaloop.fn.init.prototype = Froogaloop.fn;
 
    // Listens for the message event.
    // W3C
    if (window.addEventListener) {
        window.addEventListener('message', onMessageReceived, false);
    }
    // IE
    else {
        window.attachEvent('onmessage', onMessageReceived);
    }
 
    // Expose froogaloop to the global object
    return (window.Froogaloop = window.$f = Froogaloop);
 
})();


\

alert("Remove this line before using in production!");
var Froogaloop=function(){function e(a){return new e.fn.init(a)}function h(a,c,b){if(!b.contentWindow.postMessage)return!1;var f=b.getAttribute("src").split("?")[0],a=JSON.stringify({method:a,value:c});"//"===f.substr(0,2)&&(f=window.location.protocol+f);b.contentWindow.postMessage(a,f)}function j(a){var c,b;try{c=JSON.parse(a.data),b=c.event||c.method}catch(f){}"ready"==b&&!i&&(i=!0);if(a.origin!=k)return!1;var a=c.value,e=c.data,g=""===g?null:c.player_id;c=g?d[g][b]:d[b];b=[];if(!c)return!1;void 0!==
a&&b.push(a);e&&b.push(e);g&&b.push(g);return 0<b.length?c.apply(null,b):c.call()}function l(a,c,b){b?(d[b]||(d[b]={}),d[b][a]=c):d[a]=c}var d={},i=!1,k="";e.fn=e.prototype={element:null,init:function(a){"string"===typeof a&&(a=document.getElementById(a));this.element=a;a=this.element.getAttribute("src");"//"===a.substr(0,2)&&(a=window.location.protocol+a);for(var a=a.split("/"),c="",b=0,f=a.length;b<f;b++){if(3>b)c+=a[b];else break;2>b&&(c+="/")}k=c;return this},api:function(a,c){if(!this.element||
!a)return!1;var b=this.element,f=""!==b.id?b.id:null,d=!c||!c.constructor||!c.call||!c.apply?c:null,e=c&&c.constructor&&c.call&&c.apply?c:null;e&&l(a,e,f);h(a,d,b);return this},addEvent:function(a,c){if(!this.element)return!1;var b=this.element,d=""!==b.id?b.id:null;l(a,c,d);"ready"!=a?h("addEventListener",a,b):"ready"==a&&i&&c.call(null,d);return this},removeEvent:function(a){if(!this.element)return!1;var c=this.element,b;a:{if((b=""!==c.id?c.id:null)&&d[b]){if(!d[b][a]){b=!1;break a}d[b][a]=null}else{if(!d[a]){b=
!1;break a}d[a]=null}b=!0}"ready"!=a&&b&&h("removeEventListener",a,c)}};e.fn.init.prototype=e.fn;window.addEventListener?window.addEventListener("message",j,!1):window.attachEvent("onmessage",j);return window.Froogaloop=window.$f=e}();
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 6,229
CHill60 3,490
Maciej Los 3,083
Jochen Arndt 1,975
ppolymorphe 1,880


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 2 Apr 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100