Hi, i get stuck for a moment trying do make video playing when i press on a button.
The problem is that when i press the button, the video doesn’t start.
Here is the code if you want to take a look at :
var Videotexture = pc.createScript('videotexture');
Videotexture.attributes.add('materials', {
type: 'asset',
assetType: 'material',
array: true
});
Videotexture.attributes.add('videoAsset', {
type: 'asset',
assetType: 'audio',
});
Videotexture.attributes.add('Button', {
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.crossOrigin = 'anonymous';
video.loop = false;
// 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 WORK (not with button)
//this.app.mouse.once(pc.EVENT_MOUSEDOWN, function () { video.play(); }, this);
//THIS DOESN'T WORK
this.Button.script.buttonStartVideo.on('move', function () { video.play(); }, this);
this.upload = true;
};
// 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();
}
};
var ButtonStartVideo = pc.createScript('buttonStartVideo');
// initialize code called once per entity
ButtonStartVideo.prototype.initialize = function() {
var button = this.entity.button;
this.entity.button.on('click', function(event) {
var active = true;
this.fire('activeVideo', active);
}, this);
};
// update code called every frame
ButtonStartVideo.prototype.update = function(dt) {
};
// swap method called for script hot-reloading
// inherit your script state here
// ButtonStartVideo.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// https://developer.playcanvas.com/en/user-manual/scripting/
I see where you are attempting to fire the event on the button, but I would guess you would actually want to fire the event on your Media Player/Video Texture script, but I still don’t see any code there that would actually receive the play event and act on it. Are there any scripts missing from this forum post?
Check out this sample project that has a pretty decent Media Player script:
I try to fire the event from the button script to the Media Player/Video Texture but i guess i done wrong.
I watch you’re script and i’m a little bit confused, did you use more than one to launch the video ?
I try to use you’re Media player who seem great on my project but my button stay desactivated
Part of that could be that the example project is assuming that the file is hosted elsewhere than Playcanvas’s servers. You would want to consider doing this as well to save space on your account. Will will have to make a number of adjustments, but if this doesn’t help, let us know exactly where you’re getting stuck, and I’ll take another look.
I put the button directly on the script and now it’s working as i want so i guess it’s okay now !
Thanks for the help ^^
var Videotexture = pc.createScript('videotexture');
Videotexture.attributes.add('materials', {
type: 'asset',
assetType: 'material',
array: true
});
Videotexture.attributes.add('videoAsset', {
type: 'asset',
assetType: 'audio',
});
Videotexture.attributes.add('Button', {
type: 'entity',
});
Videotexture.attributes.add('mediaPlayer', { 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.crossOrigin = 'anonymous';
video.loop = false;
// 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.app.mouse.once(pc.EVENT_MOUSEDOWN, function () { video.play(); }, this);
if (pc.platform.ios) {
// critical for iOS or the video won't initially play, and will go fullscreen when playing
video.playsInline = true;
}
this.Button.element.on('click', function () {
video.play();
this.Button.enabled = false;
this.mediaPlayer.enabled = true;
}, this);
//this.Button.script.buttonStartVideo.on('move', function () { video.play(); }, this);
this.upload = true;
};
// 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();
}
};
