AFrame Video Shader

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

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'

mayognaise / aframe-video-shader

readme