Immersive Custom Elements

immersive-custom-elements is a set of web components to embed immersive (VR & AR) content into your web page by using custom element tags. It currently includes components for

360 images
360 video

Demo / Blog post

Usage

Sample code

Add the link to immersive-custom-elements.js with <script> tag. You can download the file from this repository or use the link to the CDN.

<html>
  <head>
    <script src="https://rawcdn.githack.com/MozillaReality/immersive-custom-elements/v0.2.0/build/immersive-custom-elements.js"></script>
  </head>
  <body>
    <img-360 src="360-landscape.jpg" width="640" height="360"></img-360>
  </body>
</html>

<img-360>

Displays an interactive 360 degree photo.

<img-360 src="imagefile.jpg" width="640" height="360"></img-360>

attribute	type	required	description
src	strings	yes	Path to image file
width	number	yes	element width
height	number	yes	element height

<video-360>

Plays an interactive 360 degree video. Click video to start playing.

<video-360 src="video.mp4" width="640" height="360" loop></video>

attribute	type	required	description
src	strings	yes	Path to video file
width	number	yes	element width
height	number	yes	element height
loop	-	no	video loops if defined
muted	-	no	the audio output of the video is muted if defined
autoplay	-	no	video automatically starts playing if defined

Immersive (VR) mode

You can enter immersive mode by clicking "ENTER VR" button if you have a VR headset.

Development

How to build

$ git clone https://github.com/MozillaReality/immersive-custom-elements.git
$ cd immersive-custom-elements
$ npm install
$ npm run build

How to locally run

$ npm run start
# local server boots up. Access http://localhost:8080/examples/index.html on your browser.

License

Mozilla Public License Version 2.0