Skip to content
dev
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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>

Custom element tags

<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

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

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