A shader to display video for A-Frame VR. Inspired by @Jam3's ios-video-test
- This was made for inline video playback for iPhone. If you only support desktop/android, please use
flatinstead for better performance.
- 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
- 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.
MediaElement methods will be supported soon.
Media events will be supported soon.
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>Install via NPM:
npm i -D aframe-video-shaderThen register and use.
import 'aframe'
import 'aframe-video-shader'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent