Warum spielt mein Video oder meine Videosphäre in A-Frame VR nicht auf Mobilgeräten?

Question

Ich habe eine A-Frame-Szene mit einem Video oder 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> 

Wenn ich teste in iOS oder Android, ich sehe nur einen schwarzen Bildschirm. Es funktioniert auf dem Desktop.

Answer 1

prüfen https://aframe.io/faq/#why-does-my-video-not-play-on-mobile

iOS Safari Dokumentation auf Video Einschränkungen: 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

mobile Browser haben ihre Grenzen mit Inline-Video angezeigt wird. Das 2D-Mobile-Web eignet sich nicht sehr gut zum Abspielen von Inline-Videos. Wegen einer iOS-Plattform-Beschränkung, um Inline-Video (mit oder ohne Autoplay) zu erhalten, müssen wir:

Legen Sie den Metatag (von A-Frame).

Legen Sie das webkit-playsinline-Attribut auf das Videoelement fest. (Auf iOS 10, umbenannt in nur playsinline)

Die Webseite an den iOS-Startbildschirm anheften.

Und auf bestimmte Android-Geräte oder Browser:

• Benutzerinteraktion um das Video zu starten (zum Beispiel Hahn/Klick hören). Sie könnten den Klick auf die Schaltfläche VR eingeben nutzen.

Mit all diesen Schritten sollten Sie dem Benutzer Anweisungen und UI für die notwendigen Schritte bereitstellen, um mobiles Video abspielen zu lassen (Pin-to-Homescreen, Tap).

Wir werden versuchen, ein komplettes Beispiel zu haben, dass diese Fälle adressiert.

Sie dokumentieren auch, dass nur ein Video zu einem Zeitpunkt, spielen, und es gibt Einschränkungen für die Format/Codecs:

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 hat vor kurzem angekündigt, die Unterstützung für Inline-Videos in der nächsten Version, aber Wir müssen abwarten, wie das ausgeht.

Answer 2

des Sprechens VR Enter-Taste nutzen, versuchen:

<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

kämpfte ich ein wenig mit der Enter-Taste VR immer um das Video zu starten (mayognaise Lösung leider hat mich nicht dort), aber schließlich gepflasterten zusammen dieses Skript, das den Trick:

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