amv

aframe-multi-video-component

AFRAME multi-video component allowing for using a single video source organized like an image sprite as textures on multiple geometries each starting at different times in the video source.

Showing:

Popularity

Downloads/wk

17

GitHub Stars

8

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

aframe-multi-video-component

Version License

AFRAME multi-video component allowing for using a single video source organized like an image sprite as textures on multiple geometries each starting at different times in the video source.

alt text

This is a component to help optimize webVR video displays. Instead of loading multiple video sources for each panel and having the browser have to handle and use computational resources for keeping track of these multiple video files this is a solution to get better performance by editing the video clips into a single video, loading a single video file, cloning the video source for each panel and playing the video clip within the start time for the specified duration of the video clip.

Note

This component is a exploratory solution for optimizing multi-video clips on multiple plane geometries used as video displays in the VR world. There were performance issues doing this on the Samsung VR while using multiple video sources so this was used to make this a viable solution for webVR on mobile devices.

For A-Frame. The aframe-multi-video-component was developed at UNION Creative for a webVR project.

API

PropertyDescriptionDefault Value
srcThe #id of the video source used in this panel.required
timeTime in milliseconds where the video will start from.0
durationWhile looping the video, how long should the video play for before scrubbing back to the start time value.Length of loaded video
volumeVolume of the panel's audio.0.5
autoplayAuto play the video clip.true

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-multi-video-component/dist/aframe-multi-video-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-assets>
        <video id="video1" loop crossorigin="anonymous" webkit-playsinline playsinline>
            <source src="./assets/star_wars_opening_scene.mp4"></source>
        </video>
    </a-assets>
    <a-entity aframe-multi-video-component="src: #video1; time: 200; duration: 5; volume: 0.5; autoplay:true;"></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-multi-video-component

Then require and use.

require('aframe');
require('aframe-multi-video-component');

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial