Basically i’m trying to do a videoplayer component similar to unity. It would be really helpful if i could play a video with the audio source of my choice. This is my code and i’m trying to play a video mute it’s audio and play my own source but i can’t seem to find anything about my problem.
Thanks in advance
var Videotexture = pc.createScript('videotexture');
Videotexture.attributes.add('materials', {
type: 'asset',
assetType: 'material',
array: true
});
Videotexture.attributes.add('videoAsset', {
type: 'asset',
assetType: 'audio',
});
//Video Controls declaration
Videotexture.attributes.add('PlayfromURL', {type: 'string'});
Videotexture.attributes.add('playfromURL_Button',{ type:'entity'});
Videotexture.attributes.add('playFromFileButton',{ type:'entity'});
Videotexture.attributes.add('ResumeButton',{type: 'entity' });
Videotexture.attributes.add('pauseButton',{type: 'entity' });
Videotexture.attributes.add('skipForwardButton',{type: 'entity'});
Videotexture.attributes.add('skipBackwardButton',{type: 'entity'});
Videotexture.attributes.add('loopEnableButton',{type: 'entity'});
Videotexture.attributes.add('loopDisableButton',{type: 'entity'});
Videotexture.attributes.add('muteOnButton', {type: 'entity'});
Videotexture.attributes.add('muteOffButton', {type: 'entity'});
//Videotexture.attributes.add('setCameraNearPlane',{type: 'entity'});
Videotexture.attributes.add('frameSkipFactor',{type:'number'});
Videotexture.attributes.add('PlayVideoFullScreen', {type: 'entity' });
//Audio
Videotexture.attributes.add('SoundAsset', {type:'asset' , typeAsset: 'audio'});
Videotexture.attributes.add('PlayAudioOnly', {type: 'entity'});
Videotexture.attributes.add('PlayfromDirect', {type: 'entity'});
// initialize code called once per entity
//
Videotexture.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);
});
// This is how to get the full URL path to the asset.
video.src = this.videoAsset.getFileUrl();
//video.src = "https://s3-eu-west-1.amazonaws.com/static.playcanvas.com/video/playcanvas-web-small.mp4";
video.crossOrigin = 'anonymous';
video.loop = true;
// 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;
//play video file on click method
//this.app.mouse.once(pc.EVENT_MOUSEDOWN, function () { video.play(); }, this);
this.playFromFileButton.button.on('click', function(event) {
this.app.root.findByName('Plane').enabled=true;
//video.src =this.videoAsset.getFileUrl();
video.play();
//video.controls = true; apply video controls for the player
}, this);
this.upload = true;
//pause button method
this.pauseButton.button.on('click', function(event) {
video.pause();
}, this);
this.upload = false;
//resume button
//
this.ResumeButton.button.on('click', function(event) {
video.play();
}, this);
this.upload = true;
//skip forward button method
this.skipForwardButton.button.on('click', function(event) {
video.currentTime +=this.frameSkipFactor;
console.log('hits here');
//seconds += this.frameSkipFactor;
console.log(video.currentTime);
},this);
//skip back button method
this.skipBackwardButton.button.on('click', function(event) {
video.currentTime -=this.frameSkipFactor;
},this);
//loop enable
this.loopEnableButton.button.on('click', function(event){
video.loop=true;
},this);
//loop disable
this.loopDisableButton.button.on('click', function(event){
video.loop=false;
},this);
//mute on
this.muteOnButton.button.on('click', function(event){
video.volume=0;
},this);
//mute off
this.muteOffButton.button.on('click', function(event){
video.volume=1;
},this);
//play from url method
this.playfromURL_Button.button.on('click', function(event) {
this.app.root.findByName('Plane').enabled=true;
//this.root.model.enabled=true;
video.src = this.PlayfromURL;
video.play();
},this);
this.upload=true;
//sound source
//Audio Source
this.PlayAudioOnly.button.on('click', function(event) {
video.play();
video.volume=0;
this.entity.sound.slot('Slot 1').play();
this.entity.sound.volume=1;
console.log('sound play');
},this);
};
// update code called every frame
Videotexture.prototype.update = function(dt) {
// Upload the video data to the texture every other frame
this.upload = !this.upload;
if (this.upload) {
this.videoTexture.upload();
}
//if(app.keyboard.wasPressed(pc.KEY_END))
//{
// this.entity.sound.stop();
// }
};