javascript - 如何在 Impress.js 上聚焦幻灯片时取消视频静音

Question

这些是我的 impress.js 幻灯片。其中 2 个有视频。我只想让焦点幻灯片播放声音。每次播放幻灯片时，我都希望其余幻灯片静音。每张幻灯片都有一个 iframe，其中包含视频。

视频的播放列表脚本是:

function shuffle (array) {
    var i = 0
    , j = 0
    , temp = null

  for (i = array.length - 1; i > 0; i -= 1) {
    j = Math.floor(Math.random() * (i + 1))
    temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

function play_vid() {
    video.src = links[current]
    video.play();
    if(current!=links.length) {
        current++;
    }
}

var video = $("#w-video").get(0);
var current = 0;
var links = [];
playlist = $('#playlist');
tracks = playlist.find('li a');

$.each(tracks, function(){
    links.push($(this).attr('href'));
});
shuffle(links);
play_vid();


video.onended = function(e) {
    play_vid();
};

视频的 html 代码是:

<video id="w-video" class="video-js w-video" muted autoplay controls width=640 height=480></video>
   <ul id="playlist">
   <li><a href="https://gemusteste.novohamburgo.rs.gov.br/temp_videos/[SMS]Filme_Mais_Medicos_1min.mp4">Number One</a>
    <li><a href="https://gemusteste.novohamburgo.rs.gov.br/temp_videos/[SMS]FILME_MeningiteC_e_HPV_1min.mp4">Number Two</a>

Answer 1

impress.js 每次移动到下一步时都会发出一个 impress:stepenter javascript 事件。您应该为此事件编写一个事件监听器，然后在该事件监听器中将视频静音/取消静音/播放/停止。 event.target 是输入的步骤。 See the last examples of DOCUMENTATION.md for more info .

document.addEventListener( "impress:stepenter", function(event){
    if( event.target.id == "step-1" ) {
        // unmute video 1, mute video 2
    }
    else if( event.target.id == "step-2" ) {
        // unmute video 2, mute video 1
    }
    else {
        // mute both videos
    }
});