README

Aframe Transparent Video Shader

This is a shader to display videos with transparency (Alpha Channel) such as WebM.

Demo

https://aframe-transparent-video.glitch.me/

Browser Installation

Install by declaring this script after aframe

<head>
  <title>My Scene</title>
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-transparent-video-shader@1.0.3/dist/aframe-transparent-video-shader.umd.js"></script>
</head>

NPM Installation

Install the package:

npm i aframe-transparent-video-shader

Import after aframe:

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

Usage

Create a video element into a-assets tag and declare an id.
Create an entity and assign a material="shader: transparent-video; src: #videoId" attribute

<html>
  <head>
    <title>My Scene</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-transparent-video-shader@1.0.3/dist/aframe-transparent-video-shader.umd.js"></script>
  </head>

  <body>
    <a-scene>
      <a-assets>
        <video id="videoId" src="https://video-src-url" muted autoplay loop="true"></video>
      </a-assets>
      
      <a-entity
        material="shader: transparent-video; src: #videoId"
        geometry="primitive: plane;
                  width: 1;
                  height: 1.8"
        position="0 1 -2">
      </a-entity>
    </a-scene>
  </body>
</html>

Video autoplay

On the latest chrome versions, the autoplay is blocked by default until there is an user interaction. You can read more here.

Some solutions you can use:

Add a button to play the video:
You can find a full example here.
Or use the play-on-click component.
Add a click event listener to the whole page:

document.addEventListener('click', () => {
    video = document.querySelector('video');
    video.play();
});

Usage no npm install needed!