web: Uncaught TypeError: Cannot read property 'ready' of undefined and Cannot read property '0' of null(…)

mardi 22 novembre 2016

Uncaught TypeError: Cannot read property 'ready' of undefined and Cannot read property '0' of null(…)

I am trying to open different vimeo videos in overlays on button clicks. The following is my source code

CSS

.button_green 
    {  
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        width: 150px;
    }

    .button_red
    {  
        background-color: #FF0000;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        width: 150px;
    }

    div#overlay_1, div#overlay_2
    {
        display: none;
        z-index: 2;
        background: #000;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        text-align: center;
    }
    div#specialBox 
    {
        display: none;
        position: fixed;
        position: fixed;
        z-index: 3000;
        height: 100%;
        width: 100%; 
        background: #FFF;
        color: #000;
    }
    div#wrapper 
    {
        position:absolute;
        top: 0px;
        left: 0px;
        padding-left:24px;
    }
    .closebtn 
    {
        position: absolute;
        top: 0%;
        right: 45px;
        font-size: 40px;
    }

HTML

<body onload="loadSettings(document.forms[0]); playerSetup()">
<form name="edit_settings" id="edit_settings_frm" action="#">
<div id="overlay_1">
<div id="specialBox">
  <iframe src="https://player.vimeo.com/video/183364240?api=1&title=0&byline=0&portrait=0&player_id=myVid_1" width="100%" height="100%" frameborder="0"  id="myVid_1"></iframe>
  <div class="closebtn">
    <a href="javascript:void(0)" onclick="toggleOverlay('myVid_1'); resetVideo('myVid_1');">&times;         
    </a>
  </div>
</div>
</div>

<div id="overlay_2">
<div id="specialBox">
  <iframe id="myVid_2"  src="https://player.vimeo.com/video/188471047?api=1&title=0&byline=0&portrait=0&player_id=myVid_2" width="100%" height="100%" frameborder="0"></iframe>
  <div class="closebtn">
    <a href="javascript:void(0)" onclick="toggleOverlay('myVid_2'); resetVideo('myVid_2');">&times;         
    </a>
   </div>
</div>
</div>

<div id="wrapper">
  <input  type="button"  name="Google_Green"  class="button_green"  value="Google"   style="display: none"  ></input>
  <input  type="button"  name="Google_Red"    class="button_red"    value="Google"   style="display: none"  
    a href="#" onclick="toggleOverlay('myVid_1');"  ></input><br>

  <input type="button" name="W3Schools_Green" class="button_green" value="W3Schools_Green" style="display: none"  ></input>
  <input type="button" name="W3Schools_Red"   class="button_red"   value="W3Schools_Red" style="display: none"  
    a href="#" onclick="toggleOverlay('myVid_2');"  ></input><br>
</div>

JS

function loadSettings(form_id)
{
  //from the database get the variable settings
  if ( settings.charAt(0) == '1' )                                
  {
    form_id.elements["Google_Green"].style.display    = 'none';
    form_id.elements["Google_Red"].style.display      = '';    
  }
  else
  {
    form_id.elements["Google_Green"].style.display    = '';
    form_id.elements["Google_Red"].style.display      = 'none';
  }     

  if ( settings.charAt(1) == '1' )
  {
    form_id.elements["W3Schools_Green"].style.display = 'none';
    form_id.elements["W3Schools_Red"].style.display   = ''; 
  }
  else
  {
    form_id.elements["W3Schools_Green"].style.display = '';
    form_id.elements["W3Schools_Red"].style.display   = 'none';
  }
}

function toggleOverlay(player_id)
    {
        $("#" + player_id).parent("#specialBox").parent().css("opacity","1");
        $("#" + player_id).parent("#specialBox").parent().toggle();
        $("#" + player_id).parent("#specialBox").toggle();
    }

    function resetVideo(video_id)
    {
        var players;
        players=$('#' + video_id);
        $f(players[0]).api('unload');
    }

    function playerSetup()
    {       
        var player_listener_1 = $('#myVid_1')[0];
        var player_listener_2 = $('#myVid_2')[0];
        $f(player_listener_1).addEvent('ready', ready); 
        $f(player_listener_2).addEvent('ready', ready); 

        function addEvent(element, eventName, callback) {
            if (element.addEventListener) {
                element.addEventListener(eventName, callback, false);
            }
            else {
                element.attachEvent(eventName, callback, false);
            }
        }

        function ready(player_id) {
            var froogaloop = $f(player_id);
            function onFinish() {
                froogaloop.addEvent('finish', function(data) {
                    toggleOverlay(player_id);
                    resetVideo(player_id)
                });
            }   
            onFinish();
        }
    }

My Code

I am recieveing these errors -

Uncaught TypeError: Cannot read property 'ready' of undefined(…) at this line - froogaloop2.min.js:1

and

Uncaught TypeError: Cannot read property '0' of null(…) at this line - var player_listener_1 = $('#myVid_1')[0];

Is me placing the different parts of the code in wrong places causing the error? Can anyone tell me what am I doing wrong?

web

mardi 22 novembre 2016

Uncaught TypeError: Cannot read property 'ready' of undefined and Cannot read property '0' of null(…)

Aucun commentaire:

Enregistrer un commentaire