VideoTexture Not Playing On Safari iOS

Bugs
1

Hi,
I am trying to play a Video Texture from a URL, it works in all the browsers(Edge,Mozilla,Chrome) except for safari in iOS.

Below is an example of a playground for playing video Texture through files.

https://www.babylonjs-playground.com/#ZMCFYA#2

“var ANote0VideoVidTex = new BABYLON.VideoTexture(“vidtex”,“textures/babylonjs.mp4”, scene);”

This line takes the video from the files. In order to play it from URL,need to change this(“textures/babylonjs.mp4”) to a URL

(“https://player.vimeo.com/external/468244032.hd.mp4?s=e253aa060ee13a4fa1d6b2d03ace310b1bbb2d52&profile_id=174”)

The above is the URL of the video i am trying to Play.

Please help me find a solution for this.

Thank you.

2

Hello and welcome!

@sebavan did a fix for it I guess

Can you make sure to be on latest 4.2.0 Release candidate?

3

Hi @Deltakosh can you please provide a link or something for the fix?

4

https://playground.babylonjs.com/#CHQ4T#120

this works for me on ios could you repro your issue in the Playground ?

5

Hi @sebavan
In the Playground u have posted above…Can u try changing the below line with the line i have mentioned after it?

This Line :-
var videoTexture = new BABYLON.VideoTexture(“video”, [“textures/babylonjs.mp4”, “textures/babylonjs.webm”], scene, true, false);

To This Line :-
var videoTexture = new BABYLON.VideoTexture(“video”, [“https://player.vimeo.com/external/468244032.hd.mp4?s=e253aa060ee13a4fa1d6b2d03ace310b1bbb2d52&profile_id=174”], scene, true, false);

For me when i replace the line…it works in the other Browsers, it doesn’t work in SAFARI

6

This is because of more restrictive security policies on Safari. You should try downloading the video and hosting it aside your code, you ll see that it is all ok.

7

On the same topic. I have a video on s3 bucket or even on a ftp server. When I put the url to that it doesn’t play.
This is my video url : https://videotest-joji.s3-eu-west-1.amazonaws.com/video.mp4
Any thoughts?

8

You will need to enable CORS on your s3 bucket. Either for all remotes or specifically for the playground (or any other URL you might be loading the video from).

This might help - Using cross-origin resource sharing (CORS) - Amazon Simple Storage Service

9

Ok thanks I shall try that out.