asciinema.org/app/views/asciicasts/_player.html.erb

<div class="player"></div>

<p class="processing-info" style="display: none">
  This recording is being pre-processed at the moment. It will open automatically in a few seconds.
</p>

<script>
  $(function() {
    var model = new Asciinema.Asciicast(<%= asciicast.to_json.gsub('</', '<\/').html_safe %>);

    function createPlayer() {
      var source = new asciinema.HttpArraySource(model.get('stdout_frames_url'), <%= options.speed %>);
      var snapshot = model.get('snapshot');
      var movie = new asciinema.Movie(model.get('width'), model.get('height'), source, snapshot, model.get('duration'));

      React.renderComponent(
        asciinema.Player({
          fontSize: '<%= options.size %>',
          autoPlay: <%= options.autoplay %>,
          loop: <%= options.loop %>,
          movie: movie,
          theme: '<%= h options.theme %>',
        }),
        $('.player')[0]
      );
    }

    function tryCreatePlayer() {
      if (model.get('stdout_frames_url')) {
        $('.processing-info').remove();
        createPlayer();
      } else {
        $('.processing-info').show();
        setTimeout(function() {
          model.fetch({ success: tryCreatePlayer });
        }, 2000);
      }
    }

    tryCreatePlayer();
  });
</script>