使按钮进入其初始状态

现在我已经开始对我的网站中的视频控件进行样式设计，并且遇到了一个小问题。使按钮进入其初始状态

视频部分包含视频列表和视频播放器。每当点击列表中的li元素时，视频播放器的来源将变为点击的视频的来源。在视频播放器的顶部有一个播放按钮，播放过渡到暂停。

我遇到的问题是，每当视频源更改按钮不会回到播放状态。

HTML代码（index.php）：

<div class="control play"> 
    <span class="left"></span><span class="right"></span> 
</div>

这是按钮的造型更少（Less.less）：

.control { 
    @color: #ffb160; 
    @highlight: darken(@color, 10%); 
    @duration: 0.4s; 
    @sin: 0.866; 
    @size: 30px; 
    border: @size*0.1 solid @color; 
    border-radius: 50%; 
    margin: 20px; 
    padding: @size*0.25; 
    width: @size; 
    height: @size; 
    font-size: 0; 
    white-space: nowrap; 
    text-align: center; 
    cursor: pointer; 

    &, .left, .right, &:before { 
     display: inline-block; 
     vertical-align: middle; 
     transition: border @duration, width @duration, height @duration, margin @duration; 
     transition-tiomig-function: cubic-bezier(1, 0, 0, 1); 
    } 

    &:before { 
     content: ""; 
     height: @size; 
    } 

    &.pause { 
     .left, .right { 
      margin: 0; 
      border-left: @size*0.33 solid @color; 
      border-top: 0 solid transparent; 
      border-bottom: 0 solid transparent; 
      height: @size*@sin; 
     } 
     .left { 
      border-right: @size*0.2 solid transparent; 
     } 
    } 

    &.play { 
     @border: @size/4; 
     .left { 
      margin-left: @size/6; 
      border-left: @size*@sin/2 solid @color; 
      border-top: @border solid transparent; 
      border-bottom: @border solid transparent; 
      border-right: 0px solid transparent; 
      height: @size - 2*@border; 
     } 
     .right { 
      margin: 0; 
      border-left: @size*@sin/2 solid @color; 
      border-top: @border solid transparent; 
      border-bottom: @border solid transparent; 
      height: 0px; 
     } 
    } 

    &:hover { 
     border-color: @highlight; 
     .left, .right { 
      border-left-color: @highlight; 
     } 
    } 
}

这是从播放（JQuery.js）过渡到暂停：

$(".control").on('mousedown', function() { 
    if (video.paused == true) { 
     $(this).toggleClass('pause play'); 
     video.play(); 
    } else { 
     $(this).toggleClass('play pause'); 
     video.pause(); 
    } 
});

这是点击触发事件从列表里元素（JQuery.js）：

$('.video-element').click(function(){ 
    var videosource = $(this).find("div.source").html(); 
    var imgsource = $(this).find(".video-thumbnails").attr("src"); 

    $(".control").toggleClass('play'); 
    document.getElementById('video-player').setAttribute('poster',imgsource); 
    document.getElementById('mp4').setAttribute('src','videos/'+videosource + ".mp4"); 
    document.getElementById('ogv').setAttribute('src','videos/'+videosource + ".ogv"); 
    document.getElementById('webm').setAttribute('src','videos/'+videosource + ".webm"); 
    $("#video-player").load(); 
});

我到目前为止已经被添加到$(".control").toggleClass('play');代码关于这不起作用，因为按钮变为要么暂停或播放每一个视频的改变尝试我点击一个新视频。

来源

2016-01-02 Patratel

尝试添加FIDDLE。 – Mayank

当您更改视频的来源时，是否也可以更改播放/暂停按钮的类别？也就是说，在您的“点击”功能，包括

代码更改视频源（完成）。
将按钮类更改为“播放”的代码（使用$(elem).setClass("play")或类似的东西）。

来源

2016-01-02 20:40:41 adilapapaya

感谢我所需要做的就是替换** $（“.control”）。toggleClass（'play'）; ** with ** $（“.control”）。attr（'class'，'control play'） ** – Patratel

使按钮进入其初始状态

回答

相关问题