Question

我有多个HTML5视频被控制，我需要更改用户点击的播放器上的播放和暂停图标。

现在为单个玩家执行此操作的方法只是

$('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');

但是当多个玩家的一部分（根据下面的索引列表），如果使用这种简单方法，所有玩家都会受到影响，例如

        function onplayCallback(index) {
        // Event listener for the play/pause button
        playButton[index].addEventListener("click", function() {
            if (popUpPlayer[index].paused == true) {
                popUpPlayer[index].play();
                 $('.glyphicon-play').attr('class', 'glyphicon glyphicon-pause'); <-----here
            } else {
                // Pause the video
                popUpPlayer[index].pause();
                // Update the button text to 'Play'
                 $('.glyphicon-pause').attr('class', 'glyphicon glyphicon-play');
            }
        });

我尝试用

替换上面的行

 $(this).attr('class', 'glyphicon glyphicon-pause');

但问题是这只会添加另一个暂停图标。

有解决方法吗？我尝试了$(this).removeClass()等，但这些方法都不起作用。

为了完整性，这里是html

<div id="video-controls">
            <a href="#" id="play-pause_<?php echo $i+1;?>"><span class="glyphicon glyphicon-play"></span></a> 
            <input type="range" id="seek-bar_1" value="0"> 
            <a href="#" id="btnMute_<?php echo $i+1;?>"><span   class="glyphicon glyphicon-volume-up"></span></a> 
            <input type="range" id="volume-bar_<?php echo $i+1;?>" min="0" max="1" step="0.1" value="1"> 
            <a href="#" id="btnFullscreen_<?php echo $i+1;?>"><span class="glyphicon glyphicon-fullscreen"></span></a>
    </div>

由于

Answer 1

我认为$(this)无法正常工作，因为它指向<a>（currentTarget），但你想要内部<span>？您是否记录了this？

的值

这取决于您的布局，但如果跨度是您的整个按钮，那么e.target应该指向它。

playButton[index].addEventListener("click", function(e) {
   console.log(e.target); // check this is what you want
   var $span = $(e.target);

   if (popUpPlayer[index].paused == true) {
     $span.removeClass('glyphicon-pause').addClass('glyphicon-play');
   } else {
     $span.removeClass('glyphicon-play').addClass('glyphicon-pause');
   }
});

在多个自定义HTML5视频控件中索引图标

1 个答案: