带有前进和后退按钮的 JWPlayer答案

【问题标题】：JWPlayer with forward and rewind buttons带有前进和后退按钮的 JWPlayer
【发布时间】：2016-11-03 15:43:05
【问题描述】：

我将 jwplayer 用于我的一个项目。现在要求规定播放器应附加“FORWARD”和“REWIND”按钮，以便轻松浏览视频。

我查看了文档，但除了“寻找”之外没有找到任何东西。

希望收到你们的来信。

【问题讨论】：

标签： jwplayer

【解决方案1】：

对于 JW Player 7.3，您可以通过 JS 和 CSS 做到这一点！只要确保你有两张图片：

/icons/play-backward-hhu.png

和

/icons/play-forward-hhu.png

CSS：

.jumpForward {
    background-image: url('/icons/play-forward-hhu.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: initial !important;

    display: table-cell !important;
    padding-bottom: 100% !important;
    padding-right: 16% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 auto !important;       
 }

.jumpBackward {
    background-image: url('/icons/play-backward-hhu.png') !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: initial !important;
    color: rgba(240, 255, 255, 0) !important;
    padding-left: 16% !important;
    padding-bottom: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin: 0 auto !important;
 }

.jw-reset {
    line-height: 2em !important;
 }

.jw-skin-seven .jw-icon-display {
    display: table-cell !important; 
    font-size: 4em !important;  
}

.jw-display-icon-container {
    margin: -3.75em auto 0 !important;
    top: 50% !important;
    cursor: pointer !important;
}

.jw-display-icon-container img{
    width: auto  !important; 
    height: auto !important;
    max-width: 120px !important;
    max-height: 100px !important;
}

JS：

   <script type="text/javascript">
        var playerInstance = jwplayer('video');
        playerInstance.setup({
           ... you config here ...
        });
    </script>

<script type="text/javascript">  

    function jumpBySeconds(seksToJump) {
        var time = playerInstance.getPosition() + seksToJump;
        if(time < 0) { 
            time = 0; 
        }
        playerInstance.seek(time);
    }

    function displayButtons() {
        var playButton = document.getElementsByClassName('jw-controls jw-reset')[0];
        playButton.style.display = "block";
    }

    function hideButtons() {
        var playButton = document.getElementsByClassName('jw-controls jw-reset')[0];
        playButton.style.display = "none";
    }

    function addControlbarListeners(){
        var timer;
        var player = document.getElementsByClassName('jwplayer')[0];
        player.onmouseover = function(){displayButtons();}; 
        player.onmouseout = function(){hideButtons();};
        player.addEventListener("mousemove",function(){
            displayButtons();
            clearTimeout(timer);
            timer=setTimeout(mouseStopped,2000);
        });

        function mouseStopped(){                               
            hideButtons();
        }
    }

    function addPlayForwardAndBackwardButtons(){
        // add play 5 sek back button 
        var playBack = document.createElement("img");
        playBack.id = "play10sekback";
        playBack.setAttribute('class','jw-icon jw-icon-display jw-button-color jumpBackward jw-reset');   
        playBack.setAttribute('onclick','jumpBySeconds(-10)');

        var middleBar = document.getElementsByClassName('jw-display-icon-container jw-reset')[0];
        middleBar.appendChild(playBack);
        middleBar.setAttribute('style',"background-color:rgba(0, 0, 0, 0.0); border: 0px; display: flex;");
        var playButton = middleBar.childNodes[1];
        middleBar.removeChild(playButton);
        middleBar.appendChild(playButton);

        // add play 5 sek forward button 
        var playForward = document.createElement("img");
        playForward.id = "play10sekforward";
        playForward.setAttribute('class','jw-icon jw-button-color jw-icon-display jw-reset jumpForward');
        playForward.setAttribute('onclick','jumpBySeconds(10)');

        var middleBar = document.getElementsByClassName('jw-display-icon-container jw-reset')[0];  
        middleBar.appendChild(playForward);                     
        // set icon to center
        middleBar.style.width = "100%";
        middleBar.style.margin = "-1.0em auto 0";
    }

    playerInstance.onPause(function(){
        console.log("video stopped");
    });

    playerInstance.onPlay(function(){
        console.log("video playing...");
    });

    playerInstance.onReady(function(){            
        addPlayForwardAndBackwardButtons();
        addControlbarListeners();           
     });

</script>

【讨论】：

【解决方案2】：

虽然我们在控制栏中没有可用的前进和后退按钮，但除了查找时间线外。您始终可以使用我们的停靠 API 添加停靠按钮（例如，此下载按钮 - http://www.longtailvideo.com/support/jw-player/29404/video-download-button）。您可以使用我们的 JavaScript API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference

制作两个停靠按钮，一个后退 5 秒，一个前进 5 秒

【讨论】：