softbuilders-react-video-player 1.1.15 → 1.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +126 -126
- package/dist/components/BufferTracker/index.tsx +19 -19
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ChaptersPanal/index.tsx +40 -40
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +1 -1
- package/dist/components/CreateNoteMenu/index.tsx +61 -61
- package/dist/components/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/CurrentTimeTracker/index.tsx +18 -18
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/NoteTooltip/index.tsx +46 -46
- package/dist/components/NotesPanal/index.tsx +34 -34
- package/dist/components/TimeSlider/index.js +13 -13
- package/dist/components/TimeSlider/index.tsx +107 -107
- package/dist/components/TimeSliderContainer/index.tsx +35 -35
- package/dist/components/Tooltip/index.tsx +16 -16
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/components/VideoPlayerComponent/style/style.css +36 -36
- package/dist/styles/tailwind.css +101 -101
- package/package.json +1 -1
@@ -1,107 +1,107 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
2
|
-
import Slider from "../Slider";
|
3
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
4
|
-
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
5
|
-
|
6
|
-
const MIN = 0,
|
7
|
-
MAX = 100;
|
8
|
-
const DEFERENCE = Math.abs(MAX - MIN);
|
9
|
-
const BAR_PERCENTAGE_WIDTH = 0.5;
|
10
|
-
|
11
|
-
type Props = {
|
12
|
-
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
-
};
|
14
|
-
|
15
|
-
const TimeSlider = ({ chapters }: Props) => {
|
16
|
-
const [timeSlider, setTimeSlider] = useState(0);
|
17
|
-
|
18
|
-
const { player, duration, downloadedBufferPercentage } =
|
19
|
-
useSoftBuildersVideoPlayerContext();
|
20
|
-
|
21
|
-
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
22
|
-
const newTimeSlider = Number(e.target.value);
|
23
|
-
setTimeSlider(newTimeSlider);
|
24
|
-
|
25
|
-
const time = (newTimeSlider * duration) / DEFERENCE;
|
26
|
-
|
27
|
-
player?.currentTime(time);
|
28
|
-
};
|
29
|
-
|
30
|
-
useEffect(() => {
|
31
|
-
const intervalId = setInterval(() => {
|
32
|
-
const currentTime = player?.currentTime() || 0;
|
33
|
-
|
34
|
-
const time = (currentTime * DEFERENCE) / duration;
|
35
|
-
|
36
|
-
setTimeSlider(time);
|
37
|
-
}, 1000);
|
38
|
-
|
39
|
-
// Cleanup function to clear the interval
|
40
|
-
return () => clearInterval(intervalId);
|
41
|
-
}, [player, duration]);
|
42
|
-
|
43
|
-
const [maskCuttes, setMaskCuttes] = useState("");
|
44
|
-
|
45
|
-
useEffect(() => {
|
46
|
-
const arr: string[] = ["black 0%"];
|
47
|
-
chapters.forEach((c) => {
|
48
|
-
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
49
|
-
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
50
|
-
arr.push(`black ${startPercentage}%`);
|
51
|
-
arr.push(`transparent ${startPercentage}%`);
|
52
|
-
arr.push(`transparent ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
53
|
-
|
54
|
-
arr.push(`black ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
55
|
-
arr.push(`black ${endPercentage}%`);
|
56
|
-
|
57
|
-
arr.push(`transparent ${endPercentage}%`);
|
58
|
-
arr.push(`transparent ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
59
|
-
|
60
|
-
arr.push(`black ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
61
|
-
});
|
62
|
-
arr.push(`black 100%`);
|
63
|
-
|
64
|
-
setMaskCuttes(arr.toString());
|
65
|
-
}, [chapters, duration]);
|
66
|
-
|
67
|
-
return (
|
68
|
-
<div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
|
69
|
-
<div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
|
70
|
-
<Slider
|
71
|
-
value={timeSlider}
|
72
|
-
handleValueChange={handleValueChange}
|
73
|
-
min={MIN}
|
74
|
-
max={MAX}
|
75
|
-
style={{
|
76
|
-
background: "transparent",
|
77
|
-
}}
|
78
|
-
/>
|
79
|
-
</div>
|
80
|
-
|
81
|
-
<div
|
82
|
-
className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md"
|
83
|
-
style={{
|
84
|
-
background: `
|
85
|
-
linear-gradient(to right,
|
86
|
-
#f97316 0%,
|
87
|
-
#f97316 ${timeSlider}%,
|
88
|
-
#f9731640 ${timeSlider}%,
|
89
|
-
#f9731640 ${downloadedBufferPercentage}%,
|
90
|
-
#30303030 ${timeSlider}%,
|
91
|
-
#30303030 100%
|
92
|
-
)
|
93
|
-
`,
|
94
|
-
maskImage: `
|
95
|
-
linear-gradient(to right,
|
96
|
-
${maskCuttes}
|
97
|
-
)
|
98
|
-
`,
|
99
|
-
maskSize: "100% 100%",
|
100
|
-
maskRepeat: "no-repeat",
|
101
|
-
}}
|
102
|
-
></div>
|
103
|
-
</div>
|
104
|
-
);
|
105
|
-
};
|
106
|
-
|
107
|
-
export default TimeSlider;
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
|
+
import Slider from "../Slider";
|
3
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
4
|
+
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
5
|
+
|
6
|
+
const MIN = 0,
|
7
|
+
MAX = 100;
|
8
|
+
const DEFERENCE = Math.abs(MAX - MIN);
|
9
|
+
const BAR_PERCENTAGE_WIDTH = 0.5;
|
10
|
+
|
11
|
+
type Props = {
|
12
|
+
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
+
};
|
14
|
+
|
15
|
+
const TimeSlider = ({ chapters }: Props) => {
|
16
|
+
const [timeSlider, setTimeSlider] = useState(0);
|
17
|
+
|
18
|
+
const { player, duration, downloadedBufferPercentage } =
|
19
|
+
useSoftBuildersVideoPlayerContext();
|
20
|
+
|
21
|
+
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
22
|
+
const newTimeSlider = Number(e.target.value);
|
23
|
+
setTimeSlider(newTimeSlider);
|
24
|
+
|
25
|
+
const time = (newTimeSlider * duration) / DEFERENCE;
|
26
|
+
|
27
|
+
player?.currentTime(time);
|
28
|
+
};
|
29
|
+
|
30
|
+
useEffect(() => {
|
31
|
+
const intervalId = setInterval(() => {
|
32
|
+
const currentTime = player?.currentTime() || 0;
|
33
|
+
|
34
|
+
const time = (currentTime * DEFERENCE) / duration;
|
35
|
+
|
36
|
+
setTimeSlider(time);
|
37
|
+
}, 1000);
|
38
|
+
|
39
|
+
// Cleanup function to clear the interval
|
40
|
+
return () => clearInterval(intervalId);
|
41
|
+
}, [player, duration]);
|
42
|
+
|
43
|
+
const [maskCuttes, setMaskCuttes] = useState("");
|
44
|
+
|
45
|
+
useEffect(() => {
|
46
|
+
const arr: string[] = ["black 0%"];
|
47
|
+
chapters.forEach((c) => {
|
48
|
+
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
49
|
+
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
50
|
+
arr.push(`black ${startPercentage}%`);
|
51
|
+
arr.push(`transparent ${startPercentage}%`);
|
52
|
+
arr.push(`transparent ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
53
|
+
|
54
|
+
arr.push(`black ${startPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
55
|
+
arr.push(`black ${endPercentage}%`);
|
56
|
+
|
57
|
+
arr.push(`transparent ${endPercentage}%`);
|
58
|
+
arr.push(`transparent ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
59
|
+
|
60
|
+
arr.push(`black ${endPercentage + BAR_PERCENTAGE_WIDTH}%`);
|
61
|
+
});
|
62
|
+
arr.push(`black 100%`);
|
63
|
+
|
64
|
+
setMaskCuttes(arr.toString());
|
65
|
+
}, [chapters, duration]);
|
66
|
+
|
67
|
+
return (
|
68
|
+
<div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
|
69
|
+
<div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
|
70
|
+
<Slider
|
71
|
+
value={timeSlider}
|
72
|
+
handleValueChange={handleValueChange}
|
73
|
+
min={MIN}
|
74
|
+
max={MAX}
|
75
|
+
style={{
|
76
|
+
background: "transparent",
|
77
|
+
}}
|
78
|
+
/>
|
79
|
+
</div>
|
80
|
+
|
81
|
+
<div
|
82
|
+
className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md"
|
83
|
+
style={{
|
84
|
+
background: `
|
85
|
+
linear-gradient(to right,
|
86
|
+
#f97316 0%,
|
87
|
+
#f97316 ${timeSlider}%,
|
88
|
+
#f9731640 ${timeSlider}%,
|
89
|
+
#f9731640 ${downloadedBufferPercentage}%,
|
90
|
+
#30303030 ${timeSlider}%,
|
91
|
+
#30303030 100%
|
92
|
+
)
|
93
|
+
`,
|
94
|
+
maskImage: `
|
95
|
+
linear-gradient(to right,
|
96
|
+
${maskCuttes}
|
97
|
+
)
|
98
|
+
`,
|
99
|
+
maskSize: "100% 100%",
|
100
|
+
maskRepeat: "no-repeat",
|
101
|
+
}}
|
102
|
+
></div>
|
103
|
+
</div>
|
104
|
+
);
|
105
|
+
};
|
106
|
+
|
107
|
+
export default TimeSlider;
|
@@ -1,35 +1,35 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import NotesPanal from "../NotesPanal";
|
3
|
-
import ChaptersPanal from "../ChaptersPanal";
|
4
|
-
import TimeSlider from "../TimeSlider";
|
5
|
-
import {
|
6
|
-
SoftBuildersVideoPlayerChapter,
|
7
|
-
SoftBuildersVideoPlayerNote,
|
8
|
-
} from "../../types";
|
9
|
-
|
10
|
-
type Props = {
|
11
|
-
notes: SoftBuildersVideoPlayerNote[];
|
12
|
-
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
-
};
|
14
|
-
const TimeSliderContainer = ({ notes, chapters }: Props) => {
|
15
|
-
return (
|
16
|
-
<div
|
17
|
-
id="time-slider-container"
|
18
|
-
className="sb-w-full sb-relative sb-flex sb-items-center sb-justify-center"
|
19
|
-
>
|
20
|
-
<div
|
21
|
-
id="notes-panal"
|
22
|
-
className="sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0"
|
23
|
-
>
|
24
|
-
<NotesPanal notes={notes} />
|
25
|
-
</div>
|
26
|
-
|
27
|
-
<div className="sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0">
|
28
|
-
<ChaptersPanal chapters={chapters} />
|
29
|
-
</div>
|
30
|
-
<TimeSlider chapters={chapters} />
|
31
|
-
</div>
|
32
|
-
);
|
33
|
-
};
|
34
|
-
|
35
|
-
export default TimeSliderContainer;
|
1
|
+
import React from "react";
|
2
|
+
import NotesPanal from "../NotesPanal";
|
3
|
+
import ChaptersPanal from "../ChaptersPanal";
|
4
|
+
import TimeSlider from "../TimeSlider";
|
5
|
+
import {
|
6
|
+
SoftBuildersVideoPlayerChapter,
|
7
|
+
SoftBuildersVideoPlayerNote,
|
8
|
+
} from "../../types";
|
9
|
+
|
10
|
+
type Props = {
|
11
|
+
notes: SoftBuildersVideoPlayerNote[];
|
12
|
+
chapters: SoftBuildersVideoPlayerChapter[];
|
13
|
+
};
|
14
|
+
const TimeSliderContainer = ({ notes, chapters }: Props) => {
|
15
|
+
return (
|
16
|
+
<div
|
17
|
+
id="time-slider-container"
|
18
|
+
className="sb-w-full sb-relative sb-flex sb-items-center sb-justify-center"
|
19
|
+
>
|
20
|
+
<div
|
21
|
+
id="notes-panal"
|
22
|
+
className="sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0"
|
23
|
+
>
|
24
|
+
<NotesPanal notes={notes} />
|
25
|
+
</div>
|
26
|
+
|
27
|
+
<div className="sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0">
|
28
|
+
<ChaptersPanal chapters={chapters} />
|
29
|
+
</div>
|
30
|
+
<TimeSlider chapters={chapters} />
|
31
|
+
</div>
|
32
|
+
);
|
33
|
+
};
|
34
|
+
|
35
|
+
export default TimeSliderContainer;
|
@@ -1,16 +1,16 @@
|
|
1
|
-
import React from "react";
|
2
|
-
|
3
|
-
type Props = {
|
4
|
-
open: boolean;
|
5
|
-
children: React.ReactNode;
|
6
|
-
};
|
7
|
-
const Tooltip = ({ open, children }: Props) => {
|
8
|
-
if (!open) return null;
|
9
|
-
return (
|
10
|
-
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
11
|
-
{children}
|
12
|
-
</div>
|
13
|
-
);
|
14
|
-
};
|
15
|
-
|
16
|
-
export default Tooltip;
|
1
|
+
import React from "react";
|
2
|
+
|
3
|
+
type Props = {
|
4
|
+
open: boolean;
|
5
|
+
children: React.ReactNode;
|
6
|
+
};
|
7
|
+
const Tooltip = ({ open, children }: Props) => {
|
8
|
+
if (!open) return null;
|
9
|
+
return (
|
10
|
+
<div className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap">
|
11
|
+
{children}
|
12
|
+
</div>
|
13
|
+
);
|
14
|
+
};
|
15
|
+
|
16
|
+
export default Tooltip;
|
@@ -1,82 +1,82 @@
|
|
1
|
-
import React, {
|
2
|
-
createContext,
|
3
|
-
useContext,
|
4
|
-
useState,
|
5
|
-
ReactNode,
|
6
|
-
useEffect,
|
7
|
-
} from "react";
|
8
|
-
import Player from "video.js/dist/types/player";
|
9
|
-
|
10
|
-
interface SoftBuildersVideoPlayerContextType {
|
11
|
-
player: Player | undefined;
|
12
|
-
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
13
|
-
|
14
|
-
currentTime: number;
|
15
|
-
setCurrentTime: (value: number) => void;
|
16
|
-
|
17
|
-
duration: number;
|
18
|
-
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
19
|
-
|
20
|
-
// isPaused: boolean;
|
21
|
-
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
22
|
-
|
23
|
-
downloadedBufferPercentage: number;
|
24
|
-
downloadedBufferTime: number;
|
25
|
-
setDownloadedBufferTimeufferTime: React.Dispatch<
|
26
|
-
React.SetStateAction<number>
|
27
|
-
>;
|
28
|
-
}
|
29
|
-
|
30
|
-
const SoftBuildersVideoPlayerContext = createContext<
|
31
|
-
SoftBuildersVideoPlayerContextType | undefined
|
32
|
-
>(undefined);
|
33
|
-
|
34
|
-
// Create a provider component
|
35
|
-
export const SoftBuildersVideoPlayerProvider = ({
|
36
|
-
children,
|
37
|
-
}: {
|
38
|
-
children: ReactNode;
|
39
|
-
}) => {
|
40
|
-
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
41
|
-
const [currentTime, setCurrentTime] = useState<number>(0);
|
42
|
-
const [duration, setDuration] = useState<number>(1);
|
43
|
-
// const [isPaused, setIsPaused] = useState(false);
|
44
|
-
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
45
|
-
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
46
|
-
useState(0);
|
47
|
-
|
48
|
-
useEffect(() => {
|
49
|
-
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
50
|
-
}, [downloadedBufferTime]);
|
51
|
-
|
52
|
-
return (
|
53
|
-
<SoftBuildersVideoPlayerContext.Provider
|
54
|
-
value={{
|
55
|
-
player,
|
56
|
-
setPlayer,
|
57
|
-
duration,
|
58
|
-
setDuration,
|
59
|
-
currentTime,
|
60
|
-
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
61
|
-
// isPaused,
|
62
|
-
// setIsPaused,
|
63
|
-
downloadedBufferTime,
|
64
|
-
setDownloadedBufferTimeufferTime,
|
65
|
-
downloadedBufferPercentage,
|
66
|
-
}}
|
67
|
-
>
|
68
|
-
{children}
|
69
|
-
</SoftBuildersVideoPlayerContext.Provider>
|
70
|
-
);
|
71
|
-
};
|
72
|
-
|
73
|
-
// Custom hook to use the context
|
74
|
-
export const useSoftBuildersVideoPlayerContext = () => {
|
75
|
-
const context = useContext(SoftBuildersVideoPlayerContext);
|
76
|
-
if (!context) {
|
77
|
-
throw new Error(
|
78
|
-
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
79
|
-
);
|
80
|
-
}
|
81
|
-
return context;
|
82
|
-
};
|
1
|
+
import React, {
|
2
|
+
createContext,
|
3
|
+
useContext,
|
4
|
+
useState,
|
5
|
+
ReactNode,
|
6
|
+
useEffect,
|
7
|
+
} from "react";
|
8
|
+
import Player from "video.js/dist/types/player";
|
9
|
+
|
10
|
+
interface SoftBuildersVideoPlayerContextType {
|
11
|
+
player: Player | undefined;
|
12
|
+
setPlayer: React.Dispatch<React.SetStateAction<Player | undefined>>;
|
13
|
+
|
14
|
+
currentTime: number;
|
15
|
+
setCurrentTime: (value: number) => void;
|
16
|
+
|
17
|
+
duration: number;
|
18
|
+
setDuration: React.Dispatch<React.SetStateAction<number>>;
|
19
|
+
|
20
|
+
// isPaused: boolean;
|
21
|
+
// setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
22
|
+
|
23
|
+
downloadedBufferPercentage: number;
|
24
|
+
downloadedBufferTime: number;
|
25
|
+
setDownloadedBufferTimeufferTime: React.Dispatch<
|
26
|
+
React.SetStateAction<number>
|
27
|
+
>;
|
28
|
+
}
|
29
|
+
|
30
|
+
const SoftBuildersVideoPlayerContext = createContext<
|
31
|
+
SoftBuildersVideoPlayerContextType | undefined
|
32
|
+
>(undefined);
|
33
|
+
|
34
|
+
// Create a provider component
|
35
|
+
export const SoftBuildersVideoPlayerProvider = ({
|
36
|
+
children,
|
37
|
+
}: {
|
38
|
+
children: ReactNode;
|
39
|
+
}) => {
|
40
|
+
const [player, setPlayer] = useState<Player | undefined>(undefined);
|
41
|
+
const [currentTime, setCurrentTime] = useState<number>(0);
|
42
|
+
const [duration, setDuration] = useState<number>(1);
|
43
|
+
// const [isPaused, setIsPaused] = useState(false);
|
44
|
+
const [downloadedBufferTime, setDownloadedBufferTimeufferTime] = useState(0);
|
45
|
+
const [downloadedBufferPercentage, setDownloadedBufferPercentage] =
|
46
|
+
useState(0);
|
47
|
+
|
48
|
+
useEffect(() => {
|
49
|
+
setDownloadedBufferPercentage((downloadedBufferTime * 100) / duration);
|
50
|
+
}, [downloadedBufferTime]);
|
51
|
+
|
52
|
+
return (
|
53
|
+
<SoftBuildersVideoPlayerContext.Provider
|
54
|
+
value={{
|
55
|
+
player,
|
56
|
+
setPlayer,
|
57
|
+
duration,
|
58
|
+
setDuration,
|
59
|
+
currentTime,
|
60
|
+
setCurrentTime: (value) => setCurrentTime(Math.floor(value)),
|
61
|
+
// isPaused,
|
62
|
+
// setIsPaused,
|
63
|
+
downloadedBufferTime,
|
64
|
+
setDownloadedBufferTimeufferTime,
|
65
|
+
downloadedBufferPercentage,
|
66
|
+
}}
|
67
|
+
>
|
68
|
+
{children}
|
69
|
+
</SoftBuildersVideoPlayerContext.Provider>
|
70
|
+
);
|
71
|
+
};
|
72
|
+
|
73
|
+
// Custom hook to use the context
|
74
|
+
export const useSoftBuildersVideoPlayerContext = () => {
|
75
|
+
const context = useContext(SoftBuildersVideoPlayerContext);
|
76
|
+
if (!context) {
|
77
|
+
throw new Error(
|
78
|
+
"useSoftBuildersVideoPlayerContext must be used within an SoftBuildersVideoPlayerProvider"
|
79
|
+
);
|
80
|
+
}
|
81
|
+
return context;
|
82
|
+
};
|
@@ -1,36 +1,36 @@
|
|
1
|
-
.video-js .vjs-control-bar {
|
2
|
-
background-color: transparent;
|
3
|
-
display: none;
|
4
|
-
}
|
5
|
-
|
6
|
-
.video-js .vjs-big-play-button {
|
7
|
-
background-color: transparent;
|
8
|
-
display: block;
|
9
|
-
border: none;
|
10
|
-
padding: 0px;
|
11
|
-
opacity: 0;
|
12
|
-
transition: opacity 0.5s ease-in-out;
|
13
|
-
}
|
14
|
-
|
15
|
-
.video-js:hover .vjs-big-play-button {
|
16
|
-
background-color: transparent;
|
17
|
-
border: none;
|
18
|
-
padding: 0px;
|
19
|
-
opacity: 1;
|
20
|
-
transition: opacity 0.5s ease-in-out;
|
21
|
-
}
|
22
|
-
|
23
|
-
.vjs-poster {
|
24
|
-
display: inline-block;
|
25
|
-
vertical-align: middle;
|
26
|
-
cursor: pointer;
|
27
|
-
margin: 0;
|
28
|
-
padding: 0;
|
29
|
-
position: absolute;
|
30
|
-
top: 0;
|
31
|
-
right: 0;
|
32
|
-
bottom: 0;
|
33
|
-
left: 0;
|
34
|
-
height: 100%;
|
35
|
-
background-color: black;
|
36
|
-
}
|
1
|
+
.video-js .vjs-control-bar {
|
2
|
+
background-color: transparent;
|
3
|
+
display: none;
|
4
|
+
}
|
5
|
+
|
6
|
+
.video-js .vjs-big-play-button {
|
7
|
+
background-color: transparent;
|
8
|
+
display: block;
|
9
|
+
border: none;
|
10
|
+
padding: 0px;
|
11
|
+
opacity: 0;
|
12
|
+
transition: opacity 0.5s ease-in-out;
|
13
|
+
}
|
14
|
+
|
15
|
+
.video-js:hover .vjs-big-play-button {
|
16
|
+
background-color: transparent;
|
17
|
+
border: none;
|
18
|
+
padding: 0px;
|
19
|
+
opacity: 1;
|
20
|
+
transition: opacity 0.5s ease-in-out;
|
21
|
+
}
|
22
|
+
|
23
|
+
.vjs-poster {
|
24
|
+
display: inline-block;
|
25
|
+
vertical-align: middle;
|
26
|
+
cursor: pointer;
|
27
|
+
margin: 0;
|
28
|
+
padding: 0;
|
29
|
+
position: absolute;
|
30
|
+
top: 0;
|
31
|
+
right: 0;
|
32
|
+
bottom: 0;
|
33
|
+
left: 0;
|
34
|
+
height: 100%;
|
35
|
+
background-color: black;
|
36
|
+
}
|