How to rewind/replay a video

Help & Support
1

I have two buttons the first is a play/pause button I use a button Click Element “fire” script to start and pause the video. How can I have a second button replay the video (start playing from the beginning) no matter if it is currently playing or paused.

This is the video texture script I use with the button “fire” to play/pause the video. How can I modify this script to work with a second button to start playing the video from the beginning?

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

Thanks

2

You need to add a new listener to your code in the .postInitialize section of your videotextureBtn.js script.

You must build the functionality that you want using the HTML5 audio/video methods that you can find here: https://www.w3schools.com/tags/ref_av_dom.asp

Those methods do not include a rewind or replay function. But there is a currentTime property that lets us set the current time for the video that has been loaded. So I used that to set the time to “0” which is the start time of the video. Note that you could set it to some other time if you didn’t want to re-start the video from the exact beginning - for instance after a fade up from black.

The currentTime property only resets the time for the video. If the video is currently playing, it will move the video back to the time you set and then continue to play. If the video is not playing, it will move the video to the specified current time and be paused (not playing). I’ve added a remarked out pause() function as part of the example.

Once you’ve created this new listener, you will have to update your button to call video:re-start or whatever you might choose to call your new listener.

 // 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);
//This is the new listener. I named it "re-start"
    this.app.on('video:re-start', function () {
        this.videoDom.currentTime = 0.0;
        //this.videoDom.pause();
    }, this);


...