Aframe 视频仅在 ios 静音播放

Question

我尝试在 aframe 中播放 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 博客 post 复制：

A note about the user gesture requirement: when we say that an action must have happened “as a result of a user gesture”, we mean that the JavaScript which resulted in the call to video.play(), for example, must have directly resulted from a handler for a touchend, click, doubleclick, or keydown event. So, button.addEventListener('click', () => { video.play(); }) would satisfy the user gesture requirement. video.addEventListener('canplaythrough', () => { video.play(); }) would not.

Answer 2

监听器工作（触发 "it clicks_1"）但视频无法启动，它给我这个错误： Unhandled Promise Rejection: 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 静音播放

Aframe video only plays muted on ios

iphone

audio

ios

aframe