Экран загрузки для файла HTML5, созданного с помощью Flash CC 2015

Question

Мне просто любопытно, возможно ли создать загрузочный экран для файла html5, который был создан ранее с помощью Flash CC HTML5? Если это возможно (и я надеюсь, что это так), как я могу это сделать, или, может быть, вы можете показать мне ссылки для этого (я читал о preloadJS раньше, но никогда не использовал его)? спасибо за ваш ответ, и я извиняюсь за мой плохой английский.

Answer 1

У меня есть кодовая ручка с примером того, как использовать PreloadJS, который должен помочь вам начать:

http://codepen.io/Visualife/pen/RWrmbp

HTML

<div id="progress">...</div>
<div id="progressbar">
  <div class="bar"></div>
</div>
<div id="loadStatus"></div>

JAVASCRIPT

var queue        = new createjs.LoadQueue();
var $status      = $('#loadStatus');
var $progress    = $('#progress');
var $progressbar = $('#progressbar .bar');

queue.on('fileload',     onFileLoad);
queue.on('progress',     onProgress);
queue.on('fileprogress', onFileProgress);
queue.on('error',        onError);
queue.on('complete',     onComplete);

queue.loadManifest([
  {
    id: '1',
    src: 'https://dl.dropboxusercontent.com/u/8304842/cli_iuvo/diacore/20150614_diacore-800x450-test1.mp4'
  }
]);

function onFileLoad(event) {
  $status.text('LOAD: '+ event.item.id);
}
function onFileProgress(event) {
  $status.text('file progress');

  var progress = Math.round(event.loaded * 100);
  $progress.text(progress +'%');
  $progressbar.css({'width': progress +'%'});
}
function onProgress(event) {
  $status.text('progress');

  var progress = Math.round(event.loaded * 100);

  $progress.text(progress + '%');
  $progressbar.css({
    'width': progress + '%'
  });
}
function onError(event) {
  $status.text('ERROR: ' + event.text);
}
function onComplete(event) {
  $status.text('COMPLETE');
  $progressbar.addClass('complete');
}

CSS

html, body {
  background-color: #000;
  color: white;
}

#loadStatus {
  position: absolute;
  top: 55%;
  left: 50%;
  color: #fff;
  font-family: Arial;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}

#progress {
  position: absolute;
  width: 200px;
  top: 35%;
  left: 50%;
  margin: -25px 0 0 -100px;
  text-align: center;
  font-size: 6em;
}

#progressbar {
  left: 10%;
  position: absolute;
  text-align: center;
  top: 55%;
  right: 10%;
}
#progressbar .bar {
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  background-color: red;
  height: 20px;
  display: inline-block;
  width: 0%;
}
#progressbar .complete {
  background-color: green;
}