The video(mp4) specified in MovieTexture tag URL attribute is not rendering in mobile browser (IOS)

[Riddhi-Thanki]

I am using the MovieTexture tag to render an mp4 video. The video is rendered on desktop browsers (chrome, safari, firefox) but it does not render on the mobile versions of chrome and safari. However, the video is rendered when I use Firefox.

The Browser versions that I am using for mobile are as follows:

Chrome: 107.0.5304.91 Safari: 16.2 Firefox: 106.1.0

[andreasplesch]

Thanks. Does the same mp4 video render when you open it directly, without x3dom ?

[andreasplesch]

Please feel free to reopen as appropriate.

[Riddhi-Thanki]

Hi, I am reopening the issue since the video file is working without the x3dom.

I tried compressing, changing the codec, and changing the file format to make it work with the MovieTexture tag.

After encoding the video, the following is happening

Video without x3dom

1. Works on Windows: Chrome(108), Edge(108) and Firefox(107)
2. Works on Android: Chrome(108) and Firefox(107)
3. Works on macOS: Chrome(108) and Safari(16.1)
4. Works on IOS: Chrome(108) and Safari(16.2)

Video with x3dom

1. Works on Windows Chrome(108), Edge(108) and Firefox(107)

2. Works on Android Chrome(107) and Firefox(107)

3. Does not work with MacOs Safari(16.1) and Chrome(108) (The play/pause button works, I can hear the audio but the video does not play. It shows a black screen with just the audio)

4. Does not work with IOS safari(16.2) and Chrome(108).

You can find all the videos that I tried using on this page HERE. The last video with "Start Watching" is the x3d scene.

[andreasplesch]

Thanks for sharing. As another data point I can report Chrome Version 107.0.5304.87 on Linux working well.

Are there messages in the Chrome/Safari Devtools console for MacOs ? For IOS perhaps there is a texture (device) limit. Sometimes rescaling the video to power of two sizes helps (start with 256x256 for testing).

[brutzman]

Thanks for posting an important (and often mysterious) problem.

I've been looking for an online tool to support author checking of image or movie file integrity. So far not finding anything server based, to support cross-platform use. Best info so far:

* https://photo.stackexchange.com/questions/46919/is-there-a-tool-to-check-the -file-integrity-of-a-series-of-images

* https://superuser.com/questions/100288/how-can-i-check-the-integrity-of-a-vi deo-file-avi-mpeg-mp4

all the best, Don

--

Don Brutzman Naval Postgraduate School, Code USW/Br @.***

Watkins 270, MOVES Institute, Monterey CA 93943-5000 USA +1.831.656.2149

X3D graphics, virtual worlds, Navy robotics https:// faculty.nps.edu/brutzman

From: Riddhi-Thanki @.> Sent: Thursday, December 15, 2022 8:16 PM To: x3dom/x3dom @.> Cc: Subscribed @.***> Subject: Re: [x3dom/x3dom] The video(mp4) specified in MovieTexture tag URL attribute is not rendering in mobile browser (Issue #1236)

Hi, I am reopening the issue since the video file is working without the x3dom.

I tried compressing, changing the codec, and changing the file format to make it work with the MovieTexture tag.

After encoding the video, the following is happening

Video without x3dom

1. Works on Windows: Chrome(108), Edge(108) and Firefox(107)
2. Works on Android: Chrome(108) and Firefox(107)
3. Works on macOS: Chrome(108) and Safari(16.1)
4. Works on IOS: Chrome(108) and Safari(16.2)

Video with x3dom

1. Works on Windows Chrome(108), Edge(108) and Firefox(107)
2. Works on Android Chrome(107) and Firefox(107)
3. Does not work with MacOs Safari(16.1) and Chrome(108) (The play/pause button works, I can hear the audio but the video does not play. It shows a black screen with just the audio)
4. Does not work with IOS safari(16.2) and Chrome(108).

You can find all the videos that I tried using on this page HERE https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fmetagrid2 .sv.vt.edu%2F~parthranawat%2FTest%2FTest_X3DOM%2F&data=05%7C01%7Cbrutzman%40 nps.edu%7C2e287601982a4fc18cc608dadf1c30b3%7C6d936231a51740ea9199f7578963378 e%7C0%7C0%7C638067609422694433%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=UoRXi1CX mmZwnbVR71UH9UUuCoG8FT2cIMLWz68PY7w%3D&reserved=0 . The last video with "Start Watching" is the x3d scene.

- Reply to this email directly, view it on GitHub https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.co m%2Fx3dom%2Fx3dom%2Fissues%2F1236%23issuecomment-1354174937&data=05%7C01%7Cb rutzman%40nps.edu%7C2e287601982a4fc18cc608dadf1c30b3%7C6d936231a51740ea9199f 7578963378e%7C0%7C0%7C638067609422694433%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4 wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdat a=pLdAepubG4OVB8Ia%2BRJWbEikI7THFaRisimj0h0NgKw%3D&reserved=0 , or unsubscribe https://nam10.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.co m%2Fnotifications%2Funsubscribe-auth%2FAB23BYBLQBPLDL2AJBKLRXTWNPUGVANCNFSM6 AAAAAARYYWQZ4&data=05%7C01%7Cbrutzman%40nps.edu%7C2e287601982a4fc18cc608dadf 1c30b3%7C6d936231a51740ea9199f7578963378e%7C0%7C0%7C638067609422694433%7CUnk nown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXV CI6Mn0%3D%7C3000%7C%7C%7C&sdata=ZecUwku4qWnUybm2P1q4x%2FtaFYi6nwvWmv6Ul0Mk9Q o%3D&reserved=0 . You are receiving this because you are subscribed to this thread. https://github.com/notifications/beacon/AB23BYCZVZW2RFQJUSGHFBTWNPUGVA5CNFS M6AAAAAARYYWQZ6WGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTS QW4I5S.gif Message ID: @. @.> >

[Riddhi-Thanki]

@andreasplesch Thanks for testing it out on Linux. On macOS Devtools, there are no errors or warnings. For IOS, I tried rescaling but the issue persists.

@brutzman Thanks for sharing the links. I will try checking the integrity.

[Riddhi-Thanki]

I tried rescaling the video but nothing seems to be working for IOS.

[andreasplesch]

I cannot test on MacOS or IOS. For further debugging, try to show the MovieTexture children with:

<MovieTexture hidechildren="false" url=" &quot;../Videos/Triplepoint4.mp4&quot;" loop="true" ></MovieTexture>

This may append the generated video element to the DOM. Find that video element and make it visible with css (visibility and style) in devtools. Then play the movie and see if there are any changes.

You could also try the x3dom feature of using a child element as a texture, in the x3d:

<texture hideChildren="false">
  <video>...</video>
 </texture>

Ah, I also noticed that you use an older x3dom.js, from 2020. Try the latest dev. It has some changes with regards to videos.

[Riddhi-Thanki]

I tried using the latest dev x3dom.js. Using this I am able to see the video on IOS. But, other functionalities stopped working on all the devices(IOS, Android, Mac, Windows). Now the new issues are:

1. I am getting a black screen until user interacts with the page.
2. My play/pause functionality also stopped working. In the previous x3dom.js version there was a video tag that was generated at the run time and I was adding play pause attribute to it at the run time. With the new version of x3dom.js I cannot see any video tag being generated at runtime. I tried using the startTime and pauseTime attribute of MovieTexture but I am confused as to what values should be passed to them.
3. The mobile button enables the gyroscope and the user can move in the environment. This has stopped working too.

You can check the site HERE.

[andreasplesch]

Seems like progress. I think the difference between the latest x3dom version and the earlier version for video is that the latest does not set the video style to

_video.style.display = "none";
_video.style.visibility = "hidden";

which apparently helps with IOS. But that means the video element should not be appended to the dom.

So if you want to stay with the earlier version, you could set the style of the video element to visible and check if that works on IOS. However, this will show the video on the web page. It should be possible to change the size of it to 0, or hide it some other way with css styling, perhaps positioning under the x3dom canvas or something.

If you want to stay with the latest version, you can still access the created video element with something like:

        <inline url="./Spheres/TriplePoint.x3d" namespacename='x3d'></inline>

to attach the Inline x3d to the inline element and then get the video element with

inlineElement.querySelector('MovieTexture')._x3domNode._video

=>

<video preload=​"auto" muted=​"muted" autoplay playsinline crossorigin=​"anonymous">​…​</video>​

With regards to user interaction, not sure what changed. Sometimes Chrome seems to remember that there has been user interaction previously on the same page.

With regards to the gyroscope, are there browser errors ? I could test on Android but did not see deviceorientation effects in both versions.

One can use the Sensors tab in devtools to emulate orientation on a laptop. The Accelerometer_i id does not exist, so there is an exception for each orientation event. Commenting out

        //updateFieldIfNotNull('Accelerometer_i', event.interval, 2);

then lets deviceorientation rotate the view (but perhaps it is flipped). Safari does not support deviceorientation or devicemotion.

Hope this helps.

[Riddhi-Thanki]

Hi,

Thanks for the above help. Things seems to be working now, partially for IOS and Mac!

1. On Mac, I am able to hear the audio but with the black screen.

2. On IOS, I am able to see the video but audio doesn't play when I embed the video on x3d sphere. But audio seems to work perfectly when I am using simple video tag without x3d. I even tried checking the muted attribute in the browser and it is set to false. Is there any audio engine that x3d uses because of which it is causing this issue?

[andreasplesch]

Hi,

Thanks for the above help. Things seems to be working now, partially for IOS and Mac!

1. On Mac, I am able to hear the audio but with the black screen.

Any console errors ?

2. On IOS, I am able to see the video but audio doesn't play when I embed the video on x3d sphere. But audio seems to work perfectly when I am using simple video tag without x3d. I even tried checking the muted attribute in the browser and it is set to false. Is there any audio engine that x3d uses because of which it is causing this issue?

x3d only uses the video tag, nothing else.

[Riddhi-Thanki]

No, there are no console errors.

I used the 13 jan dev build of x3dom and this made my videos visible on the IOS device. But with the latest Feb 13 build it again stopped working. I was using the url https://x3dom.org/download/dev/x3dom.js. Is there a way I can get the 13th Jan version?

[andreasplesch]

Hm, Texture.js where the video tag is set up and played was not affected.

An easy way to build x3dom without installing anything is to use gitpod.io, free . Fork x3dom and try it. It is fun.

Here is a build from Jan., 29th .

x3dom.zip

[andreasplesch]

Another option is to use Github codespaces for quickly building. Here is a quick guide:

https://github.com/x3dom/x3dom/wiki/Online-Build-Instructions