iOS 10 supports inline video so do not use this and just wait for it ๐
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
flat
instead 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
flat
shader besidesrepeat
. 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.
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-shader
Then register and use.
import 'aframe'
import 'aframe-video-shader'