aframe-transparent-video-shader v1.0.6
Aframe Transparent Video Shader
This is a shader to display videos with transparency (Alpha Channel) such as WebM and HEVC H265.
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.4.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-transparent-video-shader@1.0.4/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-assetstag 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.4.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-transparent-video-shader@1.0.4/dist/aframe-transparent-video-shader.umd.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video
id="videoId"
muted
loop
playsinline
webkit-playsinline
>
<!-- HEVC video for safari support -->
<source src="https://video-src-url/video.mov" type="video/mp4;codecs=hvc1">
<!-- WEBM video for chrome and firefox -->
<source src="https://video-src-url/video.webm" type="video/webm" />
</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>Notes
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
clickevent listener to the whole page:
document.addEventListener('click', () => {
video = document.querySelector('video');
video.play();
});Safari Support
Safari doesn't currently support webm videos with transparency, so you will need to add an extra .mp4 or .mov video file with the HEVC H.265 codec encoded with transparency enabled. See the demo code here for an example implementation.