帶有前進和後退按鈕的JWPlayer

Question

我正在使用jwplayer作爲我的其中一個項目。現在需求聲明播放器應該連接「前進」和「後退」按鈕以輕鬆瀏覽視頻。

我看過文檔，但除「尋求」外沒有找到任何東西。

希望聽到你們。

Answer 1

雖然我們沒有可用的控制欄中的前進和後退按鈕，但不是尋求時間線。您可以隨時使用我們的Dock API添加停靠按鈕（例如，此下載按鈕 - http://www.longtailvideo.com/support/jw-player/29404/video-download-button）。使用我們的JavaScript API，您可以製作兩個停靠按鈕，一個向後移動5秒，另一個向前移動5秒 - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference

Answer 2

對於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>