视频 JS- 在视频文件中添加备用音轨



我有一个视频(URL=https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8(有两个音频源(英语和配音(。我想为该视频添加备用音频测试(https://cdnjs.cloudflare.com/ajax/libs/ion-声音/3.0.7/声音/玻璃.mp3(。我正在使用视频.js播放视频。我使用此链接-(如何从我的数组列表中添加多个音轨(在视频中添加备用轨道,并且我可以在视频中添加轨道。但是当我使用更改轨道图标切换曲目进行测试时,它没有播放视频中的音频,而英语和配音轨道没有问题。 '''

<!DOCTYPE html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="maat-player" class="video-js vjs-default-skin" controls width="500px" height="350px">
<source src="https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
</video>
<div id="audioTrackChoice">
</div>
<script src="https://vjs.zencdn.net/7.7.6/video.js"></script>
<script>
(function (window, videojs) {
var player = window.player = videojs('maat-player');
var audioTrackList = player.audioTracks();
////////////////////////////add new audi track code//////////
const usersAudioTrackList = [{
id: '1',
kind: 'translation',
label: 'test',
language: 'kannada',
audio: 'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3',
}];
////////////////////////////////////////////////////////////
var audioTrackSelect = document.getElementById("audioTrackChoice");
audioTrackSelect.addEventListener('click', function (event) {
var track = audioTrackList[event.target.id]; console.log(audioTrackList);
console.log('User switched to track ' + track.label);
track.enabled = true; console.log(event.target.id);
});

audioTrackList.on('click', function () {
for (var i = 0; i < audioTrackList.length; i++) {
var track = audioTrackList[i];
if (track.enabled) {
console.log('A new ' + track.label + ' has been enabled!');
}
}
});

audioTrackList.on('addtrack', function () {
console.log('a track has been added to the audio track list');
});


audioTrackList.on('removetrack', function () {
console.log('a track has been removed from the audio track list');
});

player.on('loadeddata', function () {
console.log('There are ' + audioTrackList.length + ' audio tracks');
usersAudioTrackList.forEach(track => {
player.audioTracks().addTrack(
new videojs.AudioTrack(track) // Create a track object.
);
});
for (var i = 0; i < audioTrackList.length; i++) {
var track = audioTrackList[i];
//var option = document.createElement("option");
var elem = document.createElement('input');
elem.type = 'button';
elem.value = track.label;
elem.id = i;
if (track.enabled) {
elem.selected = true;
}
audioTrackSelect.append(elem);
console.log('Track ' + (i + 1));
['label', 'enabled', 'language', 'id', 'kind'].forEach(function (prop) {
console.log("  " + prop + ": " + track[prop]);
});
}
});
}(window, window.videojs));

</script>
</body>
</html>

''' 我们如何在视频中播放我的备用音频。在Video Js中看到很少的帖子,指出无法使用video.js合并音频和视频。如果是这种情况,任何人都可以帮助我获取用于合并音频和视频的库。

工作小提琴 - https://jsfiddle.net/hariommishra/f0e4nbs5/1/

Video.js仅用于播放视频。它仅检测视频文件中已有的音轨。它无助于我们将新的外部音轨添加到视频文件中。

////////////////////////////add new audi track code//////////
const usersAudioTrackList = [{
id: '1',
kind: 'translation',
label: 'test',
language: 'kannada',
audio: 'https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3',
}];

视频.js的音轨列表中没有audio键。您可以访问本教程 (https://docs.videojs.com/tutorial-audio-tracks.html(。

最新更新