Question

我有一个同时使用视频和音频标签的页面。视频首先播放，然后在视频结束后音频开始播放。

我正试图让每个人的音频停止淡出。我尝试过使用animate函数，但没有任何改变。以下是我的代码：

淡出代码应放在案例119中（按下W时）。音频的ID标签为音频

    $(document).keypress(function(event){

    // This variable holds the video ID
    var video = document.getElementById('video');

    // This variable holds the value of the key pressed
    var keycode = (event.keyCode ? event.keyCode : event.which);

    switch(keycode) {
        // Opening Page - This page features the fashion show poster
        case 113:
            window.location.href = "Opening.html";
            break;

        // Fade Volume
        case 119:
            $('body').fadeOut(1000);
            video.animate({volume: 0.0}, 1000);
            break;

        // This will open the media for Lana's walk
        case 101:
            window.location.href = "Lana.html";
            break;

        // This will open the media for Eden's walk
        case 114:
            window.location.href = "Eden.html";
            break;

        // This will open the media for Laura's walk
        case 116:
            window.location.href = "Laura.html";
            break;

        // This will open the media for the first media performance
        case 121:
            window.location.href = "MediaOne.html";
            break;

        // This will open the media for Kathleen's walk
        case 117:
            window.location.href = "Kathleen.html";
            break;

        // This will open the media for Jazzy's walk
        case 105:
            window.location.href = "Jazzy.html";
            break;

        // This will open the media for Flora's walk
        case 111:
            window.location.href = "Flora.html";
            break;

        // This will open the media for the second media performance
        case 112:
            window.location.href = "MediaTwo.html";
            break;

        // This will open the media Illiana's walk
        case 97:
            window.location.href = "Illiana.html";
            break;

        // This will open the media for Anna's walk
        case 115:
            window.location.href = "Anna.html";
            break;

        // This will open the media for Estelte's walk
        case 100:
            window.location.href = "Estelle.html";
            break;

        // This will open the media for the fianle
        case 102:
            window.location.href = "Finale.html";
            break;

        // This will play or pause the video that is currently playing
        case 32:
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
            break;

        // This default case will return to the opening page in case of an error
        default:
            window.location.href = "Opening.html";
    }

任何帮助都会很棒！

Answer 1

您必须使用jQuery对象：

      $('#video').animate({
        volume: 0.0
      }, 1000);

video变量是一个普通的JavaScript对象，jQuery方法无法识别（在本例中为.animate()）

Reference

段

＆＃13;

$(document).keypress(function(event) {

      // This variable holds the video ID
      var video = document.getElementById('video');

      // This variable holds the value of the key pressed
      var keycode = (event.keyCode ? event.keyCode : event.which);

      switch (keycode) {
        // Opening Page - This page features the fashion show poster
        case 113:
          window.location.href = "Opening.html";
          break;

          // Fade Volume
        case 119:
          $('body').fadeOut(1000);
          $('#video').animate({
            volume: 0.0
          }, 1000);
          break;

          // This will open the media for Lana's walk
        case 101:
          window.location.href = "Lana.html";
          break;

          // This will open the media for Eden's walk
        case 114:
          window.location.href = "Eden.html";
          break;

          // This will open the media for Laura's walk
        case 116:
          window.location.href = "Laura.html";
          break;

          // This will open the media for the first media performance
        case 121:
          window.location.href = "MediaOne.html";
          break;

          // This will open the media for Kathleen's walk
        case 117:
          window.location.href = "Kathleen.html";
          break;

          // This will open the media for Jazzy's walk
        case 105:
          window.location.href = "Jazzy.html";
          break;

          // This will open the media for Flora's walk
        case 111:
          window.location.href = "Flora.html";
          break;

          // This will open the media for the second media performance
        case 112:
          window.location.href = "MediaTwo.html";
          break;

          // This will open the media Illiana's walk
        case 97:
          window.location.href = "Illiana.html";
          break;

          // This will open the media for Anna's walk
        case 115:
          window.location.href = "Anna.html";
          break;

          // This will open the media for Estelte's walk
        case 100:
          window.location.href = "Estelle.html";
          break;

          // This will open the media for the fianle
        case 102:
          window.location.href = "Finale.html";
          break;

          // This will play or pause the video that is currently playing
        case 32:
          if (video.paused) {
            video.play();
          } else {
            video.pause();
          }
          break;

          // This default case will return to the opening page in case of an error
        default:
          window.location.href = "Opening.html";
      }
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

const audio = document.querySelector("audio");

audio.play();
if(audio.paused === false){
  
  var fadeOut = setInterval(function(){

    audio.volume = audio.volume -= 0.1;
    
    if(audio.paused === true){
      clearInterval(fadeOut);
    }

  },500);
  
}

<audio src="https://f001.backblazeb2.com/b2api/v1/b2_download_file_by_id?fileId=4_z21ba257aafcf0ce2568a021f_f114c19c5768b55e7_d20161029_m042628_c001_v0001019_t0022" controls autoplay/>

使用jQuery淡出视频或音频的音频

2 个答案:

段