A shader to display videos with transparency (alpha channel) for A-Frame.
npm install aframe-transparent-video-shaderThis is a shader to display videos with transparency (Alpha Channel) such as WebM and HEVC H265.
https://aframe-transparent-video.glitch.me/
1. Install by declaring this script after aframe
``
1. Install the package:
`
npm i aframe-transparent-video-shader
2. Import after aframe:
`
import 'aframe'
import 'aframe-transparent-video-shader'
1. Create a video element into a-assets tag and declare an id.
2. Create an entity and assign a material="shader: transparent-video; src: #videoId" attribute
`
Notes
$3
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
event listener to the whole page:
`
document.addEventListener('click', () => {
video = document.querySelector('video');
video.play();
});
$3
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.