html5 video replay button
var VideotextureBtn = pc.createScript('videotextureBtn');
VideotextureBtn.attributes.add('materials', {
type: 'asset',
assetType: 'material',
array: true
});
VideotextureBtn.attributes.add('video', {
type: 'asset'
});
// initialize code called once per entity
VideotextureBtn.prototype.initialize = function() {
var app = this.app;
// Create a texture to hold the video frame data
var videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R5_G6_B5,
autoMipmap: false
});
videoTexture.minFilter = pc.FILTER_LINEAR;
videoTexture.magFilter = pc.FILTER_LINEAR;
videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
// Create HTML Video Element to play the video
var video = document.createElement('video');
video.addEventListener('canplay', function (e) {
videoTexture.setSource(video);
});
video.src = this.video.getFileUrl();
video.crossOrigin = 'anonymous';
video.loop = true;
//video.paused = true;
video.muted = true; // This line allows video to play without prior interaction from the user
video.play();
// Get the material that we want to play the video on and assign the new video
// texture to it.
for (var i = 0; i < this.materials.length; i++) {
var material = this.materials[i].resource;
material.emissiveMap = videoTexture;
material.update();
}
this.videoTexture = videoTexture;
this.videoDom = video;
this.upload = true;
};
VideotextureBtn.prototype.postInitialize = function() {
this.app.fire('video:playing');
this.videoDom.pause();
this.app.fire('video:paused');
// Add pause/play controls event listeners
this.app.on('video:play-pause-toggle', function () {
if (this.videoDom.paused) {
this.videoDom.play();
this.app.fire('video:playing');
} else {
this.videoDom.pause();
this.app.fire('video:paused');
}
}, this);
};
// update code called every frame
VideotextureBtn.prototype.update = function(dt) {
// Upload the video data to the texture every other frame
this.upload = !this.upload;
if (this.upload) {
this.videoTexture.upload();
}
};