This is a shader to display videos with transparency (Alpha Channel) such as WebM.
https://aframe-transparent-video.glitch.me/
- 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/[email protected]/dist/aframe-transparent-video-shader.umd.js"></script>
</head>
- Install the package:
npm i aframe-transparent-video-shader
- Import after aframe:
import 'aframe'
import 'aframe-transparent-video-shader'
-
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.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>
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();
});
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent