Отображение кнопки "Play" или "Звук" поверх

Question

Имеется index.html (ну и несколько сопутствующих файлов) для вывода видео при отслеживании изображения по nft-маркерам. Работает нормально, но как вы понимаете, видео воспроизводится без звука, так как включен autoplay. Хотелось бы вывести кнопку где-то внизу экрана, чтобы пользователь мог включить звук. Ну или уж забыть об автовоспроизведении и вывести кнопку запуска/паузы видео.

Но вся проблема в том, что кнопка "теряется" после появления , т.е. после отрабатывания arjs-loader. Думаю, дело в css, но как сделать так, чтобы кнопка не пропадала?

Здесь код без кнопки (именно тот, куда я безуспешно пытаюсь ее вставить).

    <script src="/ar/js/aframe.js"></script>
<!--<script src='ar/js/aframe-ar.js'></script>-->
<script src='/ar/js/aframe-ar-nft.js'></script>

<script>
    window.onload = function() {
        AFRAME.registerComponent('videohandler', {
            init: function () {
                var marker = this.el;

                this.vid = document.querySelector("#vid");

                marker.addEventListener('markerFound', function () {
                  
                  this.vid.play();                  
                }.bind(this));

        marker.addEventListener('markerLost', function() {
            this.vid.pause();
            this.vid.currentTime = 0;
        }.bind(this));
            }
        });
    };
</script>  

<style>
    .arjs-loader {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .arjs-loader div {
        text-align: center;
        font-size: 1.25em;
        color: white;
    }
  .media {
    display: flex;
    align-items: flex-start;
  }
  
</style>

<body style='margin : 0px; overflow: hidden;'>
    <div class="arjs-loader">
        <div>Loading, please wait...</div>
    </div>
    <a-scene
        vr-mode-ui="enabled: false;"
        renderer="logarithmicDepthBuffer: true; precision: medium;"
  device-orientation-permission-ui="" 
        embedded="" 
  arjs="debugUIEnabled:false; sourceType:webcam; trackingMethod: best;">

        <a-assets>
          
          
          <video id="vid" autoplay loop muted playsinline class="media" src="/ar/albedo_black/albedob/albedob.mp4"   type="video/mp4">
         
       
          </video>   
        </a-assets>

        <a-nft
            videohandler=""
    type='nft' url='/ar/albedo_black/albedob/albedob-image/albedob'
            smooth="true" smoothCount="5" smoothTolerance="0.01" smoothThreshold="2"
        >
            <a-video
                src="#vid"
                position="65 0 -150"
                rotation="-70 0 0"
                width='200'
                height='200'
         
                >
            </a-video>
        </a-nft>
        <a-entity camera=""></a-entity>
    
    </a-scene>
  
 <script> 
setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
  </script>
 
</body>

Повторюсь, мне нужно хотя бы вставить кнопку, чтобы она не исчезала, а действия на нее повесить, будь то Play или Sound постараюсь уже сам... Спасибо.

БЛОГ НА HUSL

Отображение кнопки "Play" или "Звук" поверх

Ответы (0 шт):