Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

aframe-video-shader

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

aframe-video-shader

A shader to render DOM Element for A-Frame VR.

  • 0.1.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

AFrame Video Shader

A shader to display video for A-Frame VR. Inspired by @Jam3's ios-video-test

DEMO

example

Notes

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.
PropertyDescriptionDefault Value
srcimage url. @see Texturesnull
autoplayplay automatecally once it's readytrue
preloadpreload video (this works for only desktop)true
mutedmute or unmutetrue (currently always true.)
looploop videotrue (currently always true.)
fpsvideo fps60
volumevideo volumeundefined
pausevideo playbackfalse

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'

Keywords

FAQs

Package last updated on 18 Apr 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc