oscarmarinmiro / aframe-video-controls Goto Github PK

View Code? Open in Web Editor NEW

55.0 7.0 24.0 11.85 MB

AFrame component to control (play/pause/jump) videos.

Home Page: https://oscarmarinmiro.github.io/aframe-video-controls/

License: MIT License

JavaScript 100.00%

aframe-video-controls's Introduction

aframe-video-controls

A video control component for A-Frame. Demo [here] (https://oscarmarinmiro.github.io/aframe-video-controls)

It attaches to a video asset so you can play/pause the video (assuing it is projected on a plane or sphere) by looking and clicking on the 'play' icon or transport bar.

You can also press the 'space bar' or the arrow keys to control the video if you are in a 'desktop' computer

Feedback is needed and very welcome, specially regarding User Experience!!!

I'm working on the following features, but feel free to suggest via Github Issues:

'Flat' component if on Desktop (i.e: not in the 3D space)
Test on iPhone and Vive (at the moment I tested this in Android, Cardboard and Oculus Rift DK2)
Test on much bigger files
Volume controls
Another control to jump between different files so you can 'browse' different videos
'Auto hide feature': If x seconds have passed after last interaction with player, hide the controls and A-Frame cursor

Demo

You can play with a live demo [here] (https://oscarmarinmiro.github.io/aframe-video-controls)

Properties

Property	Description	Default Value
src	selector of the video asset	mandatory
size	horizontal size of the player in meters	1.0
distance	distance of the player from the camera in meters	2.0
backgroundColor	Color of the player background.	black
barColor	Color of the video progress bar.	red
textColor	Color of the text.	yellow
infoTextBottom	Bottom text to display under the bar to explain how to use it.	Double-click outside player...
infoTextTop	Top text to display under the bar to explain how to use it.	Look+click on play...
infoTextFont	Font for info text.	35px Helvetica Neue
statusTextFont	Font for text to right of player.	30px Helvetica Neue
timeTextFont	Font for time progress.	70px Helvetica Neue

Usage

Just include the component and put your video into the A-frame assets section.

Then just include an entity with the 'src' attribute 'pointing' to the video asset you want to control.

You can supply your own 'play' and 'pause' images for the player by including these lines into the assets of your scene:

    <a-assets>
        <img id="video-play-image" src="img/play.png">
        <img id="video-pause-image" src="img/pause.png">
     ...

Otherwise, the default 'play' and 'pause' images (CDN-hosted) will be used.

Browser Installation

Install and use by directly including the browser files:

This example projects a 360 video into a videosphere and attaches the controls to it.

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  <script src="https://rawgit.com/oscarmarinmiro/aframe-video-controls/master/dist/aframe-video-controls.min.js"></script>
</head>

 <body>
    <a-scene>
      <a-assets>
        <video id="video_1" src="https://ucarecdn.com/bcece0a8-86ce-460e-856b-40dac4875f15/"></video>
      </a-assets>

      <a-camera position="0 0 5">
          <a-cursor id="cursor" color="yellow"></a-cursor>
      </a-camera>

      <a-videosphere src="#video_1" rotation="0 180 0"></a-videosphere>

      <a-entity video-controls="src:#video_1"></a-entity>

    </a-scene>
  </body>

NPM Installation

Install via NPM:

npm install aframe-video-controls

Then register and use.

require('aframe');
require('aframe-video-controls');

aframe-video-controls's People

Contributors

Stargazers

Watchers

aframe-video-controls's Issues

Is there any progress on the auto hide feature?

Love this add-on, would really like to see the auto-hide feature implemented.

Videos Are Not Loading on Phone

Hello Oscar,
I have tried everything to load videos on latest Android and Apple mobile phones after integrating this plugin, but none of them got the success. Even i have tried to open your hosted Demo(https://oscarmarinmiro.github.io/aframe-video-controls/basic/) page on Android devices but no luck

(Just to add my Video file size is around 48MB)
Please help to know what am i doing wrong here

Here is my code:

<a-camera position="0 0 0">
    <a-cursor id="cursor" color="#4dbfb2"></a-cursor>
</a-camera>

<a-videosphere src="#videoAssest"></a-video>    
<a-entity video-controls="src:#videoAssest"></a-entity>

Thanks in advance,
santosh

Point to examples somewhere

Maybe I missed them, but I couldn't find an obvious link to the examples from the README/project header.

'Flat' component if on Desktop (i.e: not in the 3D space)

Hi Oscar,

Have you had the chance to work on the 'flat' desktop component?

Thanks,
Carlos

AframeVR v0.5 support

After upgrading aframe to v0.5 player controls stopped working, in fact the entire scene fails to render.

Allow minor customization of the UI.

Great component! This will be useful for many people. I am going to feature it in the A-Frame 360 Video Boilerplate.

Would like to be able to customize things like font, help text, loaded text, font-color.

Like <a-entity video-controls="src: #video; helpText: Click play!; loadedText: ; textColor: #333; textFont: monospace>"

Entity visible="false" not working

a-entity visible="false" video-controls="src:#video_1"
This does not work

aframe <a-video> controls

how to add a component ? i have followed all the steps u mentioned , but only change in my case is i am not using 360 degree video, instead i have a collection of videos which i want to create video gallery and add a controls to them.

Problems:

Start and pause button comes initially and get eased out.
I am using a-video tags, but for me controls functionality is not working at all.

Here is a sample of my code:
<a-scene> <a-assets> <img id="video-play-image" src="images/play.png"> <img id="video-pause-image" src="images/pause.png"> <video id="video_beacon_offers" loop="true" src="videos/video_beacon_offers.mp4"> </a-assets> <a-video src="#video_beacon_offers" width="16" height="9" position="0 0 -20"> </a-video> <a-entity video-controls="src:#video_beacon_offers"> </a-entity> </a-scene>

Also please suggest me on how to create a video gallery in aframe. i have collection of videos which want user to see them all as thumbnail and click on particular video to play it.

Thanks
Krishna