爲什麼我的視頻或視頻不能在A-Frame VR中在手機上播放？

Question

我有一個A字架場景的視頻或videosphere：

<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測試，我只看到一個黑色的屏幕。它在桌面上運行。

Answer 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移動網絡不適合播放內嵌視頻。由於iOS平臺限制以獲得內聯視頻（帶或不帶自動播放），我們必須：

• 設置元標記（由A-Frame完成）。
• 將webkit-playsinline屬性設置爲視頻元素。 （在iOS 10上，重命名爲playsinline）
• 將網頁固定到iOS主屏幕。

而且對某些Android設備或瀏覽器：

• 用戶交互以觸發視頻（例如，聽抽頭/點擊）。您可以利用Enter 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瀏覽器最近宣佈了在下一版本中內嵌視頻的支持，但我們必須等待，看看如何發揮。

Answer 2

說到利用輸入VR按鈕，嘗試：

<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> 

Answer 3

我有點掙扎與獲得回車VR按鈕來觸發視頻（mayognaise的解決方案很遺憾沒有讓我有），但最終拼湊一起這個腳本，做的伎倆：

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

<script type="text/javascript"> 
    var scene = document.querySelector("a-scene"); 
    var vid = document.getElementById("video"); 

    if (scene.hasLoaded) { 
     run(); 
    } else { 
     scene.addEventListener("loaded", run); 
    } 

    function run() { 
     scene.querySelector(".a-enter-vr-button").addEventListener("click", function(e){ 
      console.log("VR Mode entered"); 
      this.style.display = "none"; 
      vid.play(); 
     }, false); 
    } 
</script>