a-videosphere src="360video.mp4" autoplay="true" loop="true" rotation="0 270 0"
That’s pretty easy—it looks almost exactly like html for a 2D video:
video src="2dvideo.mp4 controls autoplay="false"
But wait, there’s more. This is Web VR so A-Frame supports desktop, iPhone, Cardboard and Oculus (Android coming soon according to the docs) right out of the box. So with a little time to play around between Christmas shopping, I gave A-Frame a spin.
I love the idea of making a “VR gif” – a scene that you could just sit in and experience for as long as you wanted. Since I don’t have an awesome 360 3D camera rig (about $5K) or even a nifty 360 2D consumer camera, I grabbed a few seconds from this video that my old videoblogging friend Chuck made and I looped it. Then I tried adding some primitives (cubes in this case) to the scene. 10 lines of code later, violá – a VR gif:
- Some notes:
- Give the video a moment to load (it’s 15MB).
- In a browser, you can click and drag with your mouse to look around.
- On the iPhone the video doesn’t play. You just get the first frame and spinning cubes. But you can still look around by moving your phone or put it in a cardboard holder and look around (the cubes are in stereo).
- It’s super cool with the Oculus DK2 and even works on a Mac (even though Oculus dropped Mac support).