Cloudinary Video Player

API and Events

Example Code:

      
        <video
          id="player"
          controls
          muted
          class="cld-video-player"
          width="600">
        </video>

        <div>
          <button id="vid-seek-minus" class="btn btn-default">-10 seconds</button>
          <button id="vid-seek-plus" class="btn btn-default">+10 seconds</button>
          <button id="vid-play-prev" class="btn btn-default">Previous</button>
          <button id="vid-play-next" class="btn btn-default">Next</button>
          <button id="vid-play" class="btn btn-default">Play</button>
          <button id="vid-pause" class="btn btn-default">Pause</button>
          <button id="vid-stop" class="btn btn-default">Stop</button>
          <button id="vid-mute" class="btn btn-default">Mute</button>
          <button id="vid-unmute" class="btn btn-default">Unmute</button>
          <button id="vid-volume-minus" class="btn btn-default">Volume -10%</button>
          <button id="vid-volume-plus" class="btn btn-default">Volume +10%</button>
          <button id="vid-maximize" class="btn btn-default">Maximize</button>
          <button id="vid-toggle-controls" class="btn btn-default">Toggle Controls</button>
        </div>

        <div id="vid-events" class="alert alert-secondary text-center mt-4 p-4 w-100" style="overflow: scroll; height: 150px"></div>
      

      

        var player = cloudinary.videoPlayer('player', { cloud_name: 'demo' });

        player.playlist([
          'snow_deer',
          'sea_turtle',
          'snow_horses'
        ], { autoAdvance: 0 }).play();

        // Button 'click' event handlers
        document.querySelector("#vid-seek-minus").addEventListener('click', function() {
          player.currentTime(player.currentTime() - 10);
        });

        document.querySelector("#vid-seek-plus").addEventListener('click', function() {
          player.currentTime(player.currentTime() + 10);
        });

        document.querySelector("#vid-play-prev").addEventListener('click', function() {
          player.playPrevious();
        });

        document.querySelector("#vid-play").addEventListener('click', function() {
          player.play();
        });

        document.querySelector("#vid-play-next").addEventListener('click', function() {
          player.playNext();
        });

        document.querySelector("#vid-pause").addEventListener('click', function() {
          player.pause();
        });

        document.querySelector("#vid-stop").addEventListener('click', function() {
          player.stop();
        });

        document.querySelector("#vid-mute").addEventListener('click', function() {
          player.mute();
        });

        document.querySelector("#vid-unmute").addEventListener('click', function() {
          player.unmute();
        });

        document.querySelector("#vid-volume-minus").addEventListener('click', function() {
          player.volume(player.volume() - 0.1);
        });

        document.querySelector("#vid-volume-plus").addEventListener('click', function() {
          player.volume(player.volume() + 0.1);
        });

        document.querySelector("#vid-maximize").addEventListener('click', function() {
          player.maximize();
        });

        document.querySelector("#vid-toggle-controls").addEventListener('click', function() {
          player.controls(!player.controls());
        });

        // Register to some video player events
        var eventTypes = ['play', 'pause', 'volumechange', 'mute', 'unmute', 'fullscreenchange',
          'seek', 'sourcechanged', 'percentsplayed', 'ended'];

        var eventsDiv = document.querySelector('#vid-events');
        eventTypes.forEach(function(eventType) {
          player.on(eventType, function(event) {
            var eventStr = eventType;
            if (event.eventData) {
              eventStr = eventStr + ": " + JSON.stringify(event.eventData);
            }
            var text = document.createTextNode(eventStr);
            var textDiv = document.createElement('div');
            textDiv.appendChild(text);
            eventsDiv.appendChild(textDiv);
            updateEvents();
          })
        });

        function updateEvents() {
          var eventsDiv = document.querySelector('#vid-events');
          eventsDiv.scrollTop = eventsDiv.scrollHeight;
        }