MonacaでVRコンテンツを再生する仕組みを構築しております。
A-Frameを利用してVR動画の再生を行いたいと考えております。
再生はできるのですが、全くフレームレートが出ず、カクカクになってしまいます。
ビルドデバッグ、カスタムビルドデバッグでも動作は変わりません。
サンプルで使用している動画は以下の動画です。
https://s3-ap-northeast-1.amazonaws.com/panora-t-download/wp-content/uploads/2014/11/20141103_nogawa.mp4
ソースは以下の通りです。
HTML
1<!DOCTYPE HTML> 2<html> 3 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6 <meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes" name="viewport"> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <title></title> 10 <!--css--> 11 <link rel="stylesheet" href="../../css/style.css"> 12 <link rel="stylesheet" href="../../../css/styleb.css"> 13 <!--scripts--> 14 <script src="../../../js/jquery.min.js"></script> 15 <script src="../../../js/moment.min.js"></script> 16 <script src="../../../js/linq.min.js"></script> 17 <script src="../../js/aframe.min.js"></script> 18</head> 19 20<body class="pos-rel"> 21 <!--VRエリア--> 22 <a-scene id="scene" vr-mode-ui="enabled: true"> 23 <a-entity cursor="rayOrigin: mouse"></a-entity> 24 <a-assets> 25 <!--PANORAMAさんが公開している動画をサンプルとして利用(https://panora.tokyo/panora.tokyo/210/HPC-index.html)--> 26 <video id="video" src="https://s3-ap-northeast-1.amazonaws.com/panora-t-download/wp-content/uploads/2014/11/20141103_nogawa.mp4" preload="auto" loop="false" webkit-playsinline playsinline /> 27 </a-assets> 28 29 <a-videosphere src="#video"></a-videosphere> 30 31 <a-image click-play raycaster="objects: .clickable" id="play" src="./assets/play.png" rotation="0 0 0" position="2 1 -5" ></a-image> 32 <a-image click-pause raycaster="objects: .clickable" id="pause" src="./assets/pause.png" rotation="0 0 0" position="0 1 -5" ></a-image> 33 </a-scene> 34 35</body> 36 37</html>
同じソースでWEBページを作成したところ、そちらの方ではフレームレートの低下は無く、なめらかに再生されました。
CordovaとA-Frameの相性が悪いのでしょうか。
ご存じの方いらっしゃいましたらご教授ください。
あなたの回答
tips
プレビュー