2016-10-06 13 views
1

aフレームフレームワークを使用してa球で360ビデオを表示しようとしています。次のようにビデオフレームを表示するAframe ios 10

私のコードは次のとおりです。ビデオは、iPhoneのブラウザに表示されていない

<html> 
<head>  
    <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script> 
    <script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script> 
    <title></title> 
</head> 
<body> 
<a-scene> 
    <a-assets 
     <video id="antarctica" playsinline autoplay loop="true" src="130.mp4"> 
    </a-assets> 

      <a-videosphere src="#antarctica"></a-videosphere> 


    <!-- Using the asset management system. --> 


<a-camera position = "0 0 0"> 
    <a-cursor color=#FFFFFF></a-cursor> 
</a-camera> 

</a-scene> 


<script> 

</script> 
</body> 
</html> 

、そしてあなたが見ることができるように私はplaysinline属性を使用してみました。誰かが正しい方向に私を指すことができます(これは、Android上でデスクトップ上に取り組んでいる)

EDIT:?私は私のホーム画面に

答えて

1

Unfortunately, video does not autoplay on mobile browsers yetをページをブックマーク。

いくつかのプロジェクトでは、Aシーンを隠し、ユーザーがシーンを開始するために押す必要があるビデオ要素をページに表示することで解決しました。ユーザーが再生ボタンを押すと、video要素がa-assets要素に移動され、a-sceneが表示され、javascriptでビデオが開始されます。この時点で、ビデオはビデオ空間に表示されます。ただ、iPhoneについてコメントを気づい:

はここ

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Video example</title> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <script src="./bower_components/aframe/dist/aframe.js"></script> 
    <script> 
     window.addEventListener("load", function() { 
      document.querySelector("#video").addEventListener("play", function() { 
       var video = document.querySelector("video"); 
       var assets = document.querySelector("a-assets"); 
       var videosphere = document.querySelector("a-videosphere"); 
       var scene = document.querySelector("a-scene"); 

       assets.appendChild(video); 
       videosphere.setAttribute("src", "#video"); 
       scene.removeAttribute("style"); 
       video.play(); 
      }) 
     }); 
    </script> 
    </head> 
    <body> 
    <video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video> 
    <a-scene> 
     <a-assets></a-assets> 
     <a-videosphere></a-videosphere> 
    </a-scene> 
    </body> 
</html> 

編集は...例です。ホーム画面にブックマークを追加しましたか?

+0

私のOPを編集すると、私はすでにホーム画面にページをブックマークしてみました。 Wilはyoureのソリューションを提供してみてください – user3464409

+0

解決策は、ブラウザでは(ブラウザでは正常に動作しません)ブラウザは私が再生ボタンを押すことをpletしていない(それはダッシュを持っています) – user3464409

関連する問題