Angular ogv.js audio player controls

问题

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.)?

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();

My component html has:

 <div class="ogvContainer" #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>

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

回答1:

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

containerElement.appendChild(player);

The containerElement will be any that you create in your template

What appendChild does it to create the player in your template as explained in the ogv.js documentation

来源：https://stackoverflow.com/questions/58970499/angular-ogv-js-audio-player-controls