Angular ogv.js音频播放器控件 [英] Angular ogv.js audio player controls

问题描述

我正在Angular 8中使用 ogv.js .我想播放ogg音频在我的浏览器(Safari)中.

I'm using ogv.js in Angular 8. I want to play ogg audio in my browser (Safari).

在浏览器中，仅在播放音频时没有任何控件(播放/暂停等)?

In the browser, just the audio is being played without any controls (play/pause etc.)?

我的组件ts文件具有:

My component ts file has:

  const ogv = require('ogv');

  @ViewChild('ogvContainer', { static: true }) ogvContainer: ElementRef;

  ogv.OGVLoader.base = '../../assets/js/ogv';
  let player = new ogv.OGVPlayer();
  this.ogvContainer.nativeElement.appendChild(player);
  let blob = new Blob([new Uint8Array(decodedData)]);
  player.src = URL.createObjectURL(blob);
  player.play();

我的html组件具有:

My component html has:

 <div class="ogvContainer" #ogvContainer></div>

在ogvContainer div中，创建了另一个元素.

Inside the ogvContainer div, another element is created.

<ogvjs class="ogvjs1" src="blob:http://localhost:4200/681e9637-5f93-4a0c-929e-678dd5e71529"> 
   <canvas style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: contain;"></canvas>
</ogvjs>

但是什么也不显示.它只是消耗空的空间. 如何在UI上显示播放器控件?

But nothing is displayed. It just consumes empty space. How can I show the player controls on UI?

推荐答案

要使控件出现在组件的模板中，您需要添加以下行:

In order to have controls appear in the template of the component you would need to add the following line:

containerElement.appendChild(player);

containerElement将是您在模板中创建的任何内容

The containerElement will be any that you create in your template

如ogv.js文档

这篇关于Angular ogv.js音频播放器控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！