html 5 replay video code example

Example: 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();
    }
};