A框架：如何在a-scene標簽的內部添加一個按鈕，以在移動設備上播放視頻？
[英]A-Frame: How do I add a button INSIDE of the a-scene tags that plays video on mobile?
問題描述
我創建了一個A-Frame項目，該項目在場景內部具有視頻。 該視頻在台式機和移動設備上均可正常工作。 我遇到的問題是，只有台式機版本允許我在播放視頻的a-scene標簽中有一個按鈕，而移動版本僅允許我在a-scene標簽之外使用按鈕，就像在div包裝器中一樣。 加載和播放視頻以及操作按鈕的邏輯在台式機和移動設備上均可使用，唯一的區別是，當我將邏輯定位於a-scene標簽內的按鈕時。 我很感激視頻是在移動設備上播放的，我真的很想在場景中有一個類似“ VR”的按鈕。 到目前為止，可在移動設備上使用的按鈕更像是VR切換按鈕，用於啟動場景並開始播放視頻。 那並不是我想要的行為。 僅供參考，我在整個場景中都使用相同類型的a圖片按鈕來切換實際圖片和靜態內容，因此效果很好。 似乎在視頻播放方面存在問題。 這個問題是我在此處找到的（已解決）另一個問題的后續措施。
這適用於台式機，但不適用於移動設備：
<body>
<a-scene>
<a-assets>
<img id="buttonImg" src="button.png">
<video id="video" src="video.mp4" webkit-playsinline></video>
</a-assets>
<a-image id="playButton" src="#buttonImg"></a-image>
<a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>
</a-scene>
</body>
這適用於台式機和移動設備：
<body>
<div id="canvas">
<div id="startButton">Play</div>
</div>
<a-scene>
<a-assets>
<img id="buttonImg" src="button.png">
<video id="video" src="video.mp4" webkit-playsinline></video>
</a-assets>
<!--<a-image id="playButton" src="#buttonImg"></a-image>-->
<a-videosphere id="videoShere" loop="true" src="#video"></a-videoshpere>
</a-scene>
</body>
2 個解決方案
解決方案1
0 已采納 2018-02-07 22:54:52
您仍然需要啟動屏幕才能在移動設備上初始化視頻，然后，一旦觸發（通過用戶手勢激活）視頻，您就可以應用A幀事件來播放它。 原因是WebGL事件不被視為用戶操作，而是像JS觸發事件一樣被對待。
Dom對這個問題的描述：
https://github.com/aframevr/aframe/issues/1463#issuecomment-308138947
問題在於A幀場景中的交互不起作用。 瀏覽器無法判斷WebGL內發生了什么，因此必須假定那些事件只是由任意JS生成的。 您需要一個老式的物理touchstart或click事件，該事件由用戶的手指（或Cardboard按鈕）觸發，而不是由保險絲或凝視光標觸發。 游戲手柄按鈕也可能算在內。 我不知道這是一個實時的例子。
這是最后一個示例的修改示例，可能會有所幫助：單擊啟動屏幕中的開始按鈕時，它將播放，然后立即暫停視頻以滿足用戶手勢要求。
然后，我將一個點擊處理程序添加到了播放按鈕（在VR場景內），該按鈕應允許您播放視頻。 和以前一樣，您的里程可能會因不同的瀏覽器而異。
https://glitch.com/edit/#!/a-frame-video-click-play-inside-scene
document.addEventListener("DOMContentLoaded", function(event) {
var scene = document.querySelector("a-scene");
var vid = document.getElementById("video");
var videoShere = document.getElementById("videoShere");
var playButton = document.getElementById("playButton");
if (scene.hasLoaded) {
run();
} else {
scene.addEventListener("loaded", run);
}
playButton.addEventListener('click', function() {
playVideo();
});
function run () {
if(AFRAME.utils.device.isMobile()) {
document.querySelector('#splash').style.display = 'flex';
document.querySelector('#splash').addEventListener('click', function () {
initVideo();
this.style.display = 'none';
})
} else {
initVideo();
}
}
function initVideo () {
vid.play();
vid.pause();
videoShere.components.material.material.map.image.play();
videoShere.components.material.material.map.image.pause();
}
function playVideo () {
vid.play();
videoShere.components.material.material.map.image.play();
}
})
解決方案2
0 2018-02-08 05:29:59
https://www.npmjs.com/package/aframe-gui
使用此npm。 這是用於使用a幀在場景中創建按鈕。 您可以使用此npm添加按鈕。
帶有設備攝像頭的A框架：如何在a場景后面觀看視頻？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.