0.1.8 • Published 10 years ago
aframe-video-shader v0.1.8
AFrame Video Shader
A shader to display video for A-Frame VR. Inspired by @Jam3's ios-video-test
Notes
This was made for inline video playback for iPhone. If you only support desktop/android, please use
flatinstead 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
flatshader besidesrepeat. Will update it soon. autoplaywill be useful when Method is ready.mutedis currently always true. Will be supported soon.loopis currently always true. Will be supported soon.filterproperty will be supported soon.pausecontrols 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-shaderThen register and use.
import 'aframe'
import 'aframe-video-shader'