Question

我尝试在一个框架中播放360度视频，它在android和台式机上都能正常工作，但在ios上却无法正常工作。如果我将视频静音，则视频的开始有效，但是我需要声音。一些想法如何解决？这是我的代码：https://jsfiddle.net/237s96ka/1/

<!DOCTYPE html>
<html>
  <head>

    <title>zoom-showreel</title>
    <meta charset="utf-8">
    <meta author="" inhalt="vr-video">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>

  </head>  
  <body>

  <a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable" vr-mode-ui="enabled: false">

      <a-assets timeout="0">

        <img id="icon_vid" src="https://cdn.glitch.com/710c25d4-6d3f-48ef-910b-36ddf7e5e6b9%2Fvidiconaframe(background).png?1530002331523" crossorigin="anonymous">


        <video id="video" style="display:none" preload="none"
               loop="true" crossorigin="anonymous" playsinline webkit-playsinline>
          <source type="video/mp4"
               src="https://cdn.glitch.com/c2ca5d0d-ccc4-4d01-a6ce-4d189a914581%2Ftryvid.mp4?1533644255893" />
        </video>
      </a-assets>
<!--------------Szene----------------------------------------->     


      <a-videosphere id="vidsphere" radius="100" src="#video"></a-videosphere>


      <a-image src="#icon_vid" position="-2 2 0" rotation="0 90 0 " onclick="playvideo()" color="red" class="clickable" event-set__enter="_event: mouseenter; color: #33ccff; width: 1.1; height: 1.1;"
           event-set__leave="_event: mouseleave; color: ; width: 1; height: 1;" ></a-image>



<!--------camera---------->    
<a-entity rotation="0 90 0">
  <a-camera user-height="0" wasd-controls-enabled="false" look-controls>
 </a-camera>  
</a-entity>  


    </a-scene>

        <script type = "text/javascript">

    function playvideo() {
        var videoEl_1 = document.querySelector('#video');

            videoEl_1.play();

        }
</script>

  </body>
</html>

Answer 1

Webkit policy仅允许自动播放无声视频。您需要像屏幕上的水龙头一样的用户手势才能播放有声视频。为了方便起见，从Webkit博客文章中进行复制：

关于用户手势要求的注释：当我们说某个动作必须“由于用户手势”而发生时，我们指的是导致对video.play（）的调用的JavaScript，例如，必须直接来自处理触摸，点击，双击或按键事件的处理程序。因此，button.addEventListener（'click'，（）=> {video.play（）;}）将满足用户手势要求。 video.addEventListener（'canplaythrough'，（）=> {video.play（）;}）不会。

Answer 2

侦听器正常工作（触发“ it clicks_1”），但视频没有启动，并且出现以下错误：未处理的承诺拒绝：NotAllowedError：在当前上下文中，用户代理或平台不允许该请求，这可能是因为用户拒绝了权限。 HTML：

<a-image id="playbutton_1" class="clickable" position="-5 0 0" width="2" height="2" rotation="0 -90 0" foo></a-image>

js：

  AFRAME.registerComponent("foo", {
    init: function() {
      var playthisvid_1 = document.querySelector('#playbutton_1');
      var videoEl_1 = document.querySelector('#intro');

  playthisvid_1.addEventListener('click', () => {

        videoEl_1.play();
        console.log("it clicks_1");
      })
    }
  })

Aframe视频只能在ios上静音播放

2 个答案: