[SOLVED] No sound when playing video in iOS Safari

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/

Hey @pekarnik,

Take a look at this thread: Sounds on iOS not playing . It may be the same issue.

Hi, Leonidas!
I have an user input in my game, video start playing after touch event, but audio doesn’t play, anyway=(

Do you have a sample project that I can take a look at?

sorry, its a commercial project, i try to do the same with other video tommorow

2 Likes

Hi! I fixed a problem. I convert a video from mp4 with mp3 to mp4 with aac and it’s work fine now

4 Likes

Good to know! I wonder if it’s a licensing issue for iOS :thinking: