给视频添加音轨

蓝色精灵aiwa

已于 2024-05-31 11:50:28 修改

阅读量353

点赞数 3

分类专栏： html 文章标签：音视频 html5

于 2024-05-31 11:45:11 首次发布

本文链接：https://blog.csdn.net/weixin_42199383/article/details/139348566

版权

html 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./videojs/css/vjs.zencdn.net_8.5.2_video-js.css">
  <script src="./videojs/js/video.min.js"></script>
  <style>
    .videobox {
      position: relative;
    }

    #my-video {
      width: 1200px;
      max-height: 500px;

    }

    #myAudio {
      position: absolute;
      left: 0;
      z-index: -1;
    }


    .video-js .vjs-tech {
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>

  <div class="videobox">


    <video id="myVideo" class="video-js vjs-default-skin" controls width="500px" height="350px">
      <source src="./mp3/test.mp4">
    </video>
    <!-- autoplay -->
    <audio id="myAudio" controls src="./mp3/A1 (USB PnP Sound Device)output.wav"></audio>

  </div>


  <script>
    var player = videojs('myVideo', {
      preload: 'auto'
    });

    var audio = document.getElementById('myAudio');
    var audioTrackList = player.audioTracks();
    // 获取视频中所有的音轨
    player.ready(function () {
      var currentTime = 0;

      // 当播放器开始播放时
      player.on('play', function () {
        console.log('Video is playing...');
        audio.currentTime = currentTime;
        audio.play();
      });

      // 当播放器暂停时
      player.on('pause', function () {
        console.log('Video is paused...');
        audio.pause();// 音频暂停
      });

      // 当播放器播放结束时
      player.on('ended', function () {
        console.log('Video has ended...');
        audio.ended();// 音频结束
      });

      // 当播放器的播放头到达特定时间点时
      player.on('seeked', function () {
        console.log('Seek operation completed...');
        audio.currentTime = currentTime;
        audio.play();


      });

      // 当播放器的播放头发生变化时
      player.on('timeupdate', function () {
        currentTime = player.currentTime(); // 获取当前播放时间（秒）
        console.log('当前播放时间: ' + currentTime + '秒');
      });


      var tracks = player.audioTracks();

      const usersAudioTrackList = [{
        id: '1',
        kind: 'translation',
        label: '轨道1',
        language: 'kannada',
        url: './mp3/01.mp3',
      },
      {
        id: '2',
        kind: 'translation',
        label: '轨道2',
        language: 'kannada',
        url: './mp3/02.mp3',
      },
      ];

      usersAudioTrackList.forEach(track => {
        player.audioTracks().addTrack(
          new videojs.AudioTrack(track) // Create a track object.
        );
      });


      // 监听音轨变化事件
      tracks.addEventListener('change', function (e) {
        for (let index = 0; index < tracks.length; index++) {
          const element = tracks[index];
          if (element.enabled) {
            var id = element.id;
            var findex = usersAudioTrackList.findIndex(item => item.id == element.id);
            if (findex != -1) {
              var url = usersAudioTrackList[findex].url;
              audio.src = url;
              if (player.paused()) { // 视频暂停中 则不播放音频
                audio.currentTime = currentTime;
                audio.pause();
              } else {
                audio.currentTime = currentTime;
                audio.play(); // 播放音频
              }
            }
            // 启动
            return false
          }
        }
      });
    });

    function playBtn() {
      player.play();
      audio.play();
    }

  </script>

</body>

</html>

效果

也可以点击此处下载：https://download.csdn.net/download/weixin_42199383/89380814