Making a video player in three.js

Questions
, , ,
1

Hello
I want to make a video player in three.js only playing the 360 degree videos with controls like
1.play/pause button
2.volume
3.vr button -switch to VR mode
4.Full screen button

any one here to help

Thanks

2

Have a look through the official examples to get yourself started. Search for ‘video’ and ‘vr’, there are examples of each there.

1 Like
3

Thanks I done this part already my problem want to add controls for the video do u have any resources for that means please share

Thanks

4

Hi guys , i would have the exact same question as Kumaresh.
How would you proceed to implement basic controls for the 360 video player ?

  • play
  • pause
  • timeline
  • volume

Would it be easier / clever ? to go higher level and use react-vr directly ?

Thanks for your time !

5

Well it looks like a good start
https://www.w3schools.com/jsref/dom_obj_video.asp

6

If you want VR controls that are inside the 3D space, you either need to create some Plane meshes yourself and move them around to keep them in view, or yep, you can use a library that already does that (a-frame, ReactVR).

If you just want static UI on top of the 3D scene (f.e. full screen and VR buttons) you can just overlay basic HTML stuff (<div>, <a>, <button>, etc) on top of the canvas element (the one Three renders to).

7

@trusktr Thanks for you answer. it does make sense !

i still have some blurry area in my mind like:

  • how to implement a timeline properly ?
  • how to implement the ability to choose between stream / download the video, and play.
  • would it be reasonable to compile this with cocoon for a minimalist player for android / ios ?

I have check all the big pretender in video3602app area, and they all:

  • take your video
  • convert it to multiple optimized format for various device
  • take it into a unity scene with home screen / and minimalist player
  • build for any plateform you want
  • then you can either play a streaming video host on amazon or download and play

I am trying to replicate the exact same thing but with

  • three.js instead of unity
  • vimeo private video instead of amazon

does it sound stupid or is it doable ?
Thanks for your time !

Cheers
E

8

Regarding the Vimeo streaming that look interesting:

But for the moment it looks that only CSS3D can be used, so i don’t think it will work for VR.

9

which example is there and how to make it work on local system?

10

The basic video texture example is:

https://threejs.org/examples/webgl_materials_video

There is actually a guide that explains how to run things locally:

https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally