|
|
@@ -282,7 +282,6 @@ const initVideoJSPlayer = async (): Promise<void> => {
|
|
|
children: [
|
|
|
"playToggle", // 播放/暂停按钮
|
|
|
"forward10Button", // 快进 10 秒按钮
|
|
|
- "replayButton", // 回退按钮
|
|
|
"forwardButton", // 快进按钮
|
|
|
"currentTimeDisplay", // 当前时间
|
|
|
"timeDivider", // 时间分隔符
|
|
|
@@ -309,30 +308,9 @@ const initVideoJSPlayer = async (): Promise<void> => {
|
|
|
};
|
|
|
|
|
|
try {
|
|
|
- // 注册快进快退按钮组件
|
|
|
+ // 注册快进按钮组件
|
|
|
const registerSeekButtons = () => {
|
|
|
try {
|
|
|
- // 注册回退按钮
|
|
|
- const ReplayButton = videojs.getComponent("Button");
|
|
|
- class ReplayButtonComponent extends ReplayButton {
|
|
|
- constructor(player: any, options: any) {
|
|
|
- super(player, options);
|
|
|
- (this as any).controlText("回退10秒");
|
|
|
- }
|
|
|
-
|
|
|
- handleClick() {
|
|
|
- const time = (this as any).player().currentTime();
|
|
|
- if (typeof time === "number") {
|
|
|
- (this as any).player().currentTime(Math.max(0, time - 10));
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- buildCSSClass() {
|
|
|
- return `vjs-replay-button ${super.buildCSSClass()}`;
|
|
|
- }
|
|
|
- }
|
|
|
- videojs.registerComponent("ReplayButton", ReplayButtonComponent);
|
|
|
-
|
|
|
// 注册快进按钮
|
|
|
const ForwardButton = videojs.getComponent("Button");
|
|
|
class ForwardButtonComponent extends ForwardButton {
|
|
|
@@ -711,12 +689,26 @@ defineExpose({
|
|
|
:deep(.video-js .vjs-forward-10-button) {
|
|
|
font-size: 1.3em;
|
|
|
position: relative;
|
|
|
+ transition: all 0.2s ease;
|
|
|
}
|
|
|
|
|
|
:deep(.video-js .vjs-forward-10-button::before) {
|
|
|
- content: "\f11d";
|
|
|
- font-family: VideoJS;
|
|
|
+ content: "\e9b1"; /* pi-angle-double-right */
|
|
|
+ font-family: "primeicons", "VideoJS", sans-serif;
|
|
|
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮悬停效果 */
|
|
|
+:deep(.video-js .vjs-forward-10-button:hover) {
|
|
|
+ transform: scale(1.1);
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮激活效果 */
|
|
|
+:deep(.video-js .vjs-forward-10-button:active) {
|
|
|
+ transform: scale(0.95);
|
|
|
}
|
|
|
|
|
|
/* 确保进度条有足够的显示长度 */
|