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

【问题标题】：Video JS- Adding a alternate Audio Track in a video fileVideo JS-在视频文件中添加备用音轨
【发布时间】：2020-05-18 10:32:59
【问题描述】：

我有一个视频 (URL=https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8) 有两个音频源（英文和配音）。我想在该视频中添加备用音频测试（https://cdnjs.cloudflare.com/ajax/libs/ion-sound/3.0.7/sounds/glass.mp3）。我正在使用 Video.js 播放视频。我已使用此链接 -(How do i add multiple audio tracks from my array list) 在视频中添加备用轨道，并且我可以在视频中添加轨道。但是，当我使用更改轨道图标切换轨道进行测试时，它没有播放视频中的音频，而英语和配音轨道没有问题。 '''

<!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/

【问题讨论】：

标签： javascript html audio video video.js

【解决方案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',
      }];

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

【讨论】：