2016-07-14 3 views
3

私はビデオやvideosphereとA-フレームのシーンを持っている:私のビデオやビデオがA-Frame VRでモバイルで再生されないのはなぜですか?

<a-scene> 
    <a-assets> 
    <video id="video" src="anothervideo.mp4></video> 
    </a-assets> 
    <a-video src="myvideo.mp4></a-video> 
    <a-videosphere src="#video></a-videosphere> 
</a-scene> 

私はiOS版やAndroidでテストするとき、私はちょうど黒い画面を参照してください。デスクトップ上で動作します。ビデオ制限の

答えて

1

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

のiOSのSafariのドキュメント:https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW1

モバイルブラウザはインラインビデオを表示して制限を持っています。 2Dモバイルウェブは、インライン動画の再生にはあまり適していません。

  • メタタグ(Aフレームで完了)を設定する必要があります。インラインビデオ(自動再生の有無にかかわらず)を取得するためのiOSプラットフォームの制限があります。
  • webkit-playsinline属性をvideo要素に設定します。 (iOS 10の場合、playsinlineに改名)
  • ウェブページをiOSのホーム画面に固定します。

そして特定のAndroidデバイスやブラウザ上:ビデオをトリガする

  • ユーザー操作(例えば、クリック/タップを聞きます)。あなたはVRを入力ボタンをクリックして活用することができます。

これらの手順をすべて実行するには、モバイルビデオを再生するための必要な手順(ピンからホーム画面、タップ)について、ユーザーに指示とUIを提供する必要があります。

これらのケースに対処する完全なサンプルを用意しようとします。

彼らはまた、唯一のビデオが一度に再生することができます文書化、およびフォーマット/コーデックには制限があります

Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs. 

iOSのSafariは、最近、次のバージョンでは、インラインビデオのサポートを発表したが、い私たちはそれがどのように活躍するのかを待たなければなりません。 VRボタンを入力し活用といえば

+0

これは私のために働いたM.ワッセン(私の問題は、ビデオとオーディオは、Chromeで自動再生されませんでした)。 あなたのビデオストリームのsrc属性に閉じる見積もりを追加してください - Stack Overflowは6文字未満の編集を許可しませんが、これが完璧な答えであることを止める唯一の方法です:) –

2

、試してみてください。

<a-scene> 
<a-assets> 
    <video id="video" src="anothervideo.mp4"></video> 
</a-assets> 
<a-video class="video" src="myvideo.mp4"></a-video> 
<a-videosphere class="video" src="#video></a-videosphere> 
</a-scene> 

<script> 
    function playVideo() { 
    var els = document.querySelectorAll('.video') 
    Array.prototype.slice.call(els).forEach(function(el) { 
     el.components.material.material.map.image.play() 
    }) 
    } 

    document.querySelector('.a-enter-vr-button').addEventListener('click', playVideo) 
</script> 
2

私はビデオをトリガーするには、Enter VRボタンを取得して少し苦労(mayognaiseのソリューションは、残念ながらそこに私を取得していない)が、最終的に石畳一緒にこのトリックをしたこのスクリプト:

+1

これがどのように質問? – soundslikeodd

関連する問題