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/
