Create a video player for each video in your application using JS API

JS API allows you to make the calls to our servers from within your on page code. This makes it easy to do some actions right when you need it.

Since anyone could do these calls we have this turned off for every application by default. This allows you to set things up and be aware of everything related to your application.

So the first thing is to go into your Ziggeo account and enable this. This is how:

  1. Log into your Ziggeo Dashboard
  2. Click on the application that you want to use
  3. Now click on the Manage sub menu
  4. At this time you will want to click on the Authorization Settings.

Here you will see various options that help you set up what someone can do. In our case we are after the option found within "Client Authorization" section. The option is titled: "Client is allowed to perform the index operation".

If you have found it, click to have it checked and then click on Save. That is it, the index (search) call is allowed.

The Code

Great thing about the code is that most of it you can just copy paste into your page and it will work. There are few points that you should modify and we will help you see them.

As always we start with the header code. This adds Ziggeo to your page and is only added once per page.

<link rel="stylesheet" href="https://assets.ziggeo.com/v2-stable/ziggeo.css" />
<script src="https://assets.ziggeo.com/v2-stable/ziggeo.js"></script>
<script>
	var ziggeo_app = new ZiggeoApi.V2.Application({
		token:"APPLICATION_TOKEN",
		webrtc_streaming_if_necessary: true,
		webrtc_on_mobile: true
	});
</script>

Within the header code above you would only need to modify the "APPLICATION_TOKEN" part by adding your own application token.

Now we need to add the code that will make a call to our server and create the video players. This code is completely COPY->PASTE friendly, without any changes needed.

<script>
    var reached_end = false;
    var step = 0;
    var refresh_interval = null;

    function addVideos() {
        if(reached_end === true) { clearInterval(refresh_interval); }

        var index_obj = {
            limit:100,
            skip: (100*step)
        };
        ziggeo_app.videos.index(index_obj).success(function(videos){
            // videos is an array of all the videos 
            // the following code dynamically adds all the videos to the page 
            for (var i = 0; i < videos.length; ++i) {
                var player_code = '<ziggeoplayer ziggeo-theme="cube" ziggeo-themecolor="red" ziggeo-width="100%" ziggeo-video="' + videos[i].token + '"></ziggeoplayer>';
                document.body.insertAdjacentHTML('beforeend', player_code);
            }
            //We check if there are less than 100 videos.
            //If there are, then we reached the end (no more videos).
            if(videos.length < 100) {
                reached_end = true;
            }
            step++;
        });
    }

    // Now we make the above code run every 15 seconds until we get all videos.
    // As we are grabbing 100 videos at same time, you might want to increase the time by changing the 15 part in the code bellow.
    refresh_interval = setInterval( function() {addVideos();}, (15 * 1000) );
</script>

What this code is doing is that it is making the index call every 15 seconds. Once the data is returned the videos found will be shown as many different players on your page. If you have more than 100 videos it will go through all of them until the end.

As it reaches the end it will just stop making additional calls.

PREV NEXT