如何在 video.js 中添加音轨?
How to add an audiotrack in video.js?
在 video.js 的例子中我发现了这个:
var track = new videojs.AudioTrack({
id: 'my-spanish-audio-track',
kind: 'translation',
label: 'Spanish',
language: 'es'
});
我的问题是,如果没有 src
属性,它是如何添加的,它从哪里获取轨道本身?我的意思是源本身,如 mp3
或 wav
file
<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>
无法像使用文本轨道那样通过 HTML 添加音轨。它们必须以编程方式添加。 Video.js 仅存储轨道表示。 Video.js 不处理切换音轨以进行播放,必须在其他地方处理 - 例如,videojs-contrib-hls 处理切换音轨以支持通过 UI.
进行音轨选择
在 video.js 的例子中我发现了这个:
var track = new videojs.AudioTrack({
id: 'my-spanish-audio-track',
kind: 'translation',
label: 'Spanish',
language: 'es'
});
我的问题是,如果没有 src
属性,它是如何添加的,它从哪里获取轨道本身?我的意思是源本身,如 mp3
或 wav
file
<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>
无法像使用文本轨道那样通过 HTML 添加音轨。它们必须以编程方式添加。 Video.js 仅存储轨道表示。 Video.js 不处理切换音轨以进行播放,必须在其他地方处理 - 例如,videojs-contrib-hls 处理切换音轨以支持通过 UI.
进行音轨选择