Hi, all
Who know how to create some video on TV screen?
Take a look at this tutorial, it does exactly what you are asking:
https://developer.playcanvas.com/en/tutorials/video-textures/
Hi,
I don`t see where js.codes are used in structure of scene,
The texture of screen is empty!?
You can find all the scripts being attached to the Root entity together with the screen’s material.
The texture is being generated by the code in the video-texture.js
1 Like
Is it possible to switch off falling of TV from sky?
You can achieve that by removing the rigidbody components from all entities. That way you will stop physics.
I see only one rigid body in structure for video on TV, or I need to delete all rigidbodies in my scene?
it works!
But why its playing this video so slowly?
is it possible to add sound?
Yes, you can add sound following this example: https://developer.playcanvas.com/en/tutorials/basic-audio/
I would just play back the audio in the mp4 video you’re playing on the TV. No need to use the sound component for that.
1 Like
Hi! I have an video element that i play in playcanvas, all works fine, but sound doesn’t played on ios.
On android all okay. What I am doind wrong?
var PreloadVideo0 = pc.createScript('preloadVideo0');
PreloadVideo0.attributes.add('video', {
title: 'Video',
description: 'MP4 video asset to play back on this video texture.',
type: 'asset'
});
PreloadVideo0.attributes.add('alpha', {
title: 'Alpha',
description: 'MP4 video asset to play back on this video texture.',
type: 'asset'
});
PreloadVideo0.attributes.add('screenMaterial', {
title: 'Screen Material',
description: 'The screen material of the TV that displays the video texture.',
type: 'asset',
assetType: 'material'
});
PreloadVideo0.attributes.add('screenMaterial0', {
title: 'Screen Material0',
description: 'The screen material of the TV that displays the video texture.',
type: 'asset',
assetType: 'material'
});
PreloadVideo0.attributes.add('alphaTest',{
type:'number'
});
// initialize code called once per entity
PreloadVideo0.prototype.initialize = function() {
var app = this.app;
console.log(this.screenMaterial._resources[0]);
// Create HTML Video Element to play the video
var video = document.createElement('video');
video.crossOrigin = 'anonymous';
video.loop = false;
// muted attribute is required for videos to autoplay
// critical for iOS or the video won't initially play, and will go fullscreen when playing
video.playsInline = true;
// set video source
video.src = this.video.getFileUrl();
// iOS video texture playback requires that you add the video to the DOMParser
// with at least 1x1 as the video's dimensions
var style = video.style;
style.width = '1px';
style.height = '1px';
style.position = 'absolute';
style.opacity = '0';
style.zIndex = '-1000';
style.pointerEvents = 'none';
style.visibility = 'visible';
console.log(video.style);
document.body.appendChild(video);
// Create a texture to hold the video frame data
this.videoTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8,
minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
magFilter: pc.FILTER_LINEAR,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE,
mipmaps: false,
autoMipmap: false
});
video.autoplay = true;
video.muted = false;
video.pause();
video.volume = 1;
this.videoTexture.setSource(video);
video.addEventListener('canplay', function (e) {
app.fire('play:tex', this.videoTexture, this.alphaTexture);
}.bind(this));
// video.addEventListener('ended',function(){
// this.app.root.findByName('urlButton').enabled = true;
// var time = window.video.currentTime;
// }.bind(this));
console.log(video);
// Create HTML Video Element to play the video
var alpha = document.createElement('video');
alpha.autoplay = true;
alpha.crossOrigin = 'anonymous';
alpha.loop = false;
// muted attribute is required for alphas to autoplay
// critical for iOS or the alpha won't initially play, and will go fullscreen when playing
alpha.playsInline = true;
// set alpha source
alpha.src = this.alpha.getFileUrl();
// iOS alpha texture playback requires that you add the alpha to the DOMParser
// with at least 1x1 as the alpha's dimensions
var alphaStyle = alpha.style;
alphaStyle.width = '1px';
alphaStyle.height = '1px';
alphaStyle.position = 'absolute';
alphaStyle.opacity = '0';
alphaStyle.zIndex = '-1000';
alphaStyle.pointerEvents = 'none';
document.body.appendChild(alpha);
// Create a texture to hold the alpha frame data
this.alphaTexture = new pc.Texture(app.graphicsDevice, {
format: pc.PIXELFORMAT_R8_G8_B8,
minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
magFilter: pc.FILTER_LINEAR,
addressU: pc.ADDRESS_CLAMP_TO_EDGE,
addressV: pc.ADDRESS_CLAMP_TO_EDGE,
mipmaps: false,
autoMipmap: false
});
video.preload = "auto";
this.alphaTexture.setSource(video);
alpha.addEventListener('canplay', function (e) {
app.fire('play:alpha', this.videoTexture, this.alphaTexture);
}.bind(this));
alpha.autoplay = false;
alpha.preload = "auto";
this.app.on('play:tex', function (videoTexture, alphaTexture) {
var material = this.screenMaterial.resource;
material.emissiveMap = videoTexture;
material.opacityMap = videoTexture;
material.alphaTest = this.alphaTest;
material.update();
}, this);
// this.app.on('play:alpha', function (videoTexture, alphaTexture) {
// var material = this.screenMaterial.resource;
// material.opacityMap = videoTexture;
// material.update();
// }, this);
window.video = video;
window.alpha = alpha;
this.app.on('video:ended',function(){
window.video.pause();
window.alpha.pause();
this.app.off('video:ended');
this.app.root.findByName('urlButton').enabled = true;
}.bind(this));
};
// update code called every frame
PreloadVideo0.prototype.update = function(dt) {
this.videoTexture.upload();
this.alphaTexture.upload();
if(window.video.currentTime>= window.video.duration - 1)
{
this.app.fire('video:ended');
}
};
// swap method called for script hot-reloading
// inherit your script state here
// PreloadVideo0.prototype.swap = function(old) { };
// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/