Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Riddhi-Thanki opened this issue Nov 7, 2022 · 15 comments
Open

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

Riddhi-Thanki opened this issue Nov 7, 2022 · 15 comments

Comments

@Riddhi-Thanki
Copy link

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
Copy link
Contributor

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

@andreasplesch
Copy link
Contributor

Please feel free to reopen as appropriate.

@Riddhi-Thanki
Copy link
Author

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
Copy link
Contributor

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).

@andreasplesch andreasplesch reopened this Dec 16, 2022
@brutzman
Copy link

brutzman commented Dec 17, 2022 via email

@Riddhi-Thanki
Copy link
Author

@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
Copy link
Author

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

@andreasplesch
Copy link
Contributor

andreasplesch commented Jan 13, 2023 •
edited

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
Copy link
Author

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
Copy link
Contributor

andreasplesch commented Jan 15, 2023 •
edited

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
Copy link
Author

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
Copy link
Contributor

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 ?

  1. 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
Copy link
Author

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
Copy link
Contributor

andreasplesch commented Feb 17, 2023 •
edited

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
Copy link
Contributor

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

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

@andreasplesch andreasplesch changed the title The video(mp4) specified in MovieTexture tag URL attribute is not rendering in mobile browser The video(mp4) specified in MovieTexture tag URL attribute is not rendering in mobile browser (IOS) Feb 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andreasplesch @brutzman @Riddhi-Thanki