❤
npm
Sign UpSign In

aframe-video-shader

0.1.8 • Public • Published

AFrame Video Shader

A shader to display video for A-Frame VR. Inspired by @Jam3's ios-video-test

DEMO

example

Notes

  • This was made for inline video playback for iPhone. If you only support desktop/android, please use flat instead for better performance.

Limitation

  • Currently only videos under SAME DOMAIN can be played with any browsers on iOS devices and desktop Safari.
  • Large/long video mostly gets error. More about limitation, please see here

Properties

  • Basic material's properties are supported.
  • The property is pretty much same as flat shader besides repeat. Will update it soon.
  • autoplay will be useful when Method is ready.
  • muted is currently always true. Will be supported soon.
  • loop is currently always true. Will be supported soon.
  • filter property will be supported soon.
  • pause controls the playback.
Property Description Default Value
src image url. @see Textures null
autoplay play automatecally once it's ready true
preload preload video (this works for only desktop) true
muted mute or unmute true (currently always true.)
loop loop video true (currently always true.)
fps video fps 60
volume video volume undefined
pause video playback false

For refference, please check the following links:

MediaElement properties will be supported soon.

Method

MediaElement methods will be supported soon.

Events

Media events will be supported soon.

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> 
  <!-- NOTE: somehow `aframe-video-shader` makes error 😢 so it's been `aframe-vid-shader.min.js` for now -->
  <script src="https://rawgit.com/mayognaise/aframe-video-shader/master/dist/aframe-vid-shader.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-entity geometry="primitive:box;" material="shader:video;src:url(bbb.mp4);"></a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm i -D aframe-video-shader

Then register and use.

import 'aframe'
import 'aframe-video-shader'

Readme

Keywords

Package Sidebar

Install

npm i aframe-video-shader

Repository

github.com/mayognaise/aframe-video-shader

Homepage

github.com/mayognaise/aframe-video-shader#readme

Weekly Downloads

5

Version

0.1.8

License

MIT

Last publish

Collaborators

  • mayognaise
Try on RunKit
Report malware