Search code examples
javascriptclappr

Fullscreen doesn't work with clappr player


How to force Clappr player to stay fullscreen after change video? I write a function that triggered on PLAYER_ENDED event, function loads next video with this load method:

enter code here`enter code here`player.load([{source: 'video_url_exmpl'}], null, true);

But when event was triggered and the new video loaded player cancels Fullscreen mode. I set up option:

exitFullscreenOnEnd: false,

I write a plugin that supposes to toggle fullscreen but browser throw a warning message:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

Here is my Clappr player initialization and settings:

 player = new Clappr.Player({
        source: sourceUrl,
        parentId: "#player",
        autoPlay: true,
        width: '100%',
        height: '100%',
        exitFullscreenOnEnd: false,
        playInline: true,
        recycleVideo: Clappr.Browser.isMobile,
        poster: '',
    }).on(Clappr.Events.PLAYER_ENDED, function() {
           player.load([{source: 'video_url'}], null, true);
          }
    });

Solution

  • Found the temporary solution on official Clappr GitHub Issues. Thanks to kslimani.

    var player = new Clappr.Player({
      parentId: "#player-wrapper",
      source: 'http://clappr.io/highline.mp4',
      height: 360,
      width: 640,
      exitFullscreenOnEnd: false,
      playback: {
        playInline: true,
        recycleVideo: true,
      },
      events: {
        onEnded: function () {
          var setSource = function (newSrc) {
            this.core.options.source = newSrc;
            var container = this.core.getCurrentContainer();
            var playback = this.core.getCurrentPlayback();
            if (container) {
              container.options.source = newSrc;
            }
            if (playback) {
              playback.options.source = newSrc;
              playback._setupSrc && playback._setupSrc(newSrc);
            }
          }.bind(this);
    
          // Set another .mp4 source and start again player
          setSource('https://static.playmedia-cdn.net/resources/sample/h264_sintel_trailer-1080p.mp4');
          this.play();
        }
      }
    });
    

    Please note this code is an ugly trick which may let some player components (like plugins) in an inconsistent state. This work only if source are in same format (ie: all source are .mp4 files). But should give you some hints to where to start to dig. Link on Clappr GitHub threat