├── .gitignore ├── example ├── .gitignore ├── index.html ├── tsconfig.json ├── package.json └── index.tsx ├── src ├── types │ └── videojs-hls-quality-selector.d.ts ├── index.tsx ├── components │ ├── LionPlayer.tsx │ └── UncontrolledLionPlayer.tsx ├── constants │ ├── sources.ts │ └── options.ts ├── hooks │ └── usePlayer.tsx ├── utils │ └── hotkeys-handler.ts └── themes │ ├── lion.css │ └── video-js.css ├── tsdx.config.js ├── tsconfig.json ├── .github └── workflows │ └── main.yml ├── LICENSE ├── test └── index.test.tsx ├── .eslintrc.js ├── package.json └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .DS_Store 3 | node_modules 4 | .cache 5 | dist 6 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | .parcel-cache 4 | dist 5 | .netlify 6 | -------------------------------------------------------------------------------- /src/types/videojs-hls-quality-selector.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'videojs-hls-quality-selector'; 2 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | // ANCHOR Styles 2 | import './themes/video-js.css'; 3 | import './themes/lion.css'; 4 | 5 | // ANCHOR Hooks 6 | export { default as usePlayer } from './hooks/usePlayer'; 7 | 8 | // ANCHOR Components 9 | export { default as LionPlayer } from './components/LionPlayer'; 10 | export { default as UncontrolledLionPlayer } from './components/UncontrolledLionPlayer'; 11 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lion Player Demo 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/LionPlayer.tsx: -------------------------------------------------------------------------------- 1 | // ANCHOR React 2 | import React from 'react'; 3 | 4 | // ANCHOR VideoJS 5 | import { VideoJsPlayerOptions, } from 'video.js'; 6 | 7 | // ANCHOR Hooks 8 | import usePlayer from '../hooks/usePlayer'; 9 | 10 | // ANCHOR Components 11 | import UncontrolledLionPlayer from './UncontrolledLionPlayer'; 12 | 13 | export default function LionPlayer( 14 | props?: VideoJsPlayerOptions, 15 | ) { 16 | const { ref } = usePlayer({ ...props }); 17 | 18 | return ; 19 | }; 20 | 21 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": false, 4 | "target": "es5", 5 | "module": "commonjs", 6 | "jsx": "react", 7 | "moduleResolution": "node", 8 | "noImplicitAny": false, 9 | "noUnusedLocals": false, 10 | "noUnusedParameters": false, 11 | "removeComments": true, 12 | "strictNullChecks": true, 13 | "preserveConstEnums": true, 14 | "sourceMap": true, 15 | "lib": ["es2015", "es2016", "dom"], 16 | "baseUrl": ".", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tsdx.config.js: -------------------------------------------------------------------------------- 1 | const postcss = require('rollup-plugin-postcss'); 2 | const autoprefixer = require('autoprefixer'); 3 | const cssnano = require('cssnano'); 4 | 5 | module.exports = { 6 | rollup(config, options) { 7 | config.plugins.push( 8 | postcss({ 9 | plugins: [ 10 | autoprefixer(), 11 | cssnano({ 12 | preset: 'default', 13 | }), 14 | ], 15 | inject: false, 16 | extract: true, 17 | extract: 'lion-skin.min.css', 18 | }) 19 | ); 20 | return config; 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /src/constants/sources.ts: -------------------------------------------------------------------------------- 1 | // ANCHOR VideoJS 2 | import VIDEOJS from 'video.js' 3 | 4 | export const M3U8_SOURCE: VIDEOJS.Tech.SourceObject = { 5 | src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', 6 | type: 'application/x-mpegURL', 7 | }; 8 | 9 | export const MPD_SOURCE: VIDEOJS.Tech.SourceObject = { 10 | src: 'https://vod.lyon.com.ph/file/lyon-vod/processed/bb51a51f70da12c3c2e2d81fbaf83485/h264_master.mpd', 11 | type: 'application/dash+xml', 12 | }; 13 | 14 | export const SOURCES: VIDEOJS.Tech.SourceObject[] = [ 15 | MPD_SOURCE, 16 | M3U8_SOURCE, 17 | ] 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "src", 4 | "types" 5 | ], 6 | "compilerOptions": { 7 | "module": "esnext", 8 | "lib": [ 9 | "dom", 10 | "esnext" 11 | ], 12 | "importHelpers": true, 13 | "declaration": true, 14 | "sourceMap": true, 15 | "rootDir": "./src", 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noImplicitReturns": true, 20 | "noFallthroughCasesInSwitch": true, 21 | "moduleResolution": "node", 22 | "baseUrl": "./", 23 | "paths": { 24 | "*": [ 25 | "src/*", 26 | "node_modules/*" 27 | ] 28 | }, 29 | "jsx": "react", 30 | "esModuleInterop": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/components/UncontrolledLionPlayer.tsx: -------------------------------------------------------------------------------- 1 | // ANCHOR React 2 | import React from "react"; 3 | 4 | export interface IUncontrolledPlayerProps { 5 | playerRef: React.LegacyRef 6 | } 7 | 8 | export default function UncontrolledLionPlayer( 9 | { playerRef }: IUncontrolledPlayerProps 10 | ) { 11 | return ( 12 |
13 | 23 |
24 | ) 25 | }; 26 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "main": "dist/index.html", 5 | "license": "MIT", 6 | "scripts": { 7 | "prebuild": "rm -rf dist", 8 | "start": "yarn run prebuild && parcel index.html", 9 | "build": "parcel build index.html --dist-dir dist", 10 | "login": "netlify login", 11 | "deploy": "parcel build index.html && netlify deploy", 12 | "deploy:prod": "netlify deploy --prod" 13 | }, 14 | "dependencies": { 15 | "react-app-polyfill": "^1.0.0" 16 | }, 17 | "alias": { 18 | "react": "../node_modules/react", 19 | "react-dom": "../node_modules/react-dom/profiling", 20 | "scheduler/tracing": "../node_modules/scheduler/tracing-profiling" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^16.9.11", 24 | "@types/react-dom": "^16.8.4", 25 | "netlify-cli": "^3.13.4", 26 | "parcel": "^2.0.0-beta.2", 27 | "typescript": "^3.4.5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: [push] 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | 7 | steps: 8 | - name: Begin CI... 9 | uses: actions/checkout@v2 10 | 11 | - name: Use Node 12 12 | uses: actions/setup-node@v1 13 | with: 14 | node-version: 12.x 15 | 16 | - name: Use cached node_modules 17 | uses: actions/cache@v1 18 | with: 19 | path: node_modules 20 | key: nodeModules-${{ hashFiles('**/yarn.lock') }} 21 | restore-keys: | 22 | nodeModules- 23 | 24 | - name: Install dependencies 25 | run: yarn install --frozen-lockfile 26 | env: 27 | CI: true 28 | 29 | - name: Lint 30 | run: yarn lint 31 | env: 32 | CI: true 33 | 34 | - name: Test 35 | run: yarn test --ci --coverage --maxWorkers=2 36 | env: 37 | CI: true 38 | 39 | - name: Build 40 | run: yarn build 41 | env: 42 | CI: true 43 | -------------------------------------------------------------------------------- /example/index.tsx: -------------------------------------------------------------------------------- 1 | import 'react-app-polyfill/ie11'; 2 | import * as React from 'react'; 3 | import * as ReactDOM from 'react-dom'; 4 | import { LionPlayer, UncontrolledLionPlayer, usePlayer } from '../src/index'; 5 | import { SOURCES } from '../src/constants/sources'; 6 | 7 | const App = () => { 8 | const [currentSource, setCurrentSource] = React.useState(SOURCES[1]); 9 | const { ref } = usePlayer({ 10 | sources: [SOURCES[1]] 11 | }); 12 | 13 | return ( 14 |
15 |

Default Usage

16 | 17 |

Changing Sources

18 | 19 | 24 | 29 |

Uncontrolled Player

30 | 31 |
32 | ); 33 | }; 34 | 35 | ReactDOM.render(, document.getElementById('root')); 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Prince Neil Cedrick Castro 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/constants/options.ts: -------------------------------------------------------------------------------- 1 | // ANCHOR VideoJS 2 | import { VideoJsPlayerOptions } from 'video.js' 3 | 4 | export const DEFAULT_OPTIONS: VideoJsPlayerOptions = { 5 | controls: true, 6 | controlBar: { 7 | children: [ 8 | 'playToggle', 9 | 'volumePanel', 10 | 'currentTimeDisplay', 11 | 'timeDivider', 12 | 'durationDisplay', 13 | 'progressControl', 14 | 'liveDisplay', 15 | 'customControlSpacer', 16 | 'chaptersButton', 17 | 'descriptionsButton', 18 | 'subsCapsButton', 19 | 'audioTrackButton', 20 | 'playbackRateMenuButton', 21 | 'fullscreenToggle', 22 | ], 23 | progressControl: { 24 | seekBar: true 25 | } 26 | }, 27 | autoplay: false, 28 | fluid: true, 29 | inactivityTimeout: 2500, 30 | preload: 'auto', 31 | width: 100, 32 | playbackRates: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2], 33 | html5: { 34 | vhs: { 35 | enableLowInitialPlaylist: true, 36 | smoothQualityChange: true, 37 | overrideNative: true, 38 | }, 39 | }, 40 | plugins: { 41 | qualityLevel: {}, 42 | hlsQualitySelector: { 43 | displayCurrentQuality: true, 44 | }, 45 | }, 46 | }; 47 | -------------------------------------------------------------------------------- /test/index.test.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import { LionPlayer, UncontrolledLionPlayer } from '../src/index'; 4 | import { M3U8_SOURCE, MPD_SOURCE } from '../src/constants/sources'; 5 | 6 | describe('render controlled Lion Player', () => { 7 | it('renders without crashing', () => { 8 | const div = document.createElement('div'); 9 | ReactDOM.render(, div); 10 | ReactDOM.unmountComponentAtNode(div); 11 | }); 12 | it('mpd renders without crashing', () => { 13 | const div = document.createElement('div'); 14 | ReactDOM.render(, div); 15 | ReactDOM.unmountComponentAtNode(div); 16 | }); 17 | it('m3u8 renders without crashing', () => { 18 | const div = document.createElement('div'); 19 | ReactDOM.render(, div); 20 | ReactDOM.unmountComponentAtNode(div); 21 | }); 22 | }); 23 | 24 | describe('render uncontrolled Lion Player', () => { 25 | it('renders without crashing', () => { 26 | const div = document.createElement('div'); 27 | const playerRef = React.createRef(); 28 | 29 | ReactDOM.render(, div); 30 | ReactDOM.unmountComponentAtNode(div); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | node: true, 6 | }, 7 | extends: [ 8 | 'airbnb', 9 | 'airbnb/hooks', 10 | "plugin:@typescript-eslint/eslint-recommended", 11 | "plugin:@typescript-eslint/recommended", 12 | "plugin:@typescript-eslint/recommended-requiring-type-checking", 13 | "plugin:import/errors", 14 | "plugin:import/warnings", 15 | "plugin:import/typescript", 16 | ], 17 | globals: { 18 | Atomics: 'readonly', 19 | SharedArrayBuffer: 'readonly', 20 | }, 21 | parser: '@typescript-eslint/parser', 22 | parserOptions: { 23 | project: "./tsconfig.json", 24 | ecmaFeatures: { 25 | jsx: true, 26 | }, 27 | ecmaVersion: 2018, 28 | sourceType: 'module', 29 | }, 30 | plugins: [ 31 | '@typescript-eslint', 32 | ], 33 | rules: { 34 | "@typescript-eslint/interface-name-prefix": "off", 35 | "@typescript-eslint/no-explicit-any": "off", 36 | "@typescript-eslint/explicit-function-return-type": "off", 37 | "no-param-reassign": "off", 38 | "import/extensions": [ 39 | "error", 40 | "ignorePackages", 41 | { 42 | "js": "never", 43 | "ts": "never", 44 | } 45 | ], 46 | "import/no-default-export": "error", 47 | "import/prefer-default-export": "off", 48 | }, 49 | }; 50 | -------------------------------------------------------------------------------- /src/hooks/usePlayer.tsx: -------------------------------------------------------------------------------- 1 | // ANCHOR React 2 | import { useEffect, useRef, useState } from 'react'; 3 | 4 | // ANCHOR VideoJS 5 | import VIDEOJS, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js' 6 | import videoJsContribQualityLevels from 'videojs-contrib-quality-levels' 7 | import videoJsHlsQualitySelector from 'videojs-hls-quality-selector' 8 | 9 | // ANCHOR Utils 10 | import { HOTKEYS_HANDLER } from '../utils/hotkeys-handler'; 11 | 12 | // ANCHOR Constants 13 | import { DEFAULT_OPTIONS } from '../constants/options'; 14 | 15 | export default function usePlayer( 16 | options: VideoJsPlayerOptions, 17 | ) { 18 | const ref = useRef(null); 19 | const [player, setPlayer] = useState(null) 20 | 21 | useEffect(() => { 22 | VIDEOJS.registerPlugin('qualityLevel', videoJsContribQualityLevels) 23 | VIDEOJS.registerPlugin('hlsQualitySelector', videoJsHlsQualitySelector) 24 | }, []) 25 | 26 | useEffect(() => { 27 | const vjsPlayer = ref.current 28 | ? VIDEOJS(ref.current, { 29 | ...DEFAULT_OPTIONS, 30 | ...options, 31 | userActions: { 32 | hotkeys: (event) => { 33 | HOTKEYS_HANDLER(event, vjsPlayer) 34 | } 35 | }, 36 | }, () => { 37 | if (vjsPlayer) { 38 | setPlayer(vjsPlayer); 39 | 40 | if (options.sources) { 41 | vjsPlayer.src(options.sources); 42 | } else if (options.src) { 43 | vjsPlayer.src(options.src) 44 | } 45 | 46 | vjsPlayer.currentTime(0); 47 | vjsPlayer.load(); 48 | } 49 | }) 50 | : null; 51 | 52 | return () => { 53 | if (vjsPlayer) { 54 | vjsPlayer.reset(); 55 | } 56 | }; 57 | }, [options]); 58 | 59 | return { 60 | ref, 61 | player, 62 | }; 63 | }; 64 | -------------------------------------------------------------------------------- /src/utils/hotkeys-handler.ts: -------------------------------------------------------------------------------- 1 | // ANCHOR VideoJS 2 | import VIDEOJS, { VideoJsPlayer } from 'video.js' 3 | 4 | export const HOTKEYS_HANDLER = ( 5 | event: VIDEOJS.KeyboardEvent, 6 | player: VideoJsPlayer | null, 7 | ) => { 8 | if (player) { 9 | const currentTime = player.currentTime(); 10 | const currentVolume = player.volume(); 11 | const isMuted = player.muted(); 12 | const isFullscreen = player.isFullscreen(); 13 | const isPaused = player.paused(); 14 | 15 | // Go 5 seconds backward 16 | if (event.code === 'ArrowLeft') { 17 | player.currentTime(currentTime - 5); 18 | } 19 | 20 | // Go 5 seconds forward 21 | if (event.code === 'ArrowRight') { 22 | player.currentTime(currentTime + 5); 23 | } 24 | 25 | // Increase volume by 5% 26 | if (event.code === 'ArrowUp') { 27 | if (currentVolume <= 0.95) { 28 | player.volume(currentVolume + 0.05); 29 | } else { 30 | player.volume(1); 31 | } 32 | } 33 | 34 | // Decrease volume by 5% 35 | if (event.code === 'ArrowDown') { 36 | if (currentVolume >= 0.05) { 37 | player.volume(currentVolume - 0.05); 38 | } else { 39 | player.volume(0); 40 | } 41 | } 42 | 43 | // Mute/Unmute toggle 44 | if (event.code === 'KeyM') { 45 | if (isMuted) { 46 | player.muted(false); 47 | } else { 48 | player.muted(true); 49 | } 50 | } 51 | 52 | // Fullscreen/Exit toggle 53 | if (event.code === 'KeyF') { 54 | if (isFullscreen) { 55 | player.exitFullscreen() 56 | } else { 57 | player.requestFullscreen(); 58 | } 59 | } 60 | 61 | // Play/Pause toggle 62 | if (event.code === 'Space') { 63 | if (isPaused) { 64 | player.play(); 65 | } else { 66 | player.pause(); 67 | } 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.2.3", 3 | "license": "MIT", 4 | "main": "dist/index.js", 5 | "typings": "dist/index.d.ts", 6 | "files": [ 7 | "dist", 8 | "src" 9 | ], 10 | "engines": { 11 | "node": ">=10" 12 | }, 13 | "scripts": { 14 | "start": "tsdx watch", 15 | "build": "tsdx build", 16 | "test": "tsdx test --silent", 17 | "lint": "tsdx lint", 18 | "prepare": "tsdx build" 19 | }, 20 | "peerDependencies": { 21 | "@types/video.js": "^7.3.15", 22 | "react": ">=16" 23 | }, 24 | "prettier": { 25 | "printWidth": 80, 26 | "semi": true, 27 | "singleQuote": true, 28 | "trailingComma": "es5" 29 | }, 30 | "name": "lion-player", 31 | "description": "Lion Player - open source HTML5 & Flash video player powered by VideoJS", 32 | "author": "Prince Neil Cedrick S. Castro ", 33 | "module": "dist/lion-player.esm.js", 34 | "private": false, 35 | "repository": "https://github.com/git-ced/lion-player.git", 36 | "keywords": [ 37 | "lion-player", 38 | "videojs", 39 | "videojs-skin", 40 | "javascript", 41 | "react", 42 | "react-video", 43 | "player", 44 | "video", 45 | "hls", 46 | "dash" 47 | ], 48 | "devDependencies": { 49 | "@types/react": "^17.0.3", 50 | "@types/react-dom": "^17.0.2", 51 | "@types/video.js": "^7.3.15", 52 | "@types/videojs-contrib-quality-levels": "^2.0.0", 53 | "autoprefixer": "^10.2.5", 54 | "cssnano": "^4.1.10", 55 | "husky": "^5.1.3", 56 | "identity-obj-proxy": "^3.0.0", 57 | "react": "^17.0.1", 58 | "react-dom": "^17.0.1", 59 | "rollup-plugin-postcss": "^4.0.0", 60 | "tsdx": "^0.14.1", 61 | "tslib": "^2.1.0", 62 | "typescript": "^4.2.3" 63 | }, 64 | "dependencies": { 65 | "postcss": "^8.2.8", 66 | "video.js": "^7.11.4", 67 | "videojs-contrib-quality-levels": "^2.0.9", 68 | "videojs-hls-quality-selector": "^1.1.4" 69 | }, 70 | "jest": { 71 | "moduleNameMapper": { 72 | "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", 73 | "\\.(css|less)$": "identity-obj-proxy" 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # lion-player 2 | > Open-source React video player powered by VideoJS 3 | 4 | [![NPM](https://img.shields.io/npm/v/lion-player.svg)](https://www.npmjs.com/package/lion-player) 5 | ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/lion-player) 6 | ![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/lion-player) 7 | ![Libraries.io dependency status for latest release, scoped npm package](https://img.shields.io/librariesio/release/npm/lion-player) 8 | ![NPM](https://img.shields.io/npm/l/lion-player) 9 | 10 | ## Table of Contents 11 | - [Installation](#installation) 12 | - [Setup](#setup) 13 | - [Usage](#usage) 14 | - [Authors](#authors) 15 | - [Changelog](#changelog) 16 | - [License](#license) 17 | 18 | 19 | 20 | ## Installation 21 | 22 | This library is available through the [npm registry](https://www.npmjs.com/). 23 | 24 | NPM 25 | ```bash 26 | $ npm -i lion-player 27 | ``` 28 | 29 | Yarn 30 | ```bash 31 | $ yarn add lion-player 32 | ``` 33 | 34 | ## Setup 35 | 36 | Start using it by importing the library first. 37 | 38 | ### CommonJS 39 | ```javascript 40 | const LionPlayer = require('lion-player'); 41 | ``` 42 | 43 | or 44 | 45 | ### ES6 46 | ```javascript 47 | import { LionPlayer } from 'lion-player'; 48 | ``` 49 | 50 | The `LionPlayer` component requires the following CSS for styling: 51 | 52 | **Using link tags** 53 | ```html 54 | 55 | ``` 56 | 57 | **Using import** 58 | ```javascript 59 | import 'lion-player/dist/lion-skin.min.css'; 60 | ``` 61 | 62 | ## Usage 63 | 64 | **Video playback through Lion Player** 65 | ```javascript 66 | import { LionPlayer } from 'lion-player'; 67 | 68 | const SOURCES = [ 69 | { 70 | src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', 71 | type: 'application/x-mpegURL', 72 | }, 73 | { 74 | src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', 75 | type: 'application/dash+xml', 76 | } 77 | ]; 78 | 79 | export default function Player() { 80 | return ( 81 | 82 | ); 83 | } 84 | ``` 85 | **Uncontrolled Lion Player** 86 | ```javascript 87 | import { UncontrolledLionPlayer, usePlayer } from 'lion-player'; 88 | 89 | const SOURCES = [ 90 | { 91 | src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8', 92 | type: 'application/x-mpegURL', 93 | }, 94 | { 95 | src: 'https://bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd', 96 | type: 'application/dash+xml', 97 | } 98 | ]; 99 | 100 | export default function Player() { 101 | const { ref } = usePlayer({ 102 | sources: SOURCES, 103 | muted: true, 104 | }); 105 | 106 | return ( 107 | 108 | ); 109 | } 110 | ``` 111 | 112 | **List of possible props for `LionPlayer`** 113 | 114 | [LionPlayer Props Reference](https://docs.videojs.com/tutorial-options.html) 115 | 116 | ```typescript 117 | interface Props { 118 | aspectRatio?: string; 119 | autoplay?: boolean | string; 120 | bigPlayButton?: boolean; 121 | controlBar?: videojs.ControlBarOptions | false; 122 | textTrackSettings?: videojs.TextTrackSettingsOptions; 123 | controls?: boolean; 124 | defaultVolume?: number; 125 | fluid?: boolean; 126 | height?: number; 127 | html5?: any; 128 | inactivityTimeout?: number; 129 | language?: string; 130 | languages?: { [code: string]: videojs.LanguageTranslations }; 131 | liveui?: boolean; 132 | loop?: boolean; 133 | muted?: boolean; 134 | nativeControlsForTouch?: boolean; 135 | notSupportedMessage?: string; 136 | playbackRates?: number[]; 137 | plugins?: Partial; 138 | poster?: string; 139 | preload?: string; 140 | sourceOrder?: boolean; 141 | sources?: videojs.Tech.SourceObject[]; 142 | src?: string; 143 | techOrder?: string[]; 144 | tracks?: videojs.TextTrackOptions[]; 145 | userActions?: videojs.UserActions; 146 | width?: number; 147 | } 148 | ``` 149 | 150 | ## Authors 151 | 152 | - [Prince Neil Cedrick Castro](https://github.com/git-ced/) - Initial work 153 | 154 | See also the list of [contributors](https://github.com/git-ced/lion-player/contributors) who participated in this project. 155 | 156 | ## Changelog 157 | 158 | [Changelog](https://github.com/git-ced/lion-player/releases) 159 | 160 | ## License 161 | 162 | [MIT](LICENSE) 163 | -------------------------------------------------------------------------------- /src/themes/lion.css: -------------------------------------------------------------------------------- 1 | /* 2 | Lion Skin for Video.js 3 | http://videojs.com 4 | 5 | MIT License 6 | 7 | Copyright (c) 2021 Prince Neil Cedrick Castro 8 | 9 | Permission is hereby granted, free of charge, to any person obtaining a copy 10 | of this software and associated documentation files (the "Software"), to deal 11 | in the Software without restriction, including without limitation the rights 12 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 13 | copies of the Software, and to permit persons to whom the Software is 14 | furnished to do so, subject to the following conditions: 15 | 16 | The above copyright notice and this permission notice shall be included in all 17 | copies or substantial portions of the Software. 18 | 19 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 20 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 21 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 22 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 23 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 24 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 25 | SOFTWARE. 26 | */ 27 | 28 | /* Show the controls (hidden at the start by default) */ 29 | .video-js .vjs-control-bar { 30 | display: -webkit-box; 31 | display: -webkit-flex; 32 | display: -ms-flexbox; 33 | display: flex; 34 | } 35 | 36 | /* Show the big play button (hidden at the start by default) */ 37 | .vjs-theme-lion .vjs-big-play-button .vjs-icon-placeholder { 38 | display: block; 39 | } 40 | 41 | .video-js { 42 | --vjs-theme-default--foreground: #fafafa; 43 | --vjs-theme-default--background: #5d34cb; 44 | --vjs-theme-default--slider: rgba(255, 255, 255, 0.42); 45 | --vjs-theme-lion--primary: #fafafa; 46 | --vjs-theme-lion--secondary: #f2f2f2; 47 | 48 | font-family: Calibri, Arial, Helvetica, sans-serif; 49 | 50 | font-size: 10px; 51 | color: var(--vjs-theme-default--foreground); 52 | } 53 | 54 | .video-js .vjs-control-bar, 55 | .video-js .vjs-big-play-button, 56 | .video-js .vjs-menu-button .vjs-menu-content { 57 | /* IE8 - has no alpha support */ 58 | background-color: var(--vjs-theme-default--background); 59 | background-color: rgba(var(--vjs-theme-default--background), 0.7); 60 | } 61 | 62 | /* Slider - used for Volume bar and Progress bar */ 63 | .video-js .vjs-slider { 64 | background-color: var(--vjs-theme-default--slider); 65 | } 66 | 67 | /* The slider bar color is used for the progress bar and the volume bar 68 | (the first two can be removed after a fix that's coming) */ 69 | .video-js .vjs-volume-level, 70 | .video-js .vjs-play-progress, 71 | .video-js .vjs-slider-bar { 72 | background: var(--vjs-theme-default--background); 73 | } 74 | 75 | /* The main progress bar also has a bar that shows how much has been loaded. */ 76 | .video-js .vjs-load-progress { 77 | background: var(--vjs-theme-default--slider); 78 | } 79 | 80 | /* The load progress bar also has internal divs that represent 81 | smaller disconnected loaded time ranges */ 82 | .video-js .vjs-load-progress div { 83 | background: rgba(var(--vjs-theme-default--slider), 0.75); 84 | } 85 | 86 | /* Variable Definition */ 87 | .vjs-theme-lion { 88 | --vjs-theme-lion--primary: #fafafa; 89 | --vjs-theme-lion--secondary: #f2f2f2; 90 | } 91 | 92 | /* Big play Button */ 93 | .vjs-theme-lion:hover .vjs-big-play-button, 94 | .vjs-theme-lion .vjs-big-play-button { 95 | background: none; 96 | font-size: 32px; 97 | border: none; 98 | top: 0; 99 | left: 0; 100 | color: var(--vjs-theme-lion--secondary); 101 | margin: auto; 102 | width: 100%; 103 | height: 100%; 104 | text-shadow: 0px 0px 256px rgba(255, 255, 255, 0.3); 105 | } 106 | 107 | .vjs-theme-lion:hover .vjs-big-play-button, 108 | .vjs-theme-lion.vjs-big-play-button:focus { 109 | background-color: transparent; 110 | color: var(--vjs-theme-default--background); 111 | } 112 | 113 | /* Control Bar */ 114 | .vjs-theme-lion .vjs-button > .vjs-icon-placeholder::before { 115 | line-height: 1.55; 116 | } 117 | 118 | .vjs-theme-lion .vjs-control:not(.vjs-disabled, .vjs-time-control):hover { 119 | color: var(--vjs-theme-lion--primary); 120 | text-shadow: var(--vjs-theme-lion--secondary) 0 0 0; 121 | } 122 | 123 | .vjs-theme-lion .vjs-control-bar { 124 | height: 64px; 125 | padding-top: 32px; 126 | background: none; 127 | background-image: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0)); 128 | padding-left: 1em; 129 | padding-right: 1em; 130 | display: flex; 131 | flex-direction: row; 132 | align-items: center; 133 | padding-bottom: 2em; 134 | } 135 | 136 | /* Play Button */ 137 | .vjs-theme-lion .vjs-play-control { 138 | font-size: 1.2em; 139 | display: flex; 140 | align-items: center; 141 | justify-content: center; 142 | width: 2em; 143 | margin-left: 1.8em; 144 | margin-right: 0.8em; 145 | } 146 | 147 | .vjs-theme-lion .vjs-play-control .vjs-icon-placeholder::before { 148 | background: none; 149 | color: var(--vjs-theme-lion--primary); 150 | } 151 | 152 | .vjs-theme-lion .vjs-play-control:hover .vjs-icon-placeholder::before { 153 | background: none; 154 | color: var(--vjs-theme-lion--secondary); 155 | } 156 | 157 | .video-js .vjs-big-play-button .vjs-icon-placeholder::before, 158 | .video-js .vjs-modal-dialog, 159 | .vjs-button > .vjs-icon-placeholder::before, 160 | .vjs-modal-dialog .vjs-modal-dialog-content { 161 | position: inherit !important; 162 | font-size: 2.5em; 163 | } 164 | 165 | /* Volume stuff */ 166 | /* 167 | .vjs-theme-lion .vjs-slider-vertical .vjs-volume-level::before { 168 | font-size: 18px; 169 | top: -0.5em; 170 | left: -0.38em; 171 | } 172 | */ 173 | 174 | .video-js .vjs-volume-panel { 175 | padding-top: 12px; 176 | padding-bottom: 12px; 177 | } 178 | 179 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, 180 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, 181 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { 182 | width: auto !important; 183 | } 184 | 185 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { 186 | display: none !important; 187 | } 188 | 189 | @media only screen and (min-width: 768px) { 190 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, 191 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, 192 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { 193 | height: 100%; 194 | width: 16em !important; 195 | } 196 | 197 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { 198 | height: 100% !important; 199 | display: flex !important; 200 | margin-right: 0.2em !important; 201 | align-items: center !important; 202 | justify-content: center !important; 203 | } 204 | 205 | .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, 206 | .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, 207 | .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, 208 | .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, 209 | .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, 210 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { 211 | width: 8em !important; 212 | height: 100% !important; 213 | margin-right: 0 !important; 214 | display: flex; 215 | align-items: center; 216 | justify-content: center; 217 | } 218 | 219 | .vjs-slider-horizontal .vjs-volume-level::before { 220 | top: -0.38em; 221 | right: -0.5em; 222 | } 223 | 224 | .vjs-volume-bar.vjs-slider-horizontal { 225 | width: 8em !important; 226 | } 227 | } 228 | 229 | .video-js .vjs-volume-level::before { 230 | position: absolute; 231 | font-size: 18px; 232 | } 233 | 234 | .vjs-theme-lion .vjs-volume-bar { 235 | background-color: rgba(255, 255, 255, 0.3); 236 | border-radius: 10px; 237 | } 238 | 239 | .vjs-theme-lion .vjs-volume-level { 240 | background-color: var(--vjs-theme-lion--primary); 241 | border-radius: 10px; 242 | } 243 | 244 | .vjs-icon-volume-high, 245 | .video-js .vjs-mute-control .vjs-icon-placeholder, 246 | .vjs-icon-volume-mid, 247 | .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder, 248 | .vjs-icon-volume-low, 249 | .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder, 250 | .vjs-icon-volume-mute, 251 | .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder { 252 | font-family: VideoJS; 253 | font-weight: 400; 254 | font-style: normal; 255 | font-size: 1.1em !important; 256 | } 257 | 258 | .vjs-theme-lion .vjs-mute-control { 259 | cursor: pointer; 260 | flex: none; 261 | display: flex; 262 | justify-content: center; 263 | align-items: center; 264 | padding-right: 0.5em; 265 | } 266 | 267 | /* Progress Bar */ 268 | .vjs-theme-lion .vjs-progress-control { 269 | padding: 1em 1em 1em 1.5em; 270 | display: border-box; 271 | position: absolute; 272 | width: 100%; 273 | height: 1em; 274 | top: 0.5em; 275 | left: 0; 276 | right: 0; 277 | } 278 | 279 | .vjs-theme-lion .vjs-progress-control:hover .vjs-progress-holder { 280 | font-size: 1em; 281 | } 282 | 283 | .vjs-theme-lion .vjs-play-progress::before { 284 | display: block; 285 | width: 6px; 286 | height: 5px; 287 | content: ""; 288 | border-radius: 5em; 289 | background: var(--vjs-theme-default--foreground); 290 | margin-right: -3px; 291 | transition: 0.1s; 292 | } 293 | 294 | .vjs-theme-lion .vjs-progress-control.vjs-control:hover .vjs-play-progress::before { 295 | display: block; 296 | width: 1.8em; 297 | height: 1.8em; 298 | content: ""; 299 | border-radius: 5em; 300 | background: var(--vjs-theme-default--foreground); 301 | transition: 0.3s; 302 | margin-right: -1em; 303 | margin-top: -0.6em; 304 | } 305 | 306 | .vjs-theme-lion .vjs-progress-holder { 307 | border-radius: 25px; 308 | height: 0.5em; 309 | } 310 | 311 | .vjs-theme-lion .vjs-mouse-display .vjs-time-tooltip { 312 | font-size: 12px !important; 313 | background: var(--vjs-theme-default--background); 314 | } 315 | 316 | .vjs-play-progress .vjs-time-tooltip { 317 | display: none !important; 318 | } 319 | 320 | .vjs-theme-lion .vjs-play-progress, 321 | .vjs-theme-lion .vjs-load-progress, 322 | .vjs-theme-lion .vjs-load-progress div { 323 | border-radius: 25em; 324 | } 325 | 326 | /* Time control */ 327 | .video-js .vjs-time-control { 328 | flex: none; 329 | font-size: 1.3em; 330 | line-height: 3em; 331 | color: rgba(255, 255, 255, 0.88); 332 | min-width: 2em; 333 | width: auto; 334 | padding-left: 0.5em; 335 | padding-right: 0.5em; 336 | display: flex; 337 | align-items: center; 338 | justify-content: center; 339 | margin-top: 0; 340 | } 341 | 342 | .vjs-duration-display { 343 | display: none !important; 344 | } 345 | 346 | .vjs-time-divider { 347 | display: none !important; 348 | } 349 | 350 | @media only screen and (min-width: 768px) { 351 | .vjs-duration-display { 352 | display: block !important; 353 | } 354 | 355 | .vjs-time-divider { 356 | display: block !important; 357 | padding-left: 4px !important; 358 | padding-right: 4px !important; 359 | min-width: 0px !important; 360 | } 361 | } 362 | 363 | /* Control Spacer */ 364 | .video-js .vjs-custom-control-spacer { 365 | width: 100%; 366 | display: block; 367 | } 368 | 369 | /* Quality Selector */ 370 | .vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-selector { 371 | font-size: 1em; 372 | margin-top: -0.1em; 373 | } 374 | 375 | /* Playback rate */ 376 | .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button { 377 | font-size: 1em; 378 | } 379 | 380 | @media only screen and (min-width: 768px) { 381 | /* Quality Selector */ 382 | .vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-selector { 383 | margin-right: 0.4em; 384 | font-size: 1.2em; 385 | margin-top: -0.3em; 386 | } 387 | 388 | /* Playback rate */ 389 | .vjs-playback-rate.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button { 390 | margin-right: 0.8em; 391 | font-size: 1.2em; 392 | } 393 | } 394 | 395 | .vjs-theme-lion .vjs-playback-rate .vjs-playback-rate-value { 396 | pointer-events: none; 397 | font-size: 1.2em; 398 | line-height: 2; 399 | text-align: center; 400 | display: flex; 401 | align-items: center; 402 | justify-content: center; 403 | } 404 | 405 | /* Fullscreen control */ 406 | .vjs-theme-lion .vjs-fullscreen-control { 407 | cursor: pointer; 408 | flex: none; 409 | display: flex; 410 | justify-content: center; 411 | align-items: center; 412 | font-size: 1.2em; 413 | width: 2em; 414 | margin-right: 1.8em; 415 | margin-left: 0.8em; 416 | } 417 | 418 | /* Menu content */ 419 | .vjs-menu { 420 | padding-bottom: 24px; 421 | } 422 | 423 | .vjs-menu li.vjs-menu-title { 424 | display: none; 425 | } 426 | 427 | .vjs-menu .vjs-menu-content { 428 | overflow: auto !important; 429 | scrollbar-width: none; 430 | -ms-overflow-style: none; 431 | } 432 | 433 | .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 434 | padding-bottom: 32px; 435 | } 436 | 437 | .vjs-menu .vjs-menu-content > * { 438 | background: rgba(0, 0, 0, 0.42); 439 | padding: 8px 0 8px 0; 440 | color: var(--vjs-theme-default--foreground); 441 | } 442 | 443 | .video-js .vjs-menu :focus:not(:focus-visible), 444 | .js-focus-visible .vjs-menu :focus:not(.focus-visible) { 445 | background: var(--vjs-theme-default--background); 446 | color: var(--vjs-theme-default--foreground); 447 | } 448 | 449 | .js-focus-visible .vjs-menu li.vjs-selected:hover, 450 | .vjs-menu li.vjs-selected, 451 | .vjs-menu li.vjs-selected:focus, 452 | .vjs-menu li.vjs-selected:hover { 453 | background: var(--vjs-theme-default--background); 454 | color: var(--vjs-theme-default--foreground); 455 | } 456 | 457 | .vjs-playback-rate .vjs-menu { 458 | width: 6em; 459 | left: -10px; 460 | } 461 | 462 | .vjs-menu-button-popup .vjs-button .vjs-icon-placeholder { 463 | font-size: 1.2em; 464 | } 465 | -------------------------------------------------------------------------------- /src/themes/video-js.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .vjs-modal-dialog .vjs-modal-dialog-content, 3 | .video-js .vjs-modal-dialog, 4 | .vjs-button > .vjs-icon-placeholder:before, 5 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | width: 100%; 10 | height: 100%; 11 | } 12 | 13 | .vjs-button > .vjs-icon-placeholder:before, 14 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before { 15 | text-align: center; 16 | } 17 | 18 | @font-face { 19 | font-family: VideoJS; 20 | src: url(data:application/font-woff;charset=utf-8;base64,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) 21 | format("woff"); 22 | font-weight: normal; 23 | font-style: normal; 24 | } 25 | .vjs-icon-play, 26 | .video-js .vjs-play-control .vjs-icon-placeholder, 27 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before { 28 | font-family: VideoJS; 29 | font-weight: normal; 30 | font-style: normal; 31 | } 32 | .vjs-icon-play:before, 33 | .video-js .vjs-play-control .vjs-icon-placeholder:before, 34 | .video-js .vjs-big-play-button .vjs-icon-placeholder:before { 35 | content: "\f101"; 36 | } 37 | 38 | .vjs-icon-play-circle { 39 | font-family: VideoJS; 40 | font-weight: normal; 41 | font-style: normal; 42 | } 43 | .vjs-icon-play-circle:before { 44 | content: "\f102"; 45 | } 46 | 47 | .vjs-icon-pause, 48 | .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder { 49 | font-family: VideoJS; 50 | font-weight: normal; 51 | font-style: normal; 52 | } 53 | .vjs-icon-pause:before, 54 | .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before { 55 | content: "\f103"; 56 | } 57 | 58 | .vjs-icon-volume-mute, 59 | .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder { 60 | font-family: VideoJS; 61 | font-weight: normal; 62 | font-style: normal; 63 | } 64 | .vjs-icon-volume-mute:before, 65 | .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before { 66 | content: "\f104"; 67 | } 68 | 69 | .vjs-icon-volume-low, 70 | .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder { 71 | font-family: VideoJS; 72 | font-weight: normal; 73 | font-style: normal; 74 | } 75 | .vjs-icon-volume-low:before, 76 | .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before { 77 | content: "\f105"; 78 | } 79 | 80 | .vjs-icon-volume-mid, 81 | .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder { 82 | font-family: VideoJS; 83 | font-weight: normal; 84 | font-style: normal; 85 | } 86 | .vjs-icon-volume-mid:before, 87 | .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before { 88 | content: "\f106"; 89 | } 90 | 91 | .vjs-icon-volume-high, 92 | .video-js .vjs-mute-control .vjs-icon-placeholder { 93 | font-family: VideoJS; 94 | font-weight: normal; 95 | font-style: normal; 96 | } 97 | .vjs-icon-volume-high:before, 98 | .video-js .vjs-mute-control .vjs-icon-placeholder:before { 99 | content: "\f107"; 100 | } 101 | 102 | .vjs-icon-fullscreen-enter, 103 | .video-js .vjs-fullscreen-control .vjs-icon-placeholder { 104 | font-family: VideoJS; 105 | font-weight: normal; 106 | font-style: normal; 107 | } 108 | .vjs-icon-fullscreen-enter:before, 109 | .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before { 110 | content: "\f108"; 111 | } 112 | 113 | .vjs-icon-fullscreen-exit, 114 | .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder { 115 | font-family: VideoJS; 116 | font-weight: normal; 117 | font-style: normal; 118 | } 119 | .vjs-icon-fullscreen-exit:before, 120 | .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before { 121 | content: "\f109"; 122 | } 123 | 124 | .vjs-icon-square { 125 | font-family: VideoJS; 126 | font-weight: normal; 127 | font-style: normal; 128 | } 129 | .vjs-icon-square:before { 130 | content: "\f10a"; 131 | } 132 | 133 | .vjs-icon-spinner { 134 | font-family: VideoJS; 135 | font-weight: normal; 136 | font-style: normal; 137 | } 138 | .vjs-icon-spinner:before { 139 | content: "\f10b"; 140 | } 141 | 142 | .vjs-icon-subtitles, 143 | .video-js .vjs-subs-caps-button .vjs-icon-placeholder, 144 | .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder, 145 | .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder, 146 | .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder, 147 | .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder, 148 | .video-js .vjs-subtitles-button .vjs-icon-placeholder { 149 | font-family: VideoJS; 150 | font-weight: normal; 151 | font-style: normal; 152 | } 153 | .vjs-icon-subtitles:before, 154 | .video-js .vjs-subs-caps-button .vjs-icon-placeholder:before, 155 | .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before, 156 | .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before, 157 | .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before, 158 | .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before, 159 | .video-js .vjs-subtitles-button .vjs-icon-placeholder:before { 160 | content: "\f10c"; 161 | } 162 | 163 | .vjs-icon-captions, 164 | .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder, 165 | .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder, 166 | .video-js .vjs-captions-button .vjs-icon-placeholder { 167 | font-family: VideoJS; 168 | font-weight: normal; 169 | font-style: normal; 170 | } 171 | .vjs-icon-captions:before, 172 | .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before, 173 | .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before, 174 | .video-js .vjs-captions-button .vjs-icon-placeholder:before { 175 | content: "\f10d"; 176 | } 177 | 178 | .vjs-icon-chapters, 179 | .video-js .vjs-chapters-button .vjs-icon-placeholder { 180 | font-family: VideoJS; 181 | font-weight: normal; 182 | font-style: normal; 183 | } 184 | .vjs-icon-chapters:before, 185 | .video-js .vjs-chapters-button .vjs-icon-placeholder:before { 186 | content: "\f10e"; 187 | } 188 | 189 | .vjs-icon-share { 190 | font-family: VideoJS; 191 | font-weight: normal; 192 | font-style: normal; 193 | } 194 | .vjs-icon-share:before { 195 | content: "\f10f"; 196 | } 197 | 198 | .vjs-icon-cog { 199 | font-family: VideoJS; 200 | font-weight: normal; 201 | font-style: normal; 202 | } 203 | .vjs-icon-cog:before { 204 | content: "\f110"; 205 | } 206 | 207 | .vjs-icon-circle, 208 | .vjs-seek-to-live-control .vjs-icon-placeholder, 209 | .video-js .vjs-volume-level, 210 | .video-js .vjs-play-progress { 211 | font-family: VideoJS; 212 | font-weight: normal; 213 | font-style: normal; 214 | } 215 | .vjs-icon-circle:before, 216 | .vjs-seek-to-live-control .vjs-icon-placeholder:before, 217 | .video-js .vjs-volume-level:before, 218 | .video-js .vjs-play-progress:before { 219 | content: "\f111"; 220 | } 221 | 222 | .vjs-icon-circle-outline { 223 | font-family: VideoJS; 224 | font-weight: normal; 225 | font-style: normal; 226 | } 227 | .vjs-icon-circle-outline:before { 228 | content: "\f112"; 229 | } 230 | 231 | .vjs-icon-circle-inner-circle { 232 | font-family: VideoJS; 233 | font-weight: normal; 234 | font-style: normal; 235 | } 236 | .vjs-icon-circle-inner-circle:before { 237 | content: "\f113"; 238 | } 239 | 240 | .vjs-icon-hd { 241 | font-family: VideoJS; 242 | font-weight: normal; 243 | font-style: normal; 244 | } 245 | .vjs-icon-hd:before { 246 | content: "\f114"; 247 | } 248 | 249 | .vjs-icon-cancel, 250 | .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder { 251 | font-family: VideoJS; 252 | font-weight: normal; 253 | font-style: normal; 254 | } 255 | .vjs-icon-cancel:before, 256 | .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before { 257 | content: "\f115"; 258 | } 259 | 260 | .vjs-icon-replay, 261 | .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder { 262 | font-family: VideoJS; 263 | font-weight: normal; 264 | font-style: normal; 265 | } 266 | .vjs-icon-replay:before, 267 | .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before { 268 | content: "\f116"; 269 | } 270 | 271 | .vjs-icon-facebook { 272 | font-family: VideoJS; 273 | font-weight: normal; 274 | font-style: normal; 275 | } 276 | .vjs-icon-facebook:before { 277 | content: "\f117"; 278 | } 279 | 280 | .vjs-icon-gplus { 281 | font-family: VideoJS; 282 | font-weight: normal; 283 | font-style: normal; 284 | } 285 | .vjs-icon-gplus:before { 286 | content: "\f118"; 287 | } 288 | 289 | .vjs-icon-linkedin { 290 | font-family: VideoJS; 291 | font-weight: normal; 292 | font-style: normal; 293 | } 294 | .vjs-icon-linkedin:before { 295 | content: "\f119"; 296 | } 297 | 298 | .vjs-icon-twitter { 299 | font-family: VideoJS; 300 | font-weight: normal; 301 | font-style: normal; 302 | } 303 | .vjs-icon-twitter:before { 304 | content: "\f11a"; 305 | } 306 | 307 | .vjs-icon-tumblr { 308 | font-family: VideoJS; 309 | font-weight: normal; 310 | font-style: normal; 311 | } 312 | .vjs-icon-tumblr:before { 313 | content: "\f11b"; 314 | } 315 | 316 | .vjs-icon-pinterest { 317 | font-family: VideoJS; 318 | font-weight: normal; 319 | font-style: normal; 320 | } 321 | .vjs-icon-pinterest:before { 322 | content: "\f11c"; 323 | } 324 | 325 | .vjs-icon-audio-description, 326 | .video-js .vjs-descriptions-button .vjs-icon-placeholder { 327 | font-family: VideoJS; 328 | font-weight: normal; 329 | font-style: normal; 330 | } 331 | .vjs-icon-audio-description:before, 332 | .video-js .vjs-descriptions-button .vjs-icon-placeholder:before { 333 | content: "\f11d"; 334 | } 335 | 336 | .vjs-icon-audio, 337 | .video-js .vjs-audio-button .vjs-icon-placeholder { 338 | font-family: VideoJS; 339 | font-weight: normal; 340 | font-style: normal; 341 | } 342 | .vjs-icon-audio:before, 343 | .video-js .vjs-audio-button .vjs-icon-placeholder:before { 344 | content: "\f11e"; 345 | } 346 | 347 | .vjs-icon-next-item { 348 | font-family: VideoJS; 349 | font-weight: normal; 350 | font-style: normal; 351 | } 352 | .vjs-icon-next-item:before { 353 | content: "\f11f"; 354 | } 355 | 356 | .vjs-icon-previous-item { 357 | font-family: VideoJS; 358 | font-weight: normal; 359 | font-style: normal; 360 | } 361 | .vjs-icon-previous-item:before { 362 | content: "\f120"; 363 | } 364 | 365 | .vjs-icon-picture-in-picture-enter, 366 | .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder { 367 | font-family: VideoJS; 368 | font-weight: normal; 369 | font-style: normal; 370 | } 371 | .vjs-icon-picture-in-picture-enter:before, 372 | .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before { 373 | content: "\f121"; 374 | } 375 | 376 | .vjs-icon-picture-in-picture-exit, 377 | .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder { 378 | font-family: VideoJS; 379 | font-weight: normal; 380 | font-style: normal; 381 | } 382 | .vjs-icon-picture-in-picture-exit:before, 383 | .video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before { 384 | content: "\f122"; 385 | } 386 | 387 | .video-js { 388 | display: block; 389 | vertical-align: top; 390 | box-sizing: border-box; 391 | color: #fff; 392 | background-color: #000; 393 | position: relative; 394 | padding: 0; 395 | font-size: 10px; 396 | line-height: 1; 397 | font-weight: normal; 398 | font-style: normal; 399 | font-family: Arial, Helvetica, sans-serif; 400 | word-break: initial; 401 | } 402 | .video-js:-moz-full-screen { 403 | position: absolute; 404 | } 405 | .video-js:-webkit-full-screen { 406 | width: 100% !important; 407 | height: 100% !important; 408 | } 409 | 410 | .video-js[tabindex="-1"] { 411 | outline: none; 412 | } 413 | 414 | .video-js *, 415 | .video-js *:before, 416 | .video-js *:after { 417 | box-sizing: inherit; 418 | } 419 | 420 | .video-js ul { 421 | font-family: inherit; 422 | font-size: inherit; 423 | line-height: inherit; 424 | list-style-position: outside; 425 | margin-left: 0; 426 | margin-right: 0; 427 | margin-top: 0; 428 | margin-bottom: 0; 429 | } 430 | 431 | .video-js.vjs-fluid, 432 | .video-js.vjs-16-9, 433 | .video-js.vjs-4-3 { 434 | width: 100%; 435 | max-width: 100%; 436 | height: 0; 437 | } 438 | 439 | .video-js.vjs-16-9 { 440 | padding-top: 56.25%; 441 | } 442 | 443 | .video-js.vjs-4-3 { 444 | padding-top: 75%; 445 | } 446 | 447 | .video-js.vjs-fill { 448 | width: 100%; 449 | height: 100%; 450 | } 451 | 452 | .video-js .vjs-tech { 453 | position: absolute; 454 | top: 0; 455 | left: 0; 456 | width: 100%; 457 | height: 100%; 458 | } 459 | 460 | body.vjs-full-window { 461 | padding: 0; 462 | margin: 0; 463 | height: 100%; 464 | } 465 | 466 | .vjs-full-window .video-js.vjs-fullscreen { 467 | position: fixed; 468 | overflow: hidden; 469 | z-index: 1000; 470 | left: 0; 471 | top: 0; 472 | bottom: 0; 473 | right: 0; 474 | } 475 | 476 | .video-js.vjs-fullscreen:not(.vjs-ios-native-fs) { 477 | width: 100% !important; 478 | height: 100% !important; 479 | padding-top: 0 !important; 480 | } 481 | 482 | .video-js.vjs-fullscreen.vjs-user-inactive { 483 | cursor: none; 484 | } 485 | 486 | .vjs-hidden { 487 | display: none !important; 488 | } 489 | 490 | .vjs-disabled { 491 | opacity: 0.5; 492 | cursor: default; 493 | } 494 | 495 | .video-js .vjs-offscreen { 496 | height: 1px; 497 | left: -9999px; 498 | position: absolute; 499 | top: 0; 500 | width: 1px; 501 | } 502 | 503 | .vjs-lock-showing { 504 | display: block !important; 505 | opacity: 1; 506 | visibility: visible; 507 | } 508 | 509 | .vjs-no-js { 510 | padding: 20px; 511 | color: #fff; 512 | background-color: #000; 513 | font-size: 18px; 514 | font-family: Arial, Helvetica, sans-serif; 515 | text-align: center; 516 | width: 300px; 517 | height: 150px; 518 | margin: 0px auto; 519 | } 520 | 521 | .vjs-no-js a, 522 | .vjs-no-js a:visited { 523 | color: #66a8cc; 524 | } 525 | 526 | .video-js .vjs-big-play-button { 527 | font-size: 3em; 528 | line-height: 1.5em; 529 | height: 1.63332em; 530 | width: 3em; 531 | display: block; 532 | position: absolute; 533 | top: 10px; 534 | left: 10px; 535 | padding: 0; 536 | cursor: pointer; 537 | opacity: 1; 538 | border: 0.06666em solid #fff; 539 | background-color: #2b333f; 540 | background-color: rgba(43, 51, 63, 0.7); 541 | border-radius: 0.3em; 542 | transition: all 0.4s; 543 | } 544 | .vjs-big-play-centered .vjs-big-play-button { 545 | top: 50%; 546 | left: 50%; 547 | margin-top: -0.81666em; 548 | margin-left: -1.5em; 549 | } 550 | 551 | .video-js:hover .vjs-big-play-button, 552 | .video-js .vjs-big-play-button:focus { 553 | border-color: #fff; 554 | background-color: #73859f; 555 | background-color: rgba(115, 133, 159, 0.5); 556 | transition: all 0s; 557 | } 558 | 559 | .vjs-controls-disabled .vjs-big-play-button, 560 | .vjs-has-started .vjs-big-play-button, 561 | .vjs-using-native-controls .vjs-big-play-button, 562 | .vjs-error .vjs-big-play-button { 563 | display: none; 564 | } 565 | 566 | .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button { 567 | display: block; 568 | } 569 | 570 | .video-js button { 571 | background: none; 572 | border: none; 573 | color: inherit; 574 | display: inline-block; 575 | font-size: inherit; 576 | line-height: inherit; 577 | text-transform: none; 578 | text-decoration: none; 579 | transition: none; 580 | -webkit-appearance: none; 581 | -moz-appearance: none; 582 | appearance: none; 583 | } 584 | 585 | .vjs-control .vjs-button { 586 | width: 100%; 587 | height: 100%; 588 | } 589 | 590 | .video-js .vjs-control.vjs-close-button { 591 | cursor: pointer; 592 | height: 3em; 593 | position: absolute; 594 | right: 0; 595 | top: 0.5em; 596 | z-index: 2; 597 | } 598 | .video-js .vjs-modal-dialog { 599 | background: rgba(0, 0, 0, 0.8); 600 | background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)); 601 | overflow: auto; 602 | } 603 | 604 | .video-js .vjs-modal-dialog > * { 605 | box-sizing: border-box; 606 | } 607 | 608 | .vjs-modal-dialog .vjs-modal-dialog-content { 609 | font-size: 1.2em; 610 | line-height: 1.5; 611 | padding: 20px 24px; 612 | z-index: 1; 613 | } 614 | 615 | .vjs-menu-button { 616 | cursor: pointer; 617 | } 618 | 619 | .vjs-menu-button.vjs-disabled { 620 | cursor: default; 621 | } 622 | 623 | .vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu { 624 | display: none; 625 | } 626 | 627 | .vjs-menu .vjs-menu-content { 628 | display: block; 629 | padding: 0; 630 | margin: 0; 631 | font-family: Arial, Helvetica, sans-serif; 632 | overflow: auto; 633 | } 634 | 635 | .vjs-menu .vjs-menu-content > * { 636 | box-sizing: border-box; 637 | } 638 | 639 | .vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu { 640 | display: none; 641 | } 642 | 643 | .vjs-menu li { 644 | list-style: none; 645 | margin: 0; 646 | padding: 0.2em 0; 647 | line-height: 1.4em; 648 | font-size: 1.2em; 649 | text-align: center; 650 | text-transform: lowercase; 651 | } 652 | 653 | .vjs-menu li.vjs-menu-item:focus, 654 | .vjs-menu li.vjs-menu-item:hover, 655 | .js-focus-visible .vjs-menu li.vjs-menu-item:hover { 656 | background-color: #73859f; 657 | background-color: rgba(115, 133, 159, 0.5); 658 | } 659 | 660 | .vjs-menu li.vjs-selected, 661 | .vjs-menu li.vjs-selected:focus, 662 | .vjs-menu li.vjs-selected:hover, 663 | .js-focus-visible .vjs-menu li.vjs-selected:hover { 664 | background-color: #fff; 665 | color: #2b333f; 666 | } 667 | 668 | .video-js .vjs-menu *:focus:not(:focus-visible), 669 | .js-focus-visible .vjs-menu *:focus:not(.focus-visible) { 670 | background: none; 671 | } 672 | 673 | .vjs-menu li.vjs-menu-title { 674 | text-align: center; 675 | text-transform: uppercase; 676 | font-size: 1em; 677 | line-height: 2em; 678 | padding: 0; 679 | margin: 0 0 0.3em 0; 680 | font-weight: bold; 681 | cursor: default; 682 | } 683 | 684 | .vjs-menu-button-popup .vjs-menu { 685 | display: none; 686 | position: absolute; 687 | bottom: 0; 688 | width: 10em; 689 | left: -3em; 690 | height: 0em; 691 | margin-bottom: 0; 692 | border-top-color: rgba(43, 51, 63, 0.7); 693 | } 694 | 695 | .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 696 | background-color: #2b333f; 697 | background-color: rgba(43, 51, 63, 0.7); 698 | position: absolute; 699 | width: 100%; 700 | bottom: 1.5em; 701 | max-height: 15em; 702 | } 703 | 704 | @media only screen and (min-width: 768px) { 705 | .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 706 | background-color: #2b333f; 707 | background-color: rgba(43, 51, 63, 0.7); 708 | position: absolute; 709 | width: 100%; 710 | bottom: 1.5em; 711 | max-height: 100vh; 712 | } 713 | } 714 | 715 | .vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content, 716 | .vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 717 | max-height: 5em; 718 | } 719 | 720 | .vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 721 | max-height: 10em; 722 | } 723 | 724 | .vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 725 | max-height: 14em; 726 | } 727 | 728 | .vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, 729 | .vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content, 730 | .vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content { 731 | max-height: 25em; 732 | } 733 | 734 | .vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu, 735 | .vjs-menu-button-popup .vjs-menu.vjs-lock-showing { 736 | display: block; 737 | } 738 | 739 | .video-js .vjs-menu-button-inline { 740 | transition: all 0.4s; 741 | overflow: hidden; 742 | } 743 | 744 | .video-js .vjs-menu-button-inline:before { 745 | width: 2.222222222em; 746 | } 747 | 748 | .video-js .vjs-menu-button-inline:hover, 749 | .video-js .vjs-menu-button-inline:focus, 750 | .video-js .vjs-menu-button-inline.vjs-slider-active, 751 | .video-js.vjs-no-flex .vjs-menu-button-inline { 752 | width: 12em; 753 | } 754 | 755 | .vjs-menu-button-inline .vjs-menu { 756 | opacity: 0; 757 | height: 100%; 758 | width: auto; 759 | position: absolute; 760 | left: 4em; 761 | top: 0; 762 | padding: 0; 763 | margin: 0; 764 | transition: all 0.4s; 765 | } 766 | 767 | .vjs-menu-button-inline:hover .vjs-menu, 768 | .vjs-menu-button-inline:focus .vjs-menu, 769 | .vjs-menu-button-inline.vjs-slider-active .vjs-menu { 770 | display: block; 771 | opacity: 1; 772 | } 773 | 774 | .vjs-no-flex .vjs-menu-button-inline .vjs-menu { 775 | display: block; 776 | opacity: 1; 777 | position: relative; 778 | width: auto; 779 | } 780 | 781 | .vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu, 782 | .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu, 783 | .vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu { 784 | width: auto; 785 | } 786 | 787 | .vjs-menu-button-inline .vjs-menu-content { 788 | width: auto; 789 | height: 100%; 790 | margin: 0; 791 | overflow: hidden; 792 | } 793 | 794 | .video-js .vjs-control-bar { 795 | display: none; 796 | width: 100%; 797 | position: absolute; 798 | bottom: 0; 799 | left: 0; 800 | right: 0; 801 | height: 3em; 802 | background-color: #2b333f; 803 | background-color: rgba(43, 51, 63, 0.7); 804 | } 805 | 806 | .vjs-has-started .vjs-control-bar { 807 | display: flex; 808 | visibility: visible; 809 | opacity: 1; 810 | transition: visibility 0.1s, opacity 0.1s; 811 | } 812 | 813 | .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { 814 | visibility: visible; 815 | opacity: 0; 816 | transition: visibility 1s, opacity 1s; 817 | } 818 | 819 | .vjs-controls-disabled .vjs-control-bar, 820 | .vjs-using-native-controls .vjs-control-bar, 821 | .vjs-error .vjs-control-bar { 822 | display: none !important; 823 | } 824 | 825 | .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar { 826 | opacity: 1; 827 | visibility: visible; 828 | } 829 | 830 | .vjs-has-started.vjs-no-flex .vjs-control-bar { 831 | display: table; 832 | } 833 | 834 | .video-js .vjs-control { 835 | position: relative; 836 | text-align: center; 837 | margin: 0; 838 | padding: 0; 839 | height: 100%; 840 | width: 5em; 841 | flex: none; 842 | } 843 | 844 | .vjs-button > .vjs-icon-placeholder:before { 845 | font-size: 1.8em; 846 | line-height: 1.67; 847 | } 848 | 849 | .vjs-button > .vjs-icon-placeholder { 850 | display: block; 851 | } 852 | 853 | .video-js .vjs-control:focus:before, 854 | .video-js .vjs-control:hover:before, 855 | .video-js .vjs-control:focus { 856 | text-shadow: 0em 0em 1em white; 857 | } 858 | 859 | .video-js .vjs-control-text { 860 | border: 0; 861 | clip: rect(0 0 0 0); 862 | height: 1px; 863 | overflow: hidden; 864 | padding: 0; 865 | position: absolute; 866 | width: 1px; 867 | } 868 | 869 | .vjs-no-flex .vjs-control { 870 | display: table-cell; 871 | vertical-align: middle; 872 | } 873 | 874 | .video-js .vjs-custom-control-spacer { 875 | display: none; 876 | } 877 | 878 | .video-js .vjs-progress-control { 879 | cursor: pointer; 880 | flex: auto; 881 | display: flex; 882 | align-items: center; 883 | min-width: 4em; 884 | touch-action: none; 885 | } 886 | 887 | .video-js .vjs-progress-control.disabled { 888 | cursor: default; 889 | } 890 | 891 | .vjs-live .vjs-progress-control { 892 | display: none; 893 | } 894 | 895 | .vjs-liveui .vjs-progress-control { 896 | display: flex; 897 | align-items: center; 898 | } 899 | 900 | .vjs-no-flex .vjs-progress-control { 901 | width: auto; 902 | } 903 | 904 | .video-js .vjs-progress-holder { 905 | flex: auto; 906 | transition: all 0.2s; 907 | height: 0.3em; 908 | } 909 | 910 | .video-js .vjs-progress-control .vjs-progress-holder { 911 | margin: 0 10px; 912 | } 913 | 914 | .video-js .vjs-progress-control:hover .vjs-progress-holder { 915 | font-size: 1.6666666667em; 916 | } 917 | 918 | .video-js .vjs-progress-control:hover .vjs-progress-holder.disabled { 919 | font-size: 1em; 920 | } 921 | 922 | .video-js .vjs-progress-holder .vjs-play-progress, 923 | .video-js .vjs-progress-holder .vjs-load-progress, 924 | .video-js .vjs-progress-holder .vjs-load-progress div { 925 | position: absolute; 926 | display: block; 927 | height: 100%; 928 | margin: 0; 929 | padding: 0; 930 | width: 0; 931 | } 932 | 933 | .video-js .vjs-play-progress { 934 | background-color: #fff; 935 | } 936 | .video-js .vjs-play-progress:before { 937 | font-size: 0.9em; 938 | position: absolute; 939 | right: 0; 940 | top: 0; 941 | z-index: 1; 942 | } 943 | 944 | .video-js .vjs-load-progress { 945 | background: rgba(115, 133, 159, 0.5); 946 | } 947 | 948 | .video-js .vjs-load-progress div { 949 | background: rgba(115, 133, 159, 0.75); 950 | } 951 | 952 | .video-js .vjs-time-tooltip { 953 | background-color: #fff; 954 | background-color: rgba(255, 255, 255, 0.8); 955 | border-radius: 0.3em; 956 | color: #000; 957 | float: right; 958 | font-family: Arial, Helvetica, sans-serif; 959 | font-size: 1em; 960 | padding: 6px 8px 8px 8px; 961 | pointer-events: none; 962 | position: absolute; 963 | top: -3.4em; 964 | visibility: hidden; 965 | z-index: 1; 966 | } 967 | 968 | .video-js .vjs-progress-holder:focus .vjs-time-tooltip { 969 | display: none; 970 | } 971 | 972 | .video-js .vjs-progress-control:hover .vjs-time-tooltip, 973 | .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip { 974 | display: block; 975 | font-size: 0.6em; 976 | visibility: visible; 977 | } 978 | 979 | .video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip { 980 | font-size: 1em; 981 | } 982 | 983 | .video-js .vjs-progress-control .vjs-mouse-display { 984 | display: none; 985 | position: absolute; 986 | width: 1px; 987 | height: 100%; 988 | background-color: #000; 989 | z-index: 1; 990 | } 991 | 992 | .vjs-no-flex .vjs-progress-control .vjs-mouse-display { 993 | z-index: 0; 994 | } 995 | 996 | .video-js .vjs-progress-control:hover .vjs-mouse-display { 997 | display: block; 998 | } 999 | 1000 | .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display { 1001 | visibility: hidden; 1002 | opacity: 0; 1003 | transition: visibility 1s, opacity 1s; 1004 | } 1005 | 1006 | .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display { 1007 | display: none; 1008 | } 1009 | 1010 | .vjs-mouse-display .vjs-time-tooltip { 1011 | color: #fff; 1012 | background-color: #000; 1013 | background-color: rgba(0, 0, 0, 0.8); 1014 | } 1015 | 1016 | .video-js .vjs-slider { 1017 | position: relative; 1018 | cursor: pointer; 1019 | padding: 0; 1020 | margin: 0 0.45em 0 0.45em; 1021 | /* iOS Safari */ 1022 | -webkit-touch-callout: none; 1023 | /* Safari */ 1024 | -webkit-user-select: none; 1025 | /* Konqueror HTML */ 1026 | /* Firefox */ 1027 | -moz-user-select: none; 1028 | /* Internet Explorer/Edge */ 1029 | -ms-user-select: none; 1030 | /* Non-prefixed version, currently supported by Chrome and Opera */ 1031 | user-select: none; 1032 | background-color: #73859f; 1033 | background-color: rgba(115, 133, 159, 0.5); 1034 | } 1035 | 1036 | .video-js .vjs-slider.disabled { 1037 | cursor: default; 1038 | } 1039 | 1040 | .video-js .vjs-slider:focus { 1041 | text-shadow: 0em 0em 1em white; 1042 | box-shadow: 0 0 1em #fff; 1043 | } 1044 | 1045 | .video-js .vjs-mute-control { 1046 | cursor: pointer; 1047 | flex: none; 1048 | } 1049 | .video-js .vjs-volume-control { 1050 | cursor: pointer; 1051 | margin-right: 1em; 1052 | display: flex; 1053 | } 1054 | 1055 | .video-js .vjs-volume-control.vjs-volume-horizontal { 1056 | width: 5em; 1057 | } 1058 | 1059 | .video-js .vjs-volume-panel .vjs-volume-control { 1060 | visibility: visible; 1061 | opacity: 0; 1062 | width: 1px; 1063 | height: 1px; 1064 | margin-left: -1px; 1065 | } 1066 | 1067 | .video-js .vjs-volume-panel { 1068 | transition: width 1s; 1069 | } 1070 | .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control, 1071 | .video-js .vjs-volume-panel:active .vjs-volume-control, 1072 | .video-js .vjs-volume-panel:focus .vjs-volume-control, 1073 | .video-js .vjs-volume-panel .vjs-volume-control:active, 1074 | .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control, 1075 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active { 1076 | visibility: visible; 1077 | opacity: 1; 1078 | position: relative; 1079 | transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s; 1080 | } 1081 | .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal, 1082 | .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, 1083 | .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, 1084 | .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, 1085 | .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-horizontal, 1086 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { 1087 | width: 5em; 1088 | height: 3em; 1089 | margin-right: 0; 1090 | } 1091 | .video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical, 1092 | .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical, 1093 | .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical, 1094 | .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical, 1095 | .video-js .vjs-volume-panel.vjs-hover .vjs-mute-control ~ .vjs-volume-control.vjs-volume-vertical, 1096 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical { 1097 | left: -3.5em; 1098 | transition: left 0s; 1099 | } 1100 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, 1101 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active, 1102 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { 1103 | width: 10em; 1104 | transition: width 0.1s; 1105 | } 1106 | .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only { 1107 | width: 4em; 1108 | } 1109 | 1110 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { 1111 | height: 8em; 1112 | width: 3em; 1113 | left: -3000em; 1114 | transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s; 1115 | } 1116 | 1117 | .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { 1118 | transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s; 1119 | } 1120 | 1121 | .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { 1122 | width: 5em; 1123 | height: 3em; 1124 | visibility: visible; 1125 | opacity: 1; 1126 | position: relative; 1127 | transition: none; 1128 | } 1129 | 1130 | .video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical, 1131 | .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical { 1132 | position: absolute; 1133 | bottom: 3em; 1134 | left: 0.5em; 1135 | } 1136 | 1137 | .video-js .vjs-volume-panel { 1138 | display: flex; 1139 | } 1140 | 1141 | .video-js .vjs-volume-bar { 1142 | margin: 1.35em 0.45em; 1143 | } 1144 | 1145 | .vjs-volume-bar.vjs-slider-horizontal { 1146 | width: 5em; 1147 | height: 0.3em; 1148 | } 1149 | 1150 | .vjs-volume-bar.vjs-slider-vertical { 1151 | width: 0.3em; 1152 | height: 5em; 1153 | margin: 1.35em auto; 1154 | } 1155 | 1156 | .video-js .vjs-volume-level { 1157 | position: absolute; 1158 | bottom: 0; 1159 | left: 0; 1160 | background-color: #fff; 1161 | } 1162 | .video-js .vjs-volume-level:before { 1163 | position: absolute; 1164 | font-size: 0.9em; 1165 | } 1166 | 1167 | .vjs-slider-vertical .vjs-volume-level { 1168 | width: 0.3em; 1169 | } 1170 | .vjs-slider-vertical .vjs-volume-level:before { 1171 | top: -0.5em; 1172 | left: -0.3em; 1173 | } 1174 | 1175 | .vjs-slider-horizontal .vjs-volume-level { 1176 | height: 0.3em; 1177 | } 1178 | .vjs-slider-horizontal .vjs-volume-level:before { 1179 | top: -0.3em; 1180 | right: -0.5em; 1181 | } 1182 | 1183 | .video-js .vjs-volume-panel.vjs-volume-panel-vertical { 1184 | width: 5em; 1185 | } 1186 | 1187 | .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level { 1188 | height: 100%; 1189 | } 1190 | 1191 | .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { 1192 | width: 100%; 1193 | } 1194 | 1195 | .video-js .vjs-volume-vertical { 1196 | width: 3em; 1197 | height: 8em; 1198 | bottom: 8em; 1199 | background-color: #2b333f; 1200 | background-color: rgba(43, 51, 63, 0.7); 1201 | } 1202 | 1203 | .video-js .vjs-volume-horizontal .vjs-menu { 1204 | left: -2em; 1205 | } 1206 | 1207 | .vjs-poster { 1208 | display: inline-block; 1209 | vertical-align: middle; 1210 | background-repeat: no-repeat; 1211 | background-position: 50% 50%; 1212 | background-size: contain; 1213 | background-color: #000000; 1214 | cursor: pointer; 1215 | margin: 0; 1216 | padding: 0; 1217 | position: absolute; 1218 | top: 0; 1219 | right: 0; 1220 | bottom: 0; 1221 | left: 0; 1222 | height: 100%; 1223 | } 1224 | 1225 | .vjs-has-started .vjs-poster { 1226 | display: none; 1227 | } 1228 | 1229 | .vjs-audio.vjs-has-started .vjs-poster { 1230 | display: block; 1231 | } 1232 | 1233 | .vjs-using-native-controls .vjs-poster { 1234 | display: none; 1235 | } 1236 | 1237 | .video-js .vjs-live-control { 1238 | display: flex; 1239 | align-items: flex-start; 1240 | flex: auto; 1241 | font-size: 1em; 1242 | line-height: 3em; 1243 | } 1244 | 1245 | .vjs-no-flex .vjs-live-control { 1246 | display: table-cell; 1247 | width: auto; 1248 | text-align: left; 1249 | } 1250 | 1251 | .video-js:not(.vjs-live) .vjs-live-control, 1252 | .video-js.vjs-liveui .vjs-live-control { 1253 | display: none; 1254 | } 1255 | 1256 | .video-js .vjs-seek-to-live-control { 1257 | align-items: center; 1258 | cursor: pointer; 1259 | flex: none; 1260 | display: inline-flex; 1261 | height: 100%; 1262 | padding-left: 0.5em; 1263 | padding-right: 0.5em; 1264 | font-size: 1em; 1265 | line-height: 3em; 1266 | width: auto; 1267 | min-width: 4em; 1268 | } 1269 | 1270 | .vjs-no-flex .vjs-seek-to-live-control { 1271 | display: table-cell; 1272 | width: auto; 1273 | text-align: left; 1274 | } 1275 | 1276 | .video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control, 1277 | .video-js:not(.vjs-live) .vjs-seek-to-live-control { 1278 | display: none; 1279 | } 1280 | 1281 | .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge { 1282 | cursor: auto; 1283 | } 1284 | 1285 | .vjs-seek-to-live-control .vjs-icon-placeholder { 1286 | margin-right: 0.5em; 1287 | color: #888; 1288 | } 1289 | 1290 | .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder { 1291 | color: red; 1292 | } 1293 | 1294 | .video-js .vjs-time-control { 1295 | flex: none; 1296 | font-size: 1em; 1297 | line-height: 3em; 1298 | min-width: 2em; 1299 | width: auto; 1300 | padding-left: 1em; 1301 | padding-right: 1em; 1302 | } 1303 | 1304 | .vjs-live .vjs-time-control { 1305 | display: none; 1306 | } 1307 | 1308 | .video-js .vjs-current-time, 1309 | .vjs-no-flex .vjs-current-time { 1310 | display: none; 1311 | } 1312 | 1313 | .video-js .vjs-duration, 1314 | .vjs-no-flex .vjs-duration { 1315 | display: none; 1316 | } 1317 | 1318 | .vjs-time-divider { 1319 | display: none; 1320 | line-height: 3em; 1321 | } 1322 | 1323 | .vjs-live .vjs-time-divider { 1324 | display: none; 1325 | } 1326 | 1327 | .video-js .vjs-play-control { 1328 | cursor: pointer; 1329 | } 1330 | 1331 | .video-js .vjs-play-control .vjs-icon-placeholder { 1332 | flex: none; 1333 | } 1334 | 1335 | .vjs-text-track-display { 1336 | position: absolute; 1337 | bottom: 3em; 1338 | left: 0; 1339 | right: 0; 1340 | top: 0; 1341 | pointer-events: none; 1342 | } 1343 | 1344 | .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display { 1345 | bottom: 1em; 1346 | } 1347 | 1348 | .video-js .vjs-text-track { 1349 | font-size: 1.4em; 1350 | text-align: center; 1351 | margin-bottom: 0.1em; 1352 | } 1353 | 1354 | .vjs-subtitles { 1355 | color: #fff; 1356 | } 1357 | 1358 | .vjs-captions { 1359 | color: #fc6; 1360 | } 1361 | 1362 | .vjs-tt-cue { 1363 | display: block; 1364 | } 1365 | 1366 | video::-webkit-media-text-track-display { 1367 | transform: translateY(-3em); 1368 | } 1369 | 1370 | .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display { 1371 | transform: translateY(-1.5em); 1372 | } 1373 | 1374 | .video-js .vjs-picture-in-picture-control { 1375 | cursor: pointer; 1376 | flex: none; 1377 | } 1378 | .video-js .vjs-fullscreen-control { 1379 | cursor: pointer; 1380 | flex: none; 1381 | } 1382 | .vjs-playback-rate > .vjs-menu-button, 1383 | .vjs-playback-rate .vjs-playback-rate-value { 1384 | position: absolute; 1385 | top: 0; 1386 | left: 0; 1387 | width: 100%; 1388 | height: 100%; 1389 | } 1390 | 1391 | .vjs-playback-rate .vjs-playback-rate-value { 1392 | pointer-events: none; 1393 | font-size: 1.5em; 1394 | line-height: 2; 1395 | text-align: center; 1396 | } 1397 | 1398 | .vjs-playback-rate .vjs-menu { 1399 | width: 4em; 1400 | left: 0em; 1401 | } 1402 | 1403 | .vjs-error .vjs-error-display .vjs-modal-dialog-content { 1404 | font-size: 1.4em; 1405 | text-align: center; 1406 | } 1407 | 1408 | .vjs-error .vjs-error-display:before { 1409 | color: #fff; 1410 | content: "X"; 1411 | font-family: Arial, Helvetica, sans-serif; 1412 | font-size: 4em; 1413 | left: 0; 1414 | line-height: 1; 1415 | margin-top: -0.5em; 1416 | position: absolute; 1417 | text-shadow: 0.05em 0.05em 0.1em #000; 1418 | text-align: center; 1419 | top: 50%; 1420 | vertical-align: middle; 1421 | width: 100%; 1422 | } 1423 | 1424 | .vjs-loading-spinner { 1425 | display: none; 1426 | position: absolute; 1427 | top: 50%; 1428 | left: 50%; 1429 | margin: -25px 0 0 -25px; 1430 | opacity: 0.85; 1431 | text-align: left; 1432 | border: 6px solid rgba(43, 51, 63, 0.7); 1433 | box-sizing: border-box; 1434 | background-clip: padding-box; 1435 | width: 50px; 1436 | height: 50px; 1437 | border-radius: 25px; 1438 | visibility: hidden; 1439 | } 1440 | 1441 | .vjs-seeking .vjs-loading-spinner, 1442 | .vjs-waiting .vjs-loading-spinner { 1443 | display: block; 1444 | -webkit-animation: vjs-spinner-show 0s linear 0.3s forwards; 1445 | animation: vjs-spinner-show 0s linear 0.3s forwards; 1446 | } 1447 | 1448 | .vjs-loading-spinner:before, 1449 | .vjs-loading-spinner:after { 1450 | content: ""; 1451 | position: absolute; 1452 | margin: -6px; 1453 | box-sizing: inherit; 1454 | width: inherit; 1455 | height: inherit; 1456 | border-radius: inherit; 1457 | opacity: 1; 1458 | border: inherit; 1459 | border-color: transparent; 1460 | border-top-color: white; 1461 | } 1462 | 1463 | .vjs-seeking .vjs-loading-spinner:before, 1464 | .vjs-seeking .vjs-loading-spinner:after, 1465 | .vjs-waiting .vjs-loading-spinner:before, 1466 | .vjs-waiting .vjs-loading-spinner:after { 1467 | -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, 1468 | vjs-spinner-fade 1.1s linear infinite; 1469 | animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite; 1470 | } 1471 | 1472 | .vjs-seeking .vjs-loading-spinner:before, 1473 | .vjs-waiting .vjs-loading-spinner:before { 1474 | border-top-color: white; 1475 | } 1476 | 1477 | .vjs-seeking .vjs-loading-spinner:after, 1478 | .vjs-waiting .vjs-loading-spinner:after { 1479 | border-top-color: white; 1480 | -webkit-animation-delay: 0.44s; 1481 | animation-delay: 0.44s; 1482 | } 1483 | 1484 | @keyframes vjs-spinner-show { 1485 | to { 1486 | visibility: visible; 1487 | } 1488 | } 1489 | @-webkit-keyframes vjs-spinner-show { 1490 | to { 1491 | visibility: visible; 1492 | } 1493 | } 1494 | @keyframes vjs-spinner-spin { 1495 | 100% { 1496 | transform: rotate(360deg); 1497 | } 1498 | } 1499 | @-webkit-keyframes vjs-spinner-spin { 1500 | 100% { 1501 | -webkit-transform: rotate(360deg); 1502 | } 1503 | } 1504 | @keyframes vjs-spinner-fade { 1505 | 0% { 1506 | border-top-color: #73859f; 1507 | } 1508 | 20% { 1509 | border-top-color: #73859f; 1510 | } 1511 | 35% { 1512 | border-top-color: white; 1513 | } 1514 | 60% { 1515 | border-top-color: #73859f; 1516 | } 1517 | 100% { 1518 | border-top-color: #73859f; 1519 | } 1520 | } 1521 | @-webkit-keyframes vjs-spinner-fade { 1522 | 0% { 1523 | border-top-color: #73859f; 1524 | } 1525 | 20% { 1526 | border-top-color: #73859f; 1527 | } 1528 | 35% { 1529 | border-top-color: white; 1530 | } 1531 | 60% { 1532 | border-top-color: #73859f; 1533 | } 1534 | 100% { 1535 | border-top-color: #73859f; 1536 | } 1537 | } 1538 | .vjs-chapters-button .vjs-menu ul { 1539 | width: 24em; 1540 | } 1541 | 1542 | .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { 1543 | vertical-align: middle; 1544 | display: inline-block; 1545 | margin-bottom: -0.1em; 1546 | } 1547 | 1548 | .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { 1549 | font-family: VideoJS; 1550 | content: ""; 1551 | font-size: 1.5em; 1552 | line-height: inherit; 1553 | } 1554 | 1555 | .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder { 1556 | vertical-align: middle; 1557 | display: inline-block; 1558 | margin-bottom: -0.1em; 1559 | } 1560 | 1561 | .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { 1562 | font-family: VideoJS; 1563 | content: " "; 1564 | font-size: 1.5em; 1565 | line-height: inherit; 1566 | } 1567 | 1568 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-current-time, 1569 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-time-divider, 1570 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-duration, 1571 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-remaining-time, 1572 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-playback-rate, 1573 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-chapters-button, 1574 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-descriptions-button, 1575 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-captions-button, 1576 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-subtitles-button, 1577 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-audio-button, 1578 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-control, 1579 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-current-time, 1580 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-time-divider, 1581 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-duration, 1582 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-remaining-time, 1583 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-playback-rate, 1584 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-chapters-button, 1585 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-descriptions-button, 1586 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-captions-button, 1587 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-subtitles-button, 1588 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-audio-button, 1589 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-control, 1590 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-current-time, 1591 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-time-divider, 1592 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-duration, 1593 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-remaining-time, 1594 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-playback-rate, 1595 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-chapters-button, 1596 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-descriptions-button, 1597 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-captions-button, 1598 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subtitles-button, 1599 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-audio-button, 1600 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-control { 1601 | display: none; 1602 | } 1603 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, 1604 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, 1605 | .video-js:not(.vjs-fullscreen).vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 1606 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover, 1607 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active, 1608 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, 1609 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover, 1610 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active, 1611 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { 1612 | width: auto; 1613 | width: initial; 1614 | } 1615 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-liveui) .vjs-subs-caps-button, 1616 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small:not(.vjs-live) .vjs-subs-caps-button, 1617 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-subs-caps-button { 1618 | display: none; 1619 | } 1620 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-custom-control-spacer, 1621 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-custom-control-spacer { 1622 | flex: auto; 1623 | display: block; 1624 | } 1625 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui.vjs-no-flex .vjs-custom-control-spacer, 1626 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny.vjs-no-flex .vjs-custom-control-spacer { 1627 | width: auto; 1628 | } 1629 | .video-js:not(.vjs-fullscreen).vjs-layout-x-small.vjs-liveui .vjs-progress-control, 1630 | .video-js:not(.vjs-fullscreen).vjs-layout-tiny .vjs-progress-control { 1631 | display: none; 1632 | } 1633 | 1634 | .vjs-modal-dialog.vjs-text-track-settings { 1635 | background-color: #2b333f; 1636 | background-color: rgba(43, 51, 63, 0.75); 1637 | color: #fff; 1638 | height: 70%; 1639 | } 1640 | 1641 | .vjs-text-track-settings .vjs-modal-dialog-content { 1642 | display: table; 1643 | } 1644 | 1645 | .vjs-text-track-settings .vjs-track-settings-colors, 1646 | .vjs-text-track-settings .vjs-track-settings-font, 1647 | .vjs-text-track-settings .vjs-track-settings-controls { 1648 | display: table-cell; 1649 | } 1650 | 1651 | .vjs-text-track-settings .vjs-track-settings-controls { 1652 | text-align: right; 1653 | vertical-align: bottom; 1654 | } 1655 | 1656 | @supports (display: grid) { 1657 | .vjs-text-track-settings .vjs-modal-dialog-content { 1658 | display: grid; 1659 | grid-template-columns: 1fr 1fr; 1660 | grid-template-rows: 1fr; 1661 | padding: 20px 24px 0px 24px; 1662 | } 1663 | 1664 | .vjs-track-settings-controls .vjs-default-button { 1665 | margin-bottom: 20px; 1666 | } 1667 | 1668 | .vjs-text-track-settings .vjs-track-settings-controls { 1669 | grid-column: 1/-1; 1670 | } 1671 | 1672 | .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content, 1673 | .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content, 1674 | .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content { 1675 | grid-template-columns: 1fr; 1676 | } 1677 | } 1678 | .vjs-track-setting > select { 1679 | margin-right: 1em; 1680 | margin-bottom: 0.5em; 1681 | } 1682 | 1683 | .vjs-text-track-settings fieldset { 1684 | margin: 5px; 1685 | padding: 3px; 1686 | border: none; 1687 | } 1688 | 1689 | .vjs-text-track-settings fieldset span { 1690 | display: inline-block; 1691 | } 1692 | 1693 | .vjs-text-track-settings fieldset span > select { 1694 | max-width: 7.3em; 1695 | } 1696 | 1697 | .vjs-text-track-settings legend { 1698 | color: #fff; 1699 | margin: 0 0 5px 0; 1700 | } 1701 | 1702 | .vjs-text-track-settings .vjs-label { 1703 | position: absolute; 1704 | clip: rect(1px 1px 1px 1px); 1705 | clip: rect(1px, 1px, 1px, 1px); 1706 | display: block; 1707 | margin: 0 0 5px 0; 1708 | padding: 0; 1709 | border: 0; 1710 | height: 1px; 1711 | width: 1px; 1712 | overflow: hidden; 1713 | } 1714 | 1715 | .vjs-track-settings-controls button:focus, 1716 | .vjs-track-settings-controls button:active { 1717 | outline-style: solid; 1718 | outline-width: medium; 1719 | background-image: linear-gradient(0deg, #fff 88%, #73859f 100%); 1720 | } 1721 | 1722 | .vjs-track-settings-controls button:hover { 1723 | color: rgba(43, 51, 63, 0.75); 1724 | } 1725 | 1726 | .vjs-track-settings-controls button { 1727 | background-color: #fff; 1728 | background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%); 1729 | color: #2b333f; 1730 | cursor: pointer; 1731 | border-radius: 2px; 1732 | } 1733 | 1734 | .vjs-track-settings-controls .vjs-default-button { 1735 | margin-right: 1em; 1736 | } 1737 | 1738 | @media print { 1739 | .video-js > *:not(.vjs-tech):not(.vjs-poster) { 1740 | visibility: hidden; 1741 | } 1742 | } 1743 | .vjs-resize-manager { 1744 | position: absolute; 1745 | top: 0; 1746 | left: 0; 1747 | width: 100%; 1748 | height: 100%; 1749 | border: none; 1750 | z-index: -1000; 1751 | } 1752 | 1753 | .js-focus-visible .video-js *:focus:not(.focus-visible) { 1754 | outline: none; 1755 | } 1756 | 1757 | .video-js *:focus:not(:focus-visible) { 1758 | outline: none; 1759 | } 1760 | --------------------------------------------------------------------------------