Home

Awesome

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 image tours -->

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>

Custom element tags

<img-360>

Displays an interactive 360 degree photo.

<img-360 src="imagefile.jpg" width="640" height="360"></img-360>
attributetyperequireddescription
srcstringsyesPath to image file
widthnumberyeselement width
heightnumberyeselement height

GitHub Logo

<video-360>

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

<video-360 src="video.mp4" width="640" height="360" loop></video>
attributetyperequireddescription
srcstringsyesPath to video file
widthnumberyeselement width
heightnumberyeselement height
loop-novideo loops if defined
muted-nothe audio output of the video is muted if defined
autoplay-novideo automatically starts playing if defined

GitHub Logo

Immersive (VR) mode

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

GitHub Logo

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