Video JS-在視頻文件中添加備用音軌

Question

我有一個視頻（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 播放視頻。 我已使用此鏈接 -（如何從我的數組列表中添加多個音軌）在視頻中添加備用音軌，並且我可以在視頻中添加音軌。 但是，當我使用更改軌道圖標切換軌道進行測試時，它沒有播放視頻中的音頻，而英語和配音軌道沒有問題。 '''

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

Answer 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 ）。

Video JS-在視頻文件中添加備用音軌

問題描述

1 個解決方案

解決方案1
0 2021-05-03 06:04:02

Video JS-在視頻文件中添加備用音軌

問題描述

1 個解決方案

解決方案1 0 2021-05-03 06:04:02

解決方案1
0 2021-05-03 06:04:02