Skip to content
Immersive Custom Elements
JavaScript
Branch: master
Clone or download
Latest commit 247c5a7 Aug 14, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Update examples Jun 6, 2019
build Update build Aug 2, 2019
examples Minor style.css update Aug 2, 2019
screenshots Remove unused screenshots Jul 31, 2019
src Replace traditional functions with arrow functions Aug 12, 2019
.gitignore Initial commit May 30, 2019
LICENSE Initial commit May 30, 2019
README.md Minor update readme Aug 14, 2019
index.js Remove image-360-tour component for now Jul 31, 2019
package.json Add minified build Jul 30, 2019
rollup.config.js Add minified build Jul 30, 2019

README.md

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.1.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>
  • <video-360>

<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

You can’t perform that action at this time.