JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<script src="/node_modules/pixi.js/dist/pixi.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://d157l7jdn8e5sf.cloudfront.net/release/pixi.js"></script>
<script>
var app = new PIXI.Application(960, 540, {
transparent: true
});
document.body.appendChild(app.view);
var button = new PIXI.Graphics()
.beginFill(0x0, 0.5)
.drawRoundedRect(0, 0, 100, 100, 10)
.endFill()
.beginFill(0xffffff)
.moveTo(36, 30)
.lineTo(36, 70)
.lineTo(70, 50);
var piv = 0.6;
var scale = 1;
// Position the button
button.x = (app.renderer.width - button.width) / 2;
button.y = (app.renderer.height - button.height) / 2;
button.interactive = true;
button.buttonMode = true;
app.stage.addChild(button);
button.on('pointertap', onPlayVideo);
function onPlayVideo() {
//texture.baseTexture.source.pause();
// Don't need the button anymore
button.destroy();
var texture = PIXI.Texture.fromVideo('vid2.mp4');
var videoSprite = new PIXI.Sprite(texture);
videoSprite.width = 3840;
videoSprite.height = 2160;
videoSprite.pivot.x = app.renderer.width / piv;
videoSprite.pivot.y = app.renderer.height / piv;
app.stage.addChild(videoSprite);
app.stage.scale.x = scale;
app.stage.scale.y = scale;
const getMousePos = () => app.renderer.plugins.interaction.mouse.global;
let mousePos;
let speed = 2;
let angle;
let xVelo, yVelo;
app.ticker.add(() => {
mousePos = getMousePos();
console.log(mousePos);
let dx = mousePos.x - app.stage.position.x;
let dy = mousePos.y - app.stage.position.y;
angle = Math.atan(dy, dx);
xVelo = Math.cos(angle) * speed;
yVelo = Math.sin(angle) * speed;
mousePos.x += xVelo;
mousePos.y += yVelo;
app.stage.pivot.x =...
CSS
body {
overflow: hidden;
}