如何在 video.js 中添加音轨？答案

【问题标题】：How to add an audiotrack in video.js?如何在 video.js 中添加音轨？
【发布时间】：2021-06-18 20:57:58
【问题描述】：

在 video.js 的示例中，我发现了这个：

var track = new videojs.AudioTrack({
  id: 'my-spanish-audio-track',
  kind: 'translation',
  label: 'Spanish',
  language: 'es'
});

我的问题是，如果没有src 属性，它是如何添加的，它从哪里获得轨道本身？我的意思是源本身就像mp3 或wav 文件

来自文档：http://docs.videojs.com/docs/guides/audio-tracks.html

【问题讨论】：

标签： javascript video.js

【解决方案1】：

<audio controls> 然后<source> 标签下的音频源。您应该在此处定义或动态创建此元素。

您可以下载示例声音here.

var player = videojs('my-player');

// Create a track object.
var track = new videojs.AudioTrack({
  id: 'my-spanish-audio-track',
  kind: 'translation',
  label: 'Spanish',
  language: 'es'
});

// Add the track to the player's audio track list.
player.audioTracks().addTrack(track);

<script src="https://vjs.zencdn.net/5.15/video.js"></script>
<link href="https://vjs.zencdn.net/5.15/video-js.css" rel="stylesheet" />


<audio id="my-player" class="video-js" controls>
  <source id="my-spanish-audio-track" src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

动态地；

var myAudio=document.createElement("audio");
myAudio.id="my-player";
myAudio.className="video-js";
myAudio.setAttribute("controls",true);
var mySource1=document.createElement("source");
mySource1.id="my-spanish-audio-track";
mySource1.src="https://www.w3schools.com/html/horse.ogg";
mySource1.type="audio/ogg";

myAudio.appendChild(mySource1);
document.body.appendChild(myAudio);

var player = videojs('my-player');

// Create a track object.
var track = new videojs.AudioTrack({
  id: 'my-spanish-audio-track',
  kind: 'translation',
  label: 'Spanish',
  language: 'es'
});

// Add the track to the player's audio track list.
player.audioTracks().addTrack(track);

<script src="https://vjs.zencdn.net/5.15/video.js"></script>
<link href="https://vjs.zencdn.net/5.15/video-js.css" rel="stylesheet"/>

<body>

</body>

【讨论】：

【解决方案2】：

无法像使用文本轨道那样通过 HTML 添加音轨。它们必须以编程方式添加。 Video.js 仅存储轨道表示。为播放切换音轨不是由 Video.js 处理的，必须在其他地方处理 - 例如，videojs-contrib-hls 处理切换音轨以支持通过 UI 选择音轨。

参考：https://docs.videojs.com/tutorial-audio-tracks.html

【讨论】：