Aframe: Add 360° video player template

Created on 14 Oct 2015 · 4Comments · Source: aframevr/aframe

Enables devs to create 360° video players.

Features should be in line with what we had in pre-refactor <vr-video> and <vr-video360> components, and with the HTML5 <video> spec.

Dev can specify:

Video source
Autoplay boolean
Looping boolean
Height
Width
Muted boolean
Controls boolean (shows or hides controls for playback)

Please add anything missing from the above. Looking at the <video> element spec, I'm not sure how important autobuffer, crossorigin, and poster are, for example.

While the image is loading, nothing is visible. Should look at adding preloaders and/or placeholders in the future.

Source

jcarpenter

Most helpful comment

Hi @cvan , I tried to add the controls attribute to video element which is used as the texture for a-videosphere, but it seems the video controls are not displayed? my code is as below:

<html>
<head>
  <title>My A-Frame Scene</title>
  <script src="node_modules/aframe/dist/aframe.min.js"></script>
</head>
<body>
<a-scene>
  <a-assets>
    <video id="antarctica" autoplay loop="true" controls src="video/MaryOculus.webm"/>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-videosphere src="#antarctica"></a-videosphere>

</a-scene>

</body>
</html>

Can you please advice where was wrong?

artecher on 23 Apr 2016

👍3

All 4 comments

Controls can be limited to a play/pause toggle initially. Longer term we can imagine adding:

Time indicator
Volume control

jcarpenter on 14 Oct 2015

Dependent on https://github.com/MozVR/vr-markup/issues/249

jcarpenter on 14 Oct 2015

This is done.

cvan on 5 Dec 2015

Hi @cvan , I tried to add the controls attribute to video element which is used as the texture for a-videosphere, but it seems the video controls are not displayed? my code is as below:

<html>
<head>
  <title>My A-Frame Scene</title>
  <script src="node_modules/aframe/dist/aframe.min.js"></script>
</head>
<body>
<a-scene>
  <a-assets>
    <video id="antarctica" autoplay loop="true" controls src="video/MaryOculus.webm"/>
  </a-assets>

  <!-- Using the asset management system. -->
  <a-videosphere src="#antarctica"></a-videosphere>

</a-scene>

</body>
</html>

Can you please advice where was wrong?

artecher on 23 Apr 2016

👍3

Was this page helpful?

0 / 5 - 0 ratings