clappr: clappr with flashls playback does not start to play from js

Browser: IE 11.0.9600.17105 OS: Windows 7 Clappr Version: cdn.clappr.io

Steps to reproduce:

Run this code on cdn.clappr.io:

var playerElement = document.getElementById("player-wrapper");

var player = new Clappr.Player({
  baseUrl: '/latest',
  poster: 'http://clappr.io/poster.png',
  height: 360,
  width: 640,
  audioOnly: true,
  flushLiveURLCache: true,
  hlsjsConfig: {
    xhrSetup: function(xhr, url) {
      xhr.withCredentials = true;
    }
    },
  playbackConfig: {
    crossorigin: 'use-credentials'
  }
});

player.attachTo(playerElement);
player.load({source: 'http://hls.02.ep.emgsound.ru/11/playlist.m3u8', mimeType: 'application/x-mpegURL'});
player.play();

Expected start playing but it’s not. I also noticed that if I enable always request from server option in developer network console then everything start playing because of 200 responses. But without this option with default browser cache enabled player stopped with 304 reponse on http://cdn.clappr.io/latest/809981e5b09d5336c45d72d0869ada2a.swf?inline=1

This link is playing well after click on “Load”.

With regards, Andrey.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 41 (14 by maintainers)

Most upvoted comments

@waster there’s no problem with calling load() and play() on click events. The problem is that load() is an asynchronous operation, and if autoPlay is not set, calling play will only work when the player is ready. This event actually means that the playback was already configured and is ready to receive commands, like play.

If you are reusing the player, you have to be aware of this behavior. The snippet you posted is ok, but you should be aware that if you call load, the play click handler will only work when the player is ready.

Usually on Clappr the load times are very quick, lower than 100 ms, so you shouldn’t worry about that, because it’s unlikely that the user clicks the play button within this interval. Obviously this interval depends on how long the player will take to load its components and download other files like swf modules, etc. Just be aware of that when enabling/disabling the click handler and you should be ok.

A safer approach to your setup would be something like that:

var player = new Clappr.Player({
  // ...
  events: {
    onReady: setupClickEvents
  }
});
var setupClickEvents = function() {
  $('td.controls button.play').click(function(event) {
    var playback = player.core.getCurrentPlayback()
    if (playback.isReady) {
      player.play()
    } else {
      playback.once(Clappr.Events.PLAYBACK_READY, function() {player.play() })
    }
  });
// ...
}

This way whenever an interaction occurs, it will either call play() immediately (if the player is ready) or wait for the playback to become ready.

We are reviewing the player states to be clearer regarding to how the player works when its methods are called.

towerz on Aug 7, 2016

Closed, new https://github.com/clappr/clappr/issues/1414 opened.

waster on May 19, 2017

@towerz, @leandromoreira can you please check that issue again? I guess it seems to work by destroying and recreating player after each start/stop, but in our case it can not be used because we have VAST plugin and need to load original src and play again after VAST preroll. We’re also tried to investigate this issue but it’s hard to debug because flashls playback works well with IE developer tools opened. Also I noticed that playback is not working if swf request (for flash playback) returns 304 cached response, can it be related?

waster on Apr 12, 2017