时间戳

首页 > 解决方案 > AFrame：视频（视频球）结束时如何显示按钮？

javascript - AFrame：视频（视频球）结束时如何显示按钮？

问题描述

我正在尝试检测 mp4 格式的 360 视频是否在显示隐藏的 btn1 之前结束。

<a-videosphere id="videosphere1"
    rotation="0 180 0"
    visible="true"
    src="#vid1"
    show-btn-when-ended="target: #btn1"
    autoplay = "true">
</a-videosphere>

要显示的按钮

<a-entity
            id="btn1"
            geometry = "primative: plane"
            position = "-0.8 3 -12.3"
            rotation = "0 -1 -3"
            scale = "12.5 25 1"
            visible = "false"
            text = "align:center; width: 6; wrapCount:100; color:black;
                    value: CLICK HERE"
            go-toScene-onCLick>
        </a-entity>

脚本不工作。无法使用 javascript 将可见属性更改为 true

AFRAME.registerComponent('show-btn-when-ended', {
init: function () {
    el = this.el;
    this.showBtn= this.showBtn.bind(this);
    el.addEventListener('ended', this.showBtn);
},

showBtn: function(evt) {
    console.log('in window.showBtn');
    var videosphere1 = document.querySelector("#videosphere1")
    var btn1 = document.querySelector('#btn1'); 
    btn1.setAttribute('visible', 'true');
    console.log("Show Button");

   }
})

标签： javascripthtmlaframe360-virtual-reality

解决方案

根据 A-Frame 文档，您应该能够materialvideoended在原语上监听事件<a-videosphere>。

https://aframe.io/docs/0.8.0/components/material.html#events_materialvideoended

所以你应该能够做这样的事情：

videosphere1.addEventListener('materialvideoended', function() {
  // show button
});

我注意到您最初试图target通过组件传递按钮的选择器。您可以通过执行以下操作将其添加到组件的架构中来做到这一点：

schema: {
  target: { type: 'selector', default: '[a-videosphere]' }
}

如果没有定义选择器，它将默认为第一个<a-videosphere>原语。

推荐阅读