Aframe视频只能在ios上静音播放 [英] Aframe video only plays muted on ios
问题描述
我尝试在一个框架中播放360度视频，它在android和台式机上都能正常工作，但在ios上却无法正常工作。如果我将视频静音，则视频的开始有效，但是我需要声音。一些想法如何解决？这是我的代码： https://jsfiddle.net/237s96ka/1/
i try playing a 360-video in aframe and it works fine on android and desktop but on ios it dont work. If i mute the video the starting of the video works but i need the sound. Some ideas how to fix that? Here my code: 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>
推荐答案
Webkit政策仅允许自动播放无声视频。您需要像屏幕上的水龙头一样的用户手势才能播放有声视频。为了方便起见，从Webkit博客文章中进行了复制：
Webkit policy only allows video autoplay for silent videos. You need a user gesture like a tap on the screen to play videos with sound. Copying from the Webkit blog post for convenience:
关于用户手势要求的注释：当我们说某个动作一定已经发生时例如，用户手势的结果，我们的意思是，导致对video.play（）的调用的JavaScript必须直接来自触摸端，单击，双击或keydown事件的处理程序。因此，button.addEventListener（'click'，（）=> {video.play（）;}）可以满足用户手势要求。 video.addEventListener（'canplaythrough'，（）=> {video.play（）;}）不会。
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.
这篇关于Aframe视频只能在ios上静音播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
