Androidブラウザで<a-videosphere>が再生されていません

私はaFrameプロジェクトを作成し、このプロジェクトで360ビデオを添付しようとしています。私が直面した問題は、360本のビデオがデスクトップのGoogle Chromeで動作していたことです。しかし、それは私のAndroidの携帯電話のChromeやFirefoxで動作していません。ここでAndroidブラウザで<a-videosphere>が再生されていません

は、ソースコード

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>360 Videoss</title> 
 
    <meta name="description" content="360 Video — A-Frame"> 
 
    <script src="aframe.js"></script> 
 
\t <script src="aframe.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <a-scene> 
 
     <a-assets> 
 
\t \t <video id="video" src="vid.mp4"></video> 
 
     </a-assets> 
 
     <a-videosphere src="#video" rotation="0 180 0" loop webkit-playsinline></a-videosphere> 
 
    </a-scene> 
 
    </body> 
 
</html>

サンキューさ

出典

2016-07-11 Amer S. Alkatheri

チェックhttps://aframe.io/faq/#why-does-my-video-not-play-on-mobile

モバイルブラウザはインライン映像を表示して制限があります。そのため（自動再生の有無にかかわらず）、インラインビデオを取得するために、iOSのプラットフォーム制限の

、我々はしなければならない：

メタタグを設定します。 webkit-playsinline属性をvideo要素に設定します。ウェブページをiOSのホーム画面に固定します。特定のAndroid搭載端末やブラウザでは、次の操作を行う必要があります。

動画をトリガーするためのユーザーの操作（クリックやタップなど）が必要です。これらの問題はGitHubに提出されています。

モバイルビデオを再生するために必要な手順（ピンからホームスクリーン、タップ）を指示し、ユーザーに表示します。ビデオを再生するためにユーザーによってトリガされたイベントをルーティングするための、すぐに使用できるコンポーネント。

出典

2016-07-13 17:55:13 ngokevin

@ngokevinによれば、ブラウザは基本的にユーザの前向きなやり取りがない限り、何も自動再生しません。

私にとっては、すべてのメディア（オーディオ&ビデオ）アセットから自動再生を削除し、ボタンをクリックするだけですべてをトリガーする機能を作成することができました。

<head> 
    <meta charset="utf-8"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script> 
    <style> 
     #play-button{ 
      position: fixed; 
      top: calc(50% - 1em); 
      left: calc(50% - 100px); 
      width: 200px; 
      height: 2em; 
      z-index: 10; 
     } 
    </style> 
    </head> 
    <body> 
    <button id="play-button">Begin Your Experience</button> 
    <a-scene> 
     <a-assets> 
      <!-- VIDEO AND AUDIO ASSETS --> 
      <audio id="n1" src="snd/narration.mp3" autoplay="false" preload="auto"> 
      <video id="v1" src="video/sky.mp3" preload="auto" autoplay loop crossorigin webkit-playsinline></video> 
     </a-assets> 
     <!-- VIDEO AND AUDIO ENTITIES --> 
     <a-videosphere id="theVideo" autoplay="false" src="#v1" rotation="0 90 0" radius="400"></a-videosphere> 
     <a-sound id="theAudio" src="#n1" autoplay="false" position="0 0 0" volume="1"></a-sound> 
    </a-scene> 
</body> 
<script> 

// Play button, required by browsers to grab user interaction before autoplaying videos. 
document.querySelector('#play-button').addEventListener("click", function(e){ 
startStuff(); // launch the first voice over 
this.style.display = 'none'; 
}, false); 

function startStuff(){ 
    var theVideo = document.querySelector('#n1'); 
    theVideo.play(); 

    var theAudio = document.querySelector('#v1'); 
    theAudio.components.sound.playSound(); 
} 
</script>

出典

2016-10-03 23:33:53

Androidブラウザで<a-videosphere>が再生されていません

答えて

関連する問題