JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://pixijs.download/v6.0.1/pixi.min.js"></script>
<div class="title">
  <div>HTML</div>
  <div>PIXI</div>
</div>


<div class="parent-wrapper">
<div class="parent">
  <div class="backdrop"></div>

<video id="player" controls>
    <source src="https://s3.ap-south-1.amazonaws.com/invideo-block-assets/social_widgits/Twitter/eg2/twitter.webm" type="video/webm">
  
  </video>

  <img src="https://s3.ap-south-1.amazonaws.com/invideo-images/asset_snapshot_1540565522430.png" id="player"/>
</div>
</div>

CSS

body {
  margin: 0;
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;
  padding-top: 20px;
  background: red;
  font-family: sans-serif;
}

.parent {
  width: 400px;
  height: 200px;
  position: relative;

}

.backdrop {
  width: 100%;
  height: 100%;
  border: 1px dotted black;
    background: white;
}

#player {
  position: absolute;
 
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1005;
}

.title{
  display: flex;
  justify-content: space-evenly;
  font-size: 30px;
  font-weight: 600;
}

.parent-wrapper {
  display: flex;
  justify-content: space-evenly;
}

JavaScript

let logCount = 0;
PIXI.resources.BaseImageResource.prototype.upload = function(renderer, baseTexture, glTexture, source) {
  const gl = renderer.gl;
  const width = baseTexture.realWidth;
  const height = baseTexture.realHeight;
  source = source || this.source;
 
  // add this line, check for video
  const isVideo = !!source.videoWidth
	if(!isVideo){
  	  gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, baseTexture.alphaMode === PIXI.ALPHA_MODES.UNPACK);
  }else{
  		if(logCount++ === 10){
      console.log(baseTexture);
      }	
     gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
  }
  if (!isVideo && baseTexture.target === gl.TEXTURE_2D && glTexture.width === width && glTexture.height === height)
  {
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, baseTexture.format, baseTexture.type, source);
  }
  else
  {
    glTexture.width = width;
    glTexture.height = height;
    gl.texImage2D(baseTexture.target, 0, baseTexture.format, baseTexture.format, baseTexture.type, source);

  }
  return true
}

const app = new PIXI.Application({
  width: 200,
  height: 100,
  backgroundColor: 0x000000,
  antialias: true,
  resolution: window.devicePixelRatio || 1,
})

document.getElementsByClassName("parent-wrapper")[0].appendChild(app.view);

const video = true;

var sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
/* sprite.x = 60; */
sprite.y = 0;
sprite.width = 200;
sprite.height = 200;
app.stage.addChild(sprite);

const img = new PIXI.Sprite.from("https://s3.ap-south-1.amazonaws.com/invideo-images/asset_snapshot_1540565522430.png");

const catUrl = 'https://s3.ap-south-1.amazonaws.com/invideo-images/1613034890285_1613034890447.png';

img.width = 200;
img.height = 100;

// create a video texture from a path
var texture = PIXI.Texture.from('https://s3.ap-south-1.amazonaws.com/invideo-block-assets/social_widgits/Twitter/eg2/twitter.webm');
/* 
var texture = PIXI.Texture.from("https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/Lines1591805687962.webm");...