Cloudinary Video Player

API and Events

The cloudinary.VideoPlayer can be controlled by it's API.
Additionally, events are always useful: you may register to all standard HTML5 video element events as well as some additional events specific to the Video Player.
Consult the API documentation for more information.

Example Code:

      HTML:

      <div class="row">
        <center>
          <video
            id="example-player"
            controls
            muted
            class="cld-video-player cld-video-player-skin-dark"
            width="600">
          </video>
        </center>
        <br>
        <center>
          <div id="vid-source-data">
            <span id="vid-source-public-id"></span><br>
            <span id="vid-source-url"></span><br>
          </div>
          <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>
        </center>
        <br>
        <div id="vid-events" class="well" style="overflow: scroll; height: 100px">
        </div>
      </div>


      JavaScript:

      var cld = cloudinary.Cloudinary.new({ cloud_name: 'miki-cloudinary' });

      // Initialize player with base transformation (applies to all transformations)
      var player = cld.videoPlayer('example-player', {
        transformation: {
          overlay: "text:arial_60:Example",
          gravity: "north_west",
          x: 20,
          y: 20,
          start_offset: 3,
          end_offset: 10,
          color: 'red',
          width: 600,
          crop: 'limit'
        },
        posterOptions: {
          transformation: { effect: ['sepia'] }
        }
      });

      // 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;
      }

      // Update source information when source is changed.
      player.on('sourcechanged', function() {
        updateSourceData();
      });

      function updateSourceData() {
        document.querySelector("#vid-source-public-id").innerText = "Public Id: " + player.currentPublicId();
        document.querySelector("#vid-source-url").innerText = "Source URL: " + player.currentSourceUrl();
      }

      // Set player playlist
      player.playlist([
        'oceans',
        'negative',
        'book'
      ], { autoAdvance: 0 }).play();