PIXI Boilerplate

by adil_invideo

HTML

<script src="https://pixijs.download/v6.1.1/pixi.js"></script>
<button id="play">
PLAY/PAUSE
</button>
<input id="slider" type="range" min=0 max=2 step="0.01" value="0" />

CSS

input#slider {
  width: 50%;
}

canvas{
   width: 100%;
   height: 200px;
}

JavaScript

const url = 'https://s3.ap-south-1.amazonaws.com/invideo-uploads-ap-south-1/artist1628503810812.webm';
const url2 = 'https://d1c7ic18uy0m4b.cloudfront.net/previews-480/artist1628503810812.webm';

const app = new PIXI.Application({
  width: document.body.clientWidth,
  height: 200,
  backgroundColor: 0xAAAAAA,
  antialias: true,
  resolution: 1
});

document.body.appendChild(app.view);

const v = (function makeHTMLVideoElement() {
  const div = document.createElement('div');
  document.body.appendChild(div);
  div.style.position = 'relative';

  const v = document.createElement('video');
  div.appendChild(v);

  v.src = url2;
  v.height = 200;
  v.play();

  const text = document.createElement('div');
  text.innerText = 'HTMLVideoElement';
  div.appendChild(text);
  text.style.position = 'absolute';
  text.style.top = `10px`;
  text.style.left = `10px`;
  text.style.fontFamily = 'Arial';
  text.style.fontSize = '18px';
  return v;
})();

function makeSprite(url) {
  var texture = PIXI.Texture.from(url);
  const sprite = new PIXI.Sprite(texture);
  sprite.width = 300;
  sprite.height = 200;
  return sprite;
}

function makeText(text) {
  let txt = new PIXI.Text(text, {
    fontFamily: 'Arial',
    fontSize: 18,
  });
  txt.x = 10;
  txt.y = 10;
  return txt;
}

const sprite1 = makeSprite(url);
const sprite2 = makeSprite(url2);
const container1 = new PIXI.Container();
const container2 = new PIXI.Container();
container1.addChild(sprite1);
container2.addChild(sprite2);
app.stage.addChild(container1);
app.stage.addChild(container2);

container1.addChild(makeText('Original URL'))
container2.addChild(makeText('480 URL'))

container2.x = 300;

const player1 = sprite1.texture.baseTexture.resource.source;
const player2 = sprite2.texture.baseTexture.resource.source;

let isPlaying = v.isPlaying;
document.getElementById('play').onclick = () => {
  if (!isPlaying) {
    player1.play();
    player2.play();
    v.play();
  } else {
    player1.pause();
    player2.pause();
   ...