Question

我在Angular 8中使用ogv.js。我想在浏览器（Safari）中播放ogg音频。

在浏览器中，仅在播放音频时没有任何控件（播放/暂停等）？

我的组件ts文件具有：

  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组件具有：

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

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

<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上显示播放器控件？

Answer 1

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

containerElement.appendChild(player);

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

如ogv.js文档

所述，appendChild是如何在模板中创建播放器的？

Angular ogv.js音频播放器控件

1 个答案: