如何製作全寬videojs v5進度條？

我想更改videojs v5控件佈局，以便在vjs-control-bar區域頂部製作一個全寬度進度條，類似於v5以前的播放器皮膚。如何製作全寬videojs v5進度條？

這裏是V5皮膚：

這裏是V5前的皮膚。請注意全寬進度條：

我應該如何繼續？是否有必要修改ProgressControl組件中的component structure tree，還是隻能使用CSS來完成，現有的ProgressControl組件？

我注意到，我可以把它放在上面，通過改變從flex的vjs-progress-controldisplay CSS屬性block，initial或inline但我不能將寬度設置爲100％（其他ProgressControl組件寬度仍在考慮）。我認爲這是因爲vjs-progress-control仍處於容器的彈性流動中。

編輯

我取得了一些進展。我可以用下面的CSS達到預期的效果：

.vjs-progress-control { 
    position: absolute; 
    bottom: 26px; /* The height of the ControlBar minus 4px. */ 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 10px; /* the height must be reduced from 30 to 10px in order to allow the buttons below (e.g. play) to be pushed */ 
} 
.vjs-progress-holder {/* needed to have a real 100% width display. */ 
    margin-left: 0px; 
    margin-right: 0px; 
}

除非你們其中一個人找到一種方法，使其更好，我將在此編輯爲接受的答案時，將被允許。

來源

2015-10-20 Billybobbonnet

我喜歡你的解決方案比接受的答案更好 - 少代碼，它運作良好。其餘的只是絨毛。 – Thomas

在課程名稱前面缺少'.'。 – tmm1

@ tmm1我的壞！我只是修復它。 – Billybobbonnet

DEMO

.vjs-fluid { 
    overflow: hidden; 
    } 
    .vjs-control-bar { 
    display: block; 
    } 
    .vjs-control { 
    position: absolute; 
    } 
    .vjs-progress-control { 
    bottom: 28px; left: 0; 
    height: 10px; 
    width: 100%; 
    } 
    .vjs-progress-holder { 
    position: absolute; 
    left: 0; margin: 0; 
    height: 8px; width: 100%; 
    } 
    .vjs-play-progress, 
    .vjs-load-progress { 
    height: 8px; 
    } 
    .vjs-play-progress:before { 
    font-size: 12px; top: -2px; 
    text-shadow: 0 0 2px black 
    } 
    .vjs-current-time { 
    display: block; 
    left: 35px; 
    } 
    .vjs-time-divider { 
    position: absolute; 
    display: block; 
    left: 70px; 
    } 
    .vjs-remaining-time { 
    display: none; 
    } 
    .vjs-duration { 
    display: block; 
    left: 70px; 
    } 
    .vjs-volume-menu-button { 
    position: absolute; 
    bottom: 0; right: 55px; 
    } 
    .vjs-playback-rate { 
    position: absolute; 
    bottom: 0; right: 28px; 
    } 
    .vjs-fullscreen-control { 
    position: absolute; 
    bottom: 0; right: 0; 
    }

仍然有需要的款式字幕，標題和章節按鈕

來源

2015-10-20 12:16:58 rafaelcastrocouto

這不適用於Chrome之外。其他瀏覽器顯示控制欄和進度欄之間的重疊。以及OP的解決方案也是如此。我不知道重疊的解決方案是什麼，但認爲我會提及它。雖然，你的答案+1。 – Thomas

.video-js .vjs-progress-control { 
    position:absolute; 
    width: 100%; 
    top:-.3em; 
    height:3px; 
    /* deal with resulting gap between progress control and control bar that 
     is the result of the attempt to keep things "clickable" on the controls */ 
    background-color: #2B333F; 
    background-color: rgba(43, 51, 63, 0.7); 
} 

.video-js .vjs-progress-holder { 
    position:absolute; 
    margin:0px; 
    top:0%; 
    width:100%; 
}

這似乎擺脫我在其他瀏覽器中有來自繼承了:hover造型的問題的Video.js。更有成熟的開發人員可能能夠使擴展成爲自下而上的擴展，從而無需圍繞進度控制和顏色位置進行花式步法。

來源

2015-12-03 22:00:44 Thomas

這是一個最小的自定義皮膚（在scss中），它顯示了其餘控件上方的全寬度進度條。這與video.js 5.19.2

.video-js.vjs-custom-skin { 
    .vjs-custom-control-spacer { 
    display: flex; 
    flex: 1 1 auto; 
    } 
    .vjs-time-divider { 
    display: inherit; 
    } 
    .vjs-current-time { 
    margin-left: 1em; 
    } 
    .vjs-current-time, .vjs-duration { 
    display: inherit; 
    padding: 0; 
    } 
    .vjs-remaining-time { 
    display: none; 
    } 
    .vjs-play-progress:before { 
    display: none; 
    } 
    .vjs-progress-control { 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: .5em; 
    top: -.5em; 

    &:hover { 
     height: 1.5em; 
     top: -1.5em; 
    } 
    } 
    .vjs-progress-holder { 
    margin: 0; 
    height: 100%; 
    } 
}

來源

2017-05-03 18:51:01 tmm1

如何製作全寬videojs v5進度條？

回答

相關問題