What is the reason for this error "Uncaught ReferenceError: SambaPlayer is not defined"?

Question

What is the reason for this error "Uncaught ReferenceError: SambaPlayer is not defined"?

Navigation

#1 by (3 votes)

2

You are saying that "SambaPlayer" is not defined.

<script>
    var xmlhttp = new XMLHttpRequest();
    var url = "https://api.sambavideos.sambatech.com/v1/medias?access_token=847584758475847874858363&pid=3434&sort=DESC&limit=5&filter=id,title,status,qualifier,description,shortDescription,categoryName,files,thumbs";

    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
      }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    myFunction(url);
    function myFunction(response) {
        var arr = JSON.parse(JSON.stringify(response));
        var i;
        var out = "<div>";

        for(i = 0; i < arr.length; i++) {
            out += "<a href='#' class='samba-playlist-trigger list-group-item active' data-mediaid=" + arr[i].id + "></a>";
        }
        out += "</div>";
        document.getElementById("id01").innerHTML = out;
    }
</script>

<script>// <![CDATA[
   var player = new SambaPlayer("player", {
   height: 270,
   width: 480,
   playlist: playlistObj,
   playerParams: {
    volume: 0,
    startOutput: '480p',
    html5: true
   },
   events: {
    "*": "eventListener"
   }
   });
// ]]></script>

<script>// <![CDATA[
  function eventListener(player){
  }

  function onClick(mediaId, evt){
    document.getElementsByClassName('samba-playlist-trigger list-group-item active')[0].className = 'samba-playlist-trigger list-group-item';
    evt.target.className = "samba-playlist-trigger list-group-item active";
  }
// ]]></script>

Display page html

<!DOCTYPE html>
<html lang="pt-br">
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <div class="container">
      <div class="row">
          <div id="id01"></div>
      </div>
   </div>

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!--chamadadosvídeos--><scripttype="text/javascript" samba-player-api="player" src="http://player.sambatech.com.br/v3/samba.player.api.js"></script>
</body>
</html>

javascript

asked by anonymous 17.02.2017 / 13:46

1 answer

Download a PDF received from an API with AngularJS How to add properties to WPF components?

score 3 · Accepted Answer

As I suspected, the problem was apparently in the library import itself.

I simulated a scenario similar to yours and found that the error you indicated occurs if you attempt to reference the SambaPlayer object before importing the library. This is because JavaScript runs as it is being referenced in HTML, and if you try to reference an object before the library loads, the error will occur.

In this case you have two options:

Move the call code to the SambaPlayer object to be below the library call:

  <script type="text/javascript" samba-player-api="player" src="http://player.sambatech.com.br/v3/samba.player.api.js"></script><scripttype="text/javascript">
var player = new SambaPlayer("player", {
  height: 270,
  width: 480,
 playlist: null,
  playerParams: {
    volume: 0,
    startOutput: '480p',
    html5: true
  },
  events: {
    "*": "eventListener"
  }
  });

Or call the SambaPlayer object inside a document.ready, because then the browser will wait until the document is loaded and then execute this part of JavaScript (and with that preload the library):

    <script type="text/javascript">  
$(document).ready(function () {
    var player = new SambaPlayer("player", {
      height: 270,
      width: 480,
      playerParams: {
        volume: 0,
        startOutput: '480p',
        html5: true
      },
      events: {
        "*": "eventListener"
      }
    });
});
</script>