Nearly-Pickled Module

    aframe-video-shader

    0.1.8 • Public • Published

    AFrame Video Shader

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

    DEMO

    example

    Notes

    • This was made for inline video playback for iPhone. If you only support desktop/android, please use flat instead for better performance.

    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.
    Property Description Default Value
    src image url. @see Textures null
    autoplay play automatecally once it's ready true
    preload preload video (this works for only desktop) true
    muted mute or unmute true (currently always true.)
    loop loop video true (currently always true.)
    fps video fps 60
    volume video volume undefined
    pause video playback false

    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'

    Install

    npm i aframe-video-shader

    DownloadsWeekly Downloads

    35

    Version

    0.1.8

    License

    MIT

    Last publish

    Collaborators

    • mayognaise