如何暂停A帧中的视频圈？

Question

I don't want a video controller but pause the video and change its current time in JS, what should I do? I have done a lot of research and tried a lot, but it always says" Cannot read property 'pause' of null".

Answer 1

If You have a video in your <a-assets> :

<a-assets>
   <video id="myvideo">
</a-assets>

<a-videosphere src="#myvideo>

then You can call play()/pause() on the video asset, like:

document.querySelector("#myvideo").pause();

---

If You set Your a-videosphere src as a direct link to an .mp4 file, then try to call the functions on the videosphereElReference.getAttribute('src').pause();

---

Working fiddle here .

Answer 2

This code working for me

Fiddle

You can see it in the console log, when does it play / pause

right click -> inspect element -> click console tab

<meta charset="utf-8">
<title>360 Video</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>    <script>
AFRAME.registerComponent('foo',{
init:function(){
  var vid = document.getElementById('video');
  setTimeout(function(){

  document.querySelector('#video').pause();
  console.log('pause');
  },5000);
  setTimeout(function(){
   vid.play();
   console.log('play');
  },10000);
}
})
</script>
<a-scene foo>
  <a-assets>
    <video id="video" src="https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/"
           autoplay loop crossorigin="anonymous"></video>
  </a-assets>

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