Not sound in a mp4 file into webGL/ three.js project

Questions
,
1

Hi
Sorry for my ignorance but I am starting with the three,js projects.
Since I added a Video loop in mp4 ( without sound) in my three.js project and it worked fine but after that I added one sound to this mp4 file and now I can see the Video Loop but not can hear its sound, for it, Coul anybody help me to fix it? Thanks for your time
Best Regards
Castana

2

As mentioned at github, you might be faced with the autoplay policy of modern browsers. That means at least with Chrome, you can’t automatically play a video with sound. More information here:

You can easily solve this issue by forcing a user interaction before you start to playback the video. Check out the following example to see this approach in action:

https://threejs.org/examples/webgl_materials_video

2 Likes
3

Hi again Mugen87
First, thanks for your help.
On the other other hand and like I am new in this topic. I was seeing the code example that you sent me but I only to would need add the user interaction to start to playback the video( Click to Play button) and the mp4 file with sound, for it Could you advice me about the part of code to do it?
Thanks
Castana

4

Well, the relevant part of the example is:

var startButton = document.getElementById( 'startButton' );
startButton.addEventListener( 'click', function () {

    init();
    animate();

}, false );

The init() function usually contains all the code that is necessary for the scene’s setup. You can put the code that creates your video right there.

1 Like
5

@Mugen87’s suggestion is good, but you may want to do a lot of initialization unconditionally to reduce the user’s waiting time after clicking play. Also, I advice you to, if possible, hide the triggering interaction in other interactions. :wink: (Like: “Don’t shoot this TV!” :crazy_face: )

6

Ahh. Ok. I got this example here https://www.creativebloq.com/how-to/create-a-webgl-3d-landing-page . Sorry but I tried to add all the code but the format is not put here sucessfully
Thanks for your help
Castana

7

Hi EliasHasle
First, thanks for your advice
On the other hand and sorry but I am starting with this topic, for it, Could you let me get any code example about what you told me?
Best Regards
Castana

8

No, not really. @Mugen87’s suggestion is a good start. If you cannot make it work, you will need to share more of the relevant context for anyone to be able to help with your specific problem.

9

ok. Thanks for your help !!!
Best Regards

1 Like