control play/pause/stop ?

[gabrieljbaker]

Hi - huge fan of this component and just got it working. :) I'm wondering if there's any way to allow the user to control things like play/pause/stop while within the webvr environment? This would be super handy, letting the user control when the video plays, etc.

[juniorxsound]

Thanks for the feedback @gabrieljbaker, would be a great idea to add an example scene for that (note taken) 🙌 the functionality is acctually in the component already and you can use it with a little bit of Javascript. You would want to do something like the following in order to trigger play/pause on click (or any other interaction for that matter):

<a-scene>
  <a-camera position="0 0 10"></a-camera>
  <a-entity vimeo="id: 296928206; autoplay:false" id="vimeo">
      <a-plane scale="32 18 20" id="screen"></a-plane>
  </a-entity>
</a-scene>

<button id="play">Play</button>
<button id="pause">Pause</button>
<script>

  var playButton = document.getElementById('play');
  var stopButton = document.getElementById('pause');

  var vimeoPlayer = document.querySelector('#vimeo').components.vimeo;

  playButton.addEventListener('click', function(event){
      vimeoPlayer.play();
  });

  stopButton.addEventListener('click', function(event){
    vimeoPlayer.pause();
  });

</script>

Closing the issue for now, but if you are experiencing any problems with the approach above, feel free to reopen, open a new issue

[gabrieljbaker]

I couldn't quite get this to work! Seems like there was an issue with accessing the vimeo component. For example, I have: let vimeoPlayerent = document.querySelector("#videoone"); console.log(vimeoPlayerent); console.log(vimeoPlayerent.components); console.log(vimeoPlayerent.components.vimeo);

The first two logs look fine, and in the second log I even see the vimeo component listed in the log. The third log, though, shows up as undefined. Any idea? @juniorxsound ?

[juniorxsound]

🧐 are you setting the ID for the Vimeo component to videoone? the HTML part should look something like:

<a-entity vimeo="id: 296928206; autoplay:false" id="videoone">

I would also recommend remixing or cloning the latest version of the component as I pushed some changes yesterday that make the play/pause/stop functions more reliable.

[gabrieljbaker]

Yep, @juniorxsound , I had my id set up the right way in my HTML. I did a first attempt at updating the components and still had no luck. I'm afraid I'll have to wait to see a working example, but I'll keep tinkering in the meantime!

[juniorxsound]

Hi @gabrieljbaker, wanted to update you that I took another look at this and it seems to be caused by trying to querySelector() the component before it was initialized resulting in an undefined variable. If you wrap your entire code in a loaded event listener it should take care of that.

document.querySelector('#vimeo').addEventListener('loaded', function() {

  var playButton = document.getElementById('play');
  var stopButton = document.getElementById('pause');

  var vimeoPlayer = document.querySelector('#vimeo').components.vimeo;

  playButton.addEventListener('click', function(event){
      vimeoPlayer.play();
  });

  stopButton.addEventListener('click', function(event){
    vimeoPlayer.pause();
  });

});

Working on a new example which will be published soon, but feel free to give this a go in the meantime 🙌

[juniorxsound]

The new example showing how to control playback is now live in Glitch and in the repository. Closing this issue, but if you are expeirencing any issues feel free to reopen/open a new issue.

[n5ro]

I spent 5 hours just now trying to get buttons to work. I can't figure out what I am doing wrong. I tried this ` document.querySelector('#vimeo').addEventListener('loaded', function() {

      var playButton = document.getElementById('play');
      var stopButton = document.getElementById('pause');

      var vimeoPlayer = document.querySelector('#vimeo').components.vimeo;

playButton.addEventListener('click', function(event){ vimeoPlayer.play(); });

      stopButton.addEventListener('click', function(event){
        vimeoPlayer.pause();
      });

      }); 

I tried this
//Wait until the A-Scene component was loaded before doing anything document.querySelector('#vimeo-player').addEventListener('loaded', function () {

var playButton = document.getElementById('play');
var stopButton = document.getElementById('pause');
var vimeoPlayer = document.querySelector('#vimeo-player').components.vimeo;

playButton.addEventListener('click', function(event){ vimeoPlayer.play(); });

stopButton.addEventListener('click', function(event){ vimeoPlayer.pause(); });

}); ` I tried all sorts of weird stuff

`AFRAME.registerComponent("console", { init: function () { this.el.addEventListener("play", (e) => { VR_LOG('play event heard') this.el.play(); }); this.el.addEventListener("pause", (e) => { VR_LOG('pause event heard') this.el.pause(); }); this.el.addEventListener("stop", (e) => { VR_LOG('stop event heard') this.el.stop(); });

    }
});

AFRAME.registerComponent("play", { init: function () { this.el.addEventListener("click", (e) => { VR_LOG('click play')

          let playbutton = document.querySelector('.player')
           VR_LOG('playbutton play')
           playbutton.emit('play')

      });

    }
});

AFRAME.registerComponent("pause", { init: function () { this.el.addEventListener("click", (e) => { VR_LOG('click play')

          let playbutton = document.querySelector('.player')
           VR_LOG('pause emit')
           playbutton.emit('pause')

      });

    }
});

AFRAME.registerComponent("stop", { init: function () { this.el.addEventListener("click", (e) => { VR_LOG('click play')

          let playbutton = document.querySelector('.player')
           VR_LOG('stop emit')
           playbutton.emit('stop')

      });

    }
});`

tried that

tried this

` `

`
<a-plane id="play" class="clickable menu_plane play" side="double" visible="false" material="src: #gri" position="-1 0.5 -3" scale="1 0.5 0" rotation="-45 0 0" text="align: center; width: 3; color: black; height: auto; value: Play/Pause"

        ></a-plane>

and this <a-plane id="play" class="clickable menu_plane " side="double" visible="false" material="src: #gri" position="-1 0.5 -3" scale="1 0.5 0" rotation="-45 0 0" text="align: center; width: 3; color: black; height: auto; value: Play"

        play></a-plane>

<a-plane id="pause" class="clickable menu_plane" side="double" visible="false" material="src: #gri" position="0 0.5 -3" scale="1 0.5 0" rotation="-45 0 0" text="align: center; width: 3; color: black; height: auto; value: Pause"

        ></a-plane>

<a-plane class="clickable menu_plane" side="double" visible="false" material="src: #gri" position="1 0.5 -3" scale="1 0.5 0" rotation="-45 0 0" text="align: center; width: 3; color: black; height: auto; value: Stop"

        stop></a-plane>

`

actually I can't even get your example code to work outside of that page which makes no sense.

I noticed that your example code on github uses Aframe 0.8.0 but changing that doesn't help either.

How does it work for your example on glitch but not from the code on github?

What am I missing?

there is no playback.html file I just put the code in basic should that matter? Why isn't there a regular 360 demo, not stereo 360? why isn't there a stereo 180 demo?

why are there all these html files that are dependent on other html files? why do I need this?

I should be able to just play my vimeo video with only one html file, with no extra files, with no weird dependencies that borrow html or javascript from other files.

Because we can play regular video without all that extra stuff there is no reason for vimeo to have all this extra stuff that makes it confusing if developers want to separate out the essential stuff to put in their own website, and not incorporate your entire file structure into our existing file structure :((

what happened to the stop button? It's only play and pause now? We need more buttons like fast forward 30 seconds, rewind 30 seconds, (or 15 seconds) restart video, select bitrate, and more

[juniorxsound]

Hi @n5ro, sorry to hear about your experience. The project structure is meant to make it easier for us to maintain the threejs-player repo and wrap it into an A-Frame component. That said, we will keep your feedback in mind and try and simplify the tooling and additional files in the project.

I made a simple example that only shows playback controls - hope this helps. Feel free to re-open the issue, or open a new issue in case this doesn't solve your use case.

[n5ro]

I don't think your example works, at least not in my chrome browser on pc.

Thanks for your reply. I checked your code and on github and the glitch button to show the code example is greyed out, https://imgur.com/WjEyrEQ

What else can I try?

okay so then I remixed the code, I changed it from Aframe 0.8.0 to 0.9.1 and then I added in my vimeo token key, and then I added in my video link number.

Then I get a weird console error that repeats every few seconds it says `Could not find node >=0.12, using 10

internal/modules/cjs/loader.js:584

throw err;

^

Error: Cannot find module '/app/assets/js/readme-glitch-fix.js'

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)

at Function.Module._load (internal/modules/cjs/loader.js:508:25)

at Function.Module.runMain (internal/modules/cjs/loader.js:754:12)

at startup (internal/bootstrap/node.js:283:19)

at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)`

https://imgur.com/qCusMia

and this goes to the heart of it, why would I need to include a readme file for the code to execute? all this module requirements decrease the actual modularity of your code.

The code may look good from its place on its origin PC, with things like node js / bootstrap / npm / webpack, perhaps because you have software that makes managing a large multi-file system really easy.

but that stuff binds things together in a weird way like oh you need this read me file in order to play your video, because webpack or something requires all your files to be present for anything to work.

That's one of the reasons I don't use this stuff "node js / bootstrap / npm / webpack" I want to be able to sign into any chromebook or any web browser (ideally, including Oculus Browser or Firefox reality browsing in VR and or AR and be able to do everything without install npm/nodejs, bootstrap, or webpack. because you can't install this stuff everywhere.

Although I supposed that if I wanted to make it difficult for other people to reuse my code then I might have a super complicated file structure that requires readme files for video play back

I don't mean to gripe so much about spreading out the html code across multiple pages, that was a neat trick. I also use threejs and other javascript code in separate files, but I turn them into CDN links from github because it increases their modularity, instead of needing to create a local file tree it brings in the javascript from something like unpkg, rawgit, or jsdelivr and that works great.

[juniorxsound]

Hi @n5ro sorry about that, it was a typo with copying over the package.json the example should work fine now and here is the Glitch project page

[n5ro]

Thanks, here are some in VR buttons for the next person, based off what you gave me thanks https://playback.glitch.me/

[juniorxsound]

That's awesome @n5ro 🎉 Would you be down to making this an official example? I think other people might find this useful

[n5ro]

Okay lets make it an official example!

I will be sharing a lot more official examples soon with the launch of my webxr magazine which is coming soon.

I would encourage folks to use the Creative Commons Attribution 4.0, it means anyone can use the code for any purpose, just credit where the code/art came from (even if the credit is somewhat hidden in the code at the bottom) https://creativecommons.org/licenses/by/4.0/

https://medium.com/silicon-valley-global-news/my-application-to-become-an-oculus-quest-developer-was-denied-255e03052921

For this magazine however I am going to need a regular 360 video player (not stereo) and eventually it will be adding volumetric video, photogrammetry scenes, and 3D 180 video (Lucidcam)

[n5ro]

I will be looking to increment / decrement the play time in the video for the final version ++ -- not sure how I will accomplish that but I will try, if you can think of how to add, for example a 15 second ++ to the video time while it's playing, this feature is useful for people who want to skip forward or play back certain parts.

[n5ro]

https://simple-playback-example.glitch.me/

Interesting the demo that you made works fine in Google Chrome, but it does not work in Microsoft Edge Browser nor in the Supermedium WebXR browser.

Also when I add tons of code, like the rest of the WebXR website I have been working on, I am seeing lots of strange glitches that I think could be caused by the vimeo code I'm not sure

There are also lots of weird error messages that show up in my VR console. There are errors that only happen when the browser is loaded every other time. Such as my slides not showing up in the set of entities that the video is in as a child entity but slides in other sets that the video is not in are working fine. and on the odd times when the slides do show up the vimeo buttons seem unresponsive, like play button struggles to work until perhaps other buttons are pressed first.

At one point it told me the id of my video was wrong, (the point when I had integrated the working video into the working webxr site) and it would not recognize the correct video address, so eventually I turned the id of vimeo-player into a class instead of an id. I adjusted the program accordingly, and I also created an ID tag with the vimeo video id tag, now the strange part is that it works but it only works if I have both the id tag inside the vimeo video entity with the video number AND if inside the vimeo tag where it says autoplay = false that id is also the video number. So the video number is in their twice, the ID is in their twice, and it won't work if I try to delete either one of them. but it does work

it works in Google Chrome on PC, and in Oculus Browser on Oculus Go it works fine.

It doesn't work in Firefox reality on Lenovo Mirage Solo, actually I don't think any vimeo works on that system. So it's a mystery.

I wish I had the ability to hire people to work on this code with me to help fix all these things and more.

[n5ro]

I just tested the program on in the Firefox Reality browser on the Oculus Go. The video is not playable. Strangely the control buttons that I created vanish at some point after attempting to interact with the not playable video.

When I say it doesn't work in certain browsers I mean that the box entity where the video should be playable from shows up as a white box.

When it does work, the entity that the video is playable from shows up as a black box.

I am getting an error in my VR console. I wonder if the Firefox Reality browser, the Windows Edge Browser, and the SuperMedium browser are all missing an essential type of video codec that makes vimeo threejs videos work.

These videos do work in the Oculus Browser on Oculus Go and they work in Google Chrome on Windows so that gives me hope.

Is there anything I can do to help you, or help the developer community to get the Vimeo threejs vimeo player working on all these other browsers as well?

[n5ro]

I narrowed the problem down. "vimeo="id: 322980501; " this code is messing with aframe. I don't think you can put an id tag inside the vimeo tag like that. I think an entity can only have 1 id tag. Is it possible for you to change the code that references the vimeo video id to something other than id?

[n5ro]

how about vimeo="vid: 322980501" instead?