From cd3ec1970d0ed2a894e6b5e4a981e3c4b273b0e8 Mon Sep 17 00:00:00 2001 From: cjw <1468733552@qq.com> Date: Mon, 11 May 2020 10:40:16 +0800 Subject: [PATCH] refactor: add ttplayervideo support dynamic use mse, and create standard mse library add ttplayervideo support dynamic use mse, and create standard mse library, delete useless video component and control component relative dependency, update relative rollup script code --- packages/core/src/index.ts | 8 +- packages/core/src/media/video/index.ts | 51 +++++- packages/core/src/media/video/mse.ts | 29 +++ packages/mse/README.md | 11 ++ packages/{video => mse}/package.json | 15 +- .../{video/src/mse => mse/src}/dash/dash.d.ts | 3 +- packages/mse/src/dash/index.ts | 53 ++++++ .../{video/src/mse => mse/src}/flv/flv.d.ts | 0 packages/mse/src/flv/index.ts | 64 +++++++ .../{video/src/mse => mse/src}/hls/hls.d.ts | 0 packages/mse/src/hls/index.ts | 57 ++++++ packages/mse/src/index.ts | 11 ++ packages/mse/src/webtorrent/index.ts | 57 ++++++ .../src}/webtorrent/webtorrent.d.ts | 0 packages/ttplayer/package.json | 6 +- packages/ttplayer/src/index.less | 2 +- packages/ttplayer/src/index.ts | 18 +- packages/video/README.en_US.md | 66 ------- packages/video/README.md | 66 ------- packages/video/__tests__/video.test.js | 7 - packages/video/src/index.ts | 166 ------------------ packages/video/src/mse/dash/index.ts | 23 --- packages/video/src/mse/flv/index.ts | 33 ---- packages/video/src/mse/hls/index.ts | 21 --- packages/video/src/mse/index.ts | 13 -- packages/video/src/mse/webtorrent/index.ts | 25 --- packages/video/src/options.ts | 34 ---- packages/video/src/type.ts | 76 -------- scripts/watch.js | 4 +- 29 files changed, 365 insertions(+), 554 deletions(-) create mode 100644 packages/core/src/media/video/mse.ts create mode 100644 packages/mse/README.md rename packages/{video => mse}/package.json (69%) rename packages/{video/src/mse => mse/src}/dash/dash.d.ts (99%) create mode 100644 packages/mse/src/dash/index.ts rename packages/{video/src/mse => mse/src}/flv/flv.d.ts (100%) create mode 100644 packages/mse/src/flv/index.ts rename packages/{video/src/mse => mse/src}/hls/hls.d.ts (100%) create mode 100644 packages/mse/src/hls/index.ts create mode 100644 packages/mse/src/index.ts create mode 100644 packages/mse/src/webtorrent/index.ts rename packages/{video/src/mse => mse/src}/webtorrent/webtorrent.d.ts (100%) delete mode 100644 packages/video/README.en_US.md delete mode 100644 packages/video/README.md delete mode 100644 packages/video/__tests__/video.test.js delete mode 100644 packages/video/src/index.ts delete mode 100644 packages/video/src/mse/dash/index.ts delete mode 100644 packages/video/src/mse/flv/index.ts delete mode 100644 packages/video/src/mse/hls/index.ts delete mode 100644 packages/video/src/mse/index.ts delete mode 100644 packages/video/src/mse/webtorrent/index.ts delete mode 100644 packages/video/src/options.ts delete mode 100644 packages/video/src/type.ts diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index ef31fbb..8463ab2 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -6,7 +6,11 @@ import TTPlayerMedia, { TTPlayerMediaOptions, TTPlayerMediaComponent, } from './media/media'; -import TTPlayerVideo, { TTPlayerVideoFactory, TTPlayerVideoOptions } from './media/video'; +import TTPlayerVideo, { + TTPlayerVideoFactory, + TTPlayerVideoOptions, + VideoMSE, +} from './media/video'; import TTPlayerAudio, { TTPlayerAudioFactory, TTPlayerAudioOptions } from './media/audio'; import TTPlayerPlayButton from './components/play-button'; import TTPlayerTime from './components/time'; @@ -24,6 +28,7 @@ import { TTPlayerQualityList, TTPlayerBaseQuality, } from './components/quality-switch'; + import { TTPlayerPlaySwitch, TTPlayerPlayList, @@ -61,6 +66,7 @@ export { TTPlayerMediaOptions, TTPlayerMediaComponent, + VideoMSE, TTPlayerVideo, TTPlayerVideoFactory, TTPlayerVideoOptions, diff --git a/packages/core/src/media/video/index.ts b/packages/core/src/media/video/index.ts index 370e292..e343b56 100644 --- a/packages/core/src/media/video/index.ts +++ b/packages/core/src/media/video/index.ts @@ -2,9 +2,9 @@ import TTPlayerCore from '../../core'; import TTPlayerMedia, { TMediaType } from '../media'; import TTPlayerMediaComponent from '../component'; import TTPlayerVideoOptions from './option'; +import VideoMSE, { IMSECtor } from './mse'; import { DOMUtils } from '@dking/ttplayer-utils'; - const VIDEO_MEDIA_TYPE: TMediaType = 'Video'; interface TTPlayerVideoComponentCtor { @@ -16,7 +16,10 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> { static className: string = 'ttplayer__video--component'; static mediaType = VIDEO_MEDIA_TYPE; static videoComponentsCtor: TTPlayerVideoComponentCtor[] = []; + static msesCtor: IMSECtor[] = []; + public mses: VideoMSE[] = []; + public currentMSE: VideoMSE | null = null; public video: DOMUtils; public options: TTPlayerVideoOptions; public videoComponents: TTPlayerMediaComponent<'Video'>[] = [] @@ -30,6 +33,7 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> { ...player.options.video, }); this.initVideoComponents(); + this.initMSE(); } static use (videoComponentCtor: TTPlayerVideoComponentCtor) { @@ -37,6 +41,22 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> { return this; } + static useMSE (ctor: IMSECtor) { + this.msesCtor.push(ctor); + return this; + } + + get src (): string { + return this.mediaDom.src; + } + + set src (src: string) { + this.logger.debug(`media set src ${ src }`); + this.mediaDom.src = src; + this.options.src = src; + this.createMSE(src); + } + get poster (): string { return this.mediaDom.poster; } @@ -66,6 +86,7 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> { componentWillUnmount () { super.componentWillUnmount(); this.videoComponents.forEach(comp => comp.componentWillUnmount()); + this.clearMSE(); } beforeRender () { @@ -78,12 +99,37 @@ class TTPlayerVideo extends TTPlayerMedia<'Video'> { super.render(); } + private initMSE () { + /* eslint-disable */ + const msesCtor = (this.constructor as typeof TTPlayerVideo).msesCtor || []; + /* eslint-enable */ + msesCtor.forEach(ctor => { + this.mses.push(new ctor(this)); + }); + } + + private createMSE (src: string, type: string = 'auto') { + const mses = this.mses; + for (let i = 0; i < mses.length; i++) { + const mse = mses[i]; + if (!mse.checkType(src, type)) continue; + mse.initMSE(src); + this.currentMSE = mse; + break; // 初始化直接跳过后续检查 + } + } + + private clearMSE () { + if (!this.currentMSE) return; + this.currentMSE.clearMSE(); + } + private initVideoComponents () { /* eslint-disable */ (this.constructor as typeof TTPlayerVideo).videoComponentsCtor.forEach(ctor => { this.videoComponents.push(new ctor(this)); }); - /* eslint-enable */ + /* eslint-enable */ } private renderVideoComponents () { @@ -114,6 +160,7 @@ export { TTPlayerVideoComponentCtor, TTPlayerVideoFactory, TTPlayerVideoOptions, + VideoMSE, }; export default TTPlayerVideo; diff --git a/packages/core/src/media/video/mse.ts b/packages/core/src/media/video/mse.ts new file mode 100644 index 0000000..c51491a --- /dev/null +++ b/packages/core/src/media/video/mse.ts @@ -0,0 +1,29 @@ +import TTPlayerVideo from '.'; + +interface IMSECtor { + new (video: TTPlayerVideo): MSE; +} + +class MSE { + + public video: TTPlayerVideo; + constructor (video: TTPlayerVideo) { + this.video = video; + } + + checkType (url: string, type: string): boolean { + console.log(url, type); + return false; + } + + initMSE (url: string, options?: any) { + console.log(url, options); + } + + clearMSE () {} + +} + +export { IMSECtor }; + +export default MSE; diff --git a/packages/mse/README.md b/packages/mse/README.md new file mode 100644 index 0000000..3e56ec4 --- /dev/null +++ b/packages/mse/README.md @@ -0,0 +1,11 @@ +# `mse` + +> TODO: description + +## Usage + +``` +const mse = require('mse'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/video/package.json b/packages/mse/package.json similarity index 69% rename from packages/video/package.json rename to packages/mse/package.json index 367800f..39edaf7 100644 --- a/packages/video/package.json +++ b/packages/mse/package.json @@ -1,16 +1,13 @@ { - "name": "@dking/ttplayer-video", + "name": "@dking/ttplayer-mse", "version": "0.0.3", - "description": "ccplayer-video", + "description": "> TODO: description", "author": "cjw <1468733552@qq.com>", "homepage": "https://github.com/JohnApache/TT-Player#readme", "license": "MIT", "main": "./lib/index.js", "module": "./lib/index.esm.js", "typings": "./lib/index.d.ts", - "publishConfig": { - "access": "public" - }, "directories": { "lib": "lib", "test": "__tests__" @@ -22,13 +19,13 @@ "type": "git", "url": "git+https://github.com/JohnApache/TT-Player.git" }, - "scripts": {}, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1" + }, "bugs": { "url": "https://github.com/JohnApache/TT-Player/issues" }, "dependencies": { - "@dking/ttplayer-core": "^0.0.3", - "@dking/ttplayer-utils": "^0.0.3", - "eventemitter3": "^4.0.0" + "@dking/ttplayer-core": "^0.0.3" } } diff --git a/packages/video/src/mse/dash/dash.d.ts b/packages/mse/src/dash/dash.d.ts similarity index 99% rename from packages/video/src/mse/dash/dash.d.ts rename to packages/mse/src/dash/dash.d.ts index 93d436e..73d928b 100644 --- a/packages/video/src/mse/dash/dash.d.ts +++ b/packages/mse/src/dash/dash.d.ts @@ -980,4 +980,5 @@ declare namespace dashjs { export type MetricType = 'ManifestUpdate' | 'RequestsQueue'; export type TrackSwitchMode = 'alwaysReplace' | 'neverReplace'; export type TrackSelectionMode = 'highestBitrate' | 'widestRange'; -} \ No newline at end of file +} + diff --git a/packages/mse/src/dash/index.ts b/packages/mse/src/dash/index.ts new file mode 100644 index 0000000..07dc801 --- /dev/null +++ b/packages/mse/src/dash/index.ts @@ -0,0 +1,53 @@ +import { MediaPlayerClass } from './dash'; +import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core'; + +declare global { + interface Window { + dashjs: MediaPlayerClass; + } +} + +class DashMSE extends VideoMSE { + + static MSE_TYPE: string = 'dash'; + public MSE_TYPE: string; + public __dash__: MediaPlayerClass | null = null; + + constructor (video: TTPlayerVideo) { + super(video); + this.handleMSEError = this.handleMSEError.bind(this); + /* eslint-disable */ + this.MSE_TYPE = (this.constructor as typeof DashMSE).MSE_TYPE || 'auto'; + /* eslint-enable */ + } + + checkType (url: string, type: string = 'auto'): boolean { + if (type === this.MSE_TYPE) return true; + return type === 'auto' && !!(/.mpd(#|\?|$)/i).exec(url); + } + + initMSE (url: string, dashOption?: any) { + const dashjs = window.dashjs; + if (!dashjs) throw new Error(`can't find dashjs`); + const dash = dashjs.MediaPlayer().create(); + dashOption && dash.updateSettings(dashOption); + dash.initialize(this.video.mediaDom, url, false); + dash.on('error', this.handleMSEError); + this.__dash__ = dash; + } + + clearMSE () { + if (this.__dash__) { + this.__dash__.off('error', this.handleMSEError); + this.__dash__.reset(); + } + this.__dash__ = null; + } + + private handleMSEError (error: any) { + this.video.event.emit('error', error); + } + +} + +export default DashMSE; diff --git a/packages/video/src/mse/flv/flv.d.ts b/packages/mse/src/flv/flv.d.ts similarity index 100% rename from packages/video/src/mse/flv/flv.d.ts rename to packages/mse/src/flv/flv.d.ts diff --git a/packages/mse/src/flv/index.ts b/packages/mse/src/flv/index.ts new file mode 100644 index 0000000..d1f0fa2 --- /dev/null +++ b/packages/mse/src/flv/index.ts @@ -0,0 +1,64 @@ +import FlvJs from './flv'; +import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core'; + +declare global { + interface Window { + flvjs: typeof FlvJs; + } +} + +class FlvMSE extends VideoMSE { + + static MSE_TYPE: string = 'flv'; + public MSE_TYPE: string; + public __flv__: FlvJs.Player | null = null; + constructor (video: TTPlayerVideo) { + super(video); + this.handleFlvError = this.handleFlvError.bind(this); + /* eslint-disable */ + this.MSE_TYPE = (this.constructor as typeof FlvMSE).MSE_TYPE || 'auto'; + /* eslint-enable */ + } + + checkType (url: string, type: string = 'auto'): boolean { + if (type === this.MSE_TYPE) return true; + return type === 'auto' && !!(/.flv(#|\?|$)/i).exec(url); + } + + initMSE (url: string, flvjsOption?: any) { + const { + mediaDataSource = {}, + config = {}, + } = flvjsOption || {}; + const flvjs = window.flvjs; + if (!flvjs) throw new Error(`can't find flvjs`); + if (!flvjs.isSupported()) throw new Error(`flv is not supported`); + + const options = { + url : url, + type: 'flv', + ...mediaDataSource, + }; + + const flv = flvjs.createPlayer(options, config); + flv.attachMediaElement(this.video.mediaDom); + flv.load(); + flv.on('error', this.handleFlvError); + this.__flv__ = flv; + } + + clearMSE () { + if (this.__flv__) { + this.__flv__.off('error', this.handleFlvError); + this.__flv__.destroy(); + } + this.__flv__ = null; + } + + private handleFlvError (error: any) { + this.video.event.emit('error', error); + } + +} + +export default FlvMSE; diff --git a/packages/video/src/mse/hls/hls.d.ts b/packages/mse/src/hls/hls.d.ts similarity index 100% rename from packages/video/src/mse/hls/hls.d.ts rename to packages/mse/src/hls/hls.d.ts diff --git a/packages/mse/src/hls/index.ts b/packages/mse/src/hls/index.ts new file mode 100644 index 0000000..10135c9 --- /dev/null +++ b/packages/mse/src/hls/index.ts @@ -0,0 +1,57 @@ +import Hls from './hls'; +import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core'; + +declare global { + interface Window { + Hls: Hls; + } +} + +class HlsMSE extends VideoMSE { + + static MSE_TYPE: string = 'hls'; + public MSE_TYPE: string; + public __hls__: Hls | null = null; + constructor (video: TTPlayerVideo) { + super(video); + this.handleFlvError = this.handleFlvError.bind(this); + /* eslint-disable */ + this.MSE_TYPE = (this.constructor as typeof HlsMSE).MSE_TYPE || 'auto'; + /* eslint-enable */ + } + + checkType (url: string, type: string = 'auto'): boolean { + if (type === this.MSE_TYPE) return true; + if ( + this.video.mediaDom.canPlayType('application/x-mpegURL') || + this.video.mediaDom.canPlayType('application/vnd.apple.mpegURL') + ) return false; // 能播放hls 的时候不需要用解析器 + return type === 'auto' && !!(/.m3u8(#|\?|$)/i).exec(url); + } + + initMSE (url: string, hlsOption?: any) { + const hlsjs = window.Hls; + if (!hlsjs) throw new Error(`can't find hlsjs`); + if (!hlsjs.isSupported()) throw new Error(`hlsjs is not supported`); + + const hls = new hlsjs(hlsOption); + hls.loadSource(url); + hls.attachMedia(this.video.mediaDom); + this.__hls__ = hls; + } + + clearMSE () { + if (this.__hls__) { + this.__hls__.off('hlsError', this.handleFlvError); + this.__hls__.destroy(); + } + this.__hls__ = null; + } + + private handleFlvError (error: any) { + this.video.event.emit('error', error); + } + +} + +export default HlsMSE; diff --git a/packages/mse/src/index.ts b/packages/mse/src/index.ts new file mode 100644 index 0000000..a64f9e5 --- /dev/null +++ b/packages/mse/src/index.ts @@ -0,0 +1,11 @@ +import FlvMSE from './flv'; +import DashMSE from './dash'; +import WebTorrentMSE from './webtorrent'; +import HlsMSE from './hls'; + +export { + FlvMSE, + DashMSE, + WebTorrentMSE, + HlsMSE, +}; diff --git a/packages/mse/src/webtorrent/index.ts b/packages/mse/src/webtorrent/index.ts new file mode 100644 index 0000000..f9e01e8 --- /dev/null +++ b/packages/mse/src/webtorrent/index.ts @@ -0,0 +1,57 @@ +import WebTorrent from './webtorrent'; +import { VideoMSE, TTPlayerVideo } from '@dking/ttplayer-core'; + +declare global { + interface Window { + WebTorrent: WebTorrent.WebTorrent; + } +} + +class WebTorrentMSE extends VideoMSE { + + static MSE_TYPE: string = 'hls'; + public MSE_TYPE: string; + public __webtorrent__: WebTorrent.Instance | null = null; + constructor (video: TTPlayerVideo) { + super(video); + this.handleFlvError = this.handleFlvError.bind(this); + /* eslint-disable */ + this.MSE_TYPE = (this.constructor as typeof WebTorrentMSE).MSE_TYPE || 'auto'; + /* eslint-enable */ + } + + checkType (_url: string, type: string = 'auto'): boolean { + return type === this.MSE_TYPE; + } + + initMSE (url: string, webTorrentOption?: any) { + const webTorrent = window.WebTorrent; + if (!webTorrent) throw new Error(`can't find WebTorrent`); + if (!webTorrent.WEBRTC_SUPPORT) throw new Error(`WebTorrent is not supported`); + + const client = new webTorrent(webTorrentOption); + + client.add(url, torrent => { + const file = torrent.files.find(file => file.name.endsWith('.mp4')); + if (!file) return; + file.renderTo(this.video.mediaDom, { autoplay: false }); + }); + + this.__webtorrent__ = client; + } + + clearMSE () { + if (this.__webtorrent__) { + this.__webtorrent__.off('error', this.handleFlvError); + this.__webtorrent__.destroy(); + } + this.__webtorrent__ = null; + } + + private handleFlvError (error: any) { + this.video.event.emit('error', error); + } + +} + +export default WebTorrentMSE; diff --git a/packages/video/src/mse/webtorrent/webtorrent.d.ts b/packages/mse/src/webtorrent/webtorrent.d.ts similarity index 100% rename from packages/video/src/mse/webtorrent/webtorrent.d.ts rename to packages/mse/src/webtorrent/webtorrent.d.ts diff --git a/packages/ttplayer/package.json b/packages/ttplayer/package.json index 47cc1d6..07cf711 100644 --- a/packages/ttplayer/package.json +++ b/packages/ttplayer/package.json @@ -28,9 +28,7 @@ "dependencies": { "@dking/ttplayer-components": "^0.0.3", "@dking/ttplayer-core": "^0.0.3", - "@dking/ttplayer-utils": "^0.0.3", - "@dking/ttplayer-video": "^0.0.3", - "@dking/ttplayer-video-control": "^0.0.3", - "@dking/ttplayer-video-play-button": "^0.0.3" + "@dking/ttplayer-mse": "^0.0.3", + "@dking/ttplayer-utils": "^0.0.3" } } diff --git a/packages/ttplayer/src/index.less b/packages/ttplayer/src/index.less index 15f0b1a..3613475 100644 --- a/packages/ttplayer/src/index.less +++ b/packages/ttplayer/src/index.less @@ -11,7 +11,7 @@ margin: 0; padding: 0; } - .ttplayer--video { + .ttplayer__video--component { width: 100%; height: 100%; } diff --git a/packages/ttplayer/src/index.ts b/packages/ttplayer/src/index.ts index 3b6710e..4f417c2 100644 --- a/packages/ttplayer/src/index.ts +++ b/packages/ttplayer/src/index.ts @@ -6,9 +6,17 @@ import { TTVideoPlayButton, } from '@dking/ttplayer-components'; import { - TTPlayerCoreFactory, TTPlayerVideo as Video, TTPlayerCore as Core, + FlvMSE, + HlsMSE, + DashMSE, + WebTorrentMSE, +} from '@dking/ttplayer-mse'; +import { + TTPlayerCoreFactory, + TTPlayerVideoFactory, + TTPlayerVideo as Video, + TTPlayerCore as Core, } from '@dking/ttplayer-core'; -import { TTPlayerVideoFactory } from '@dking/ttplayer-video'; import './index.less'; const TTPlayerVideo: typeof Video = @@ -17,7 +25,11 @@ const TTPlayerVideo: typeof Video = .use(TTVideoLoading) .use(TTVideoError) .use(TTVideoPIPButton) - .use(TTVideoPlayButton); + .use(TTVideoPlayButton) + .useMSE(FlvMSE) + .useMSE(HlsMSE) + .useMSE(DashMSE) + .useMSE(WebTorrentMSE); const TTPlayerCore: typeof Core = TTPlayerCoreFactory() diff --git a/packages/video/README.en_US.md b/packages/video/README.en_US.md deleted file mode 100644 index 4ef695d..0000000 --- a/packages/video/README.en_US.md +++ /dev/null @@ -1,66 +0,0 @@ -# Project Name - -[![NPM version][npm-image]][npm-url] -[![build status][travis-image]][travis-url] -[![Test coverage][codecov-image]][codecov-url] -[![Known Vulnerabilities][snyk-image]][snyk-url] -[![npm download][download-image]][download-url] - -[npm-image]: https://img.shields.io/npm/v/:packageName.svg?style=flat-square -[npm-url]: https://npmjs.org/package/:packageName -[travis-image]: https://www.travis-ci.org/JohnApache/:packageName.svg -[travis-url]: https://travis-ci.org/JohnApache/:packageName -[codecov-image]: https://codecov.io/gh/JohnApache/:packageName/branch/master/graph/badge.svg -[codecov-url]: https://codecov.io/gh/JohnApache/:packageName -[snyk-image]: https://snyk.io/test/github/JohnApache/:packageName/badge.svg?targetFile=package.json -[snyk-url]: https://snyk.io/test/github/JohnApache/:packageName?targetFile=package.json -[download-image]: https://img.shields.io/npm/dm/:packageName.svg?style=flat-square -[download-url]: https://npmjs.org/package/:packageName - -- [English](README.en_US.md) -- [简体中文](README.md) - -> This is an example file with maximal choices selected. - -- [Install](#install) -- [Usage](#usage) -- [Configuration](#configuration) -- [TIPS](#tips) -- [Example](#example) -- [Questions](#questions) -- [License](#license) - -## Install -```bash -$ npm i :packageName --save -$ yarn add :packageName -``` - -## Usage - -```js -// usage ways -``` - -## Configuration - -```js -// config -``` - -## TIPS - -> Some tips - -## Example - -```js -// example -``` - -## Questions -Please open an issue [here](https://github.com/JohnApache/hasaki-cli/issues). - -## License - -[MIT](LICENSE) diff --git a/packages/video/README.md b/packages/video/README.md deleted file mode 100644 index bc371be..0000000 --- a/packages/video/README.md +++ /dev/null @@ -1,66 +0,0 @@ -# 项目名称 - -[![NPM version][npm-image]][npm-url] -[![build status][travis-image]][travis-url] -[![Test coverage][codecov-image]][codecov-url] -[![Known Vulnerabilities][snyk-image]][snyk-url] -[![npm download][download-image]][download-url] - -[npm-image]: https://img.shields.io/npm/v/:packageName.svg?style=flat-square -[npm-url]: https://npmjs.org/package/:packageName -[travis-image]: https://www.travis-ci.org/JohnApache/:packageName.svg -[travis-url]: https://travis-ci.org/JohnApache/:packageName -[codecov-image]: https://codecov.io/gh/JohnApache/:packageName/branch/master/graph/badge.svg -[codecov-url]: https://codecov.io/gh/JohnApache/:packageName -[snyk-image]: https://snyk.io/test/github/JohnApache/:packageName/badge.svg?targetFile=package.json -[snyk-url]: https://snyk.io/test/github/JohnApache/:packageName?targetFile=package.json -[download-image]: https://img.shields.io/npm/dm/:packageName.svg?style=flat-square -[download-url]: https://npmjs.org/package/:packageName - -- [English](README.en_US.md) -- [简体中文](README.md) - -> 这是一个中文文档 - -- [安装](#安装) -- [使用](#使用) -- [配置](#配置) -- [注意](#注意) -- [示例](#示例) -- [建议](#建议) -- [License](#license) - -## 安装 -```bash -$ npm i :packageName --save -$ yarn add :packageName -``` - -## 使用 - -```js -// 使用方式 -``` - -## 配置 - -```js -// 配置文件 -``` - -## 注意 - -> 注意事项 - -## 示例 - -```js -// 使用示例 -``` - -## 建议 -欢迎创建issue 或者 pr [here](https://github.com/JohnApache/egg-kafka-node/issues). - -## License - -[MIT](LICENSE) diff --git a/packages/video/__tests__/video.test.js b/packages/video/__tests__/video.test.js deleted file mode 100644 index b4e18e8..0000000 --- a/packages/video/__tests__/video.test.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -const video = require('..'); - -describe('video', () => { - it('needs tests'); -}); diff --git a/packages/video/src/index.ts b/packages/video/src/index.ts deleted file mode 100644 index d27f0ea..0000000 --- a/packages/video/src/index.ts +++ /dev/null @@ -1,166 +0,0 @@ -import { - initFlvMSE, - initHlsMSE, - initDashMSE, - initWebTorrentMSE, -} from './mse'; -import VideoOptions from './options'; -import { TTPlayerVideo as TTPlayerVideoBase, TTPlayerCore } from '@dking/ttplayer-core'; - -class TTPlayerVideo extends TTPlayerVideoBase { - - private __flv__: FlvJs.Player | null = null; - private __hls__: Hls | null = null; - private __dash__: dashjs.MediaPlayerClass | null = null; - private __webtorrent__: WebTorrent.Instance | null = null; - - constructor (player: TTPlayerCore) { - super(player); - this.options = new VideoOptions(this.options); - this.handleInitMSEError = this.handleInitMSEError.bind(this); - } - - get src (): string { - return this.mediaDom.src; - } - - set src (src: string) { - this.options.src = src; - this.mediaDom.src = src; - this.logger.info(`TTPlayerVideo set src ${ src }`); - this.initMSE(); - } - - componentWillUnmount () { - super.componentWillUnmount(); - this.clearMSE(); - } - - renderVideo () { - this.media.addClass('ttplayer--video'); - } - - beforeRender () { - super.beforeRender(); - this.video.addClass('ttplayer--video'); - } - - private initMSE () { - this.logger.info('TTPlayerVideo init MSE'); - this.clearMSE(); - let { - type, src, flvjs, hlsjs, dashjs, webtorrent, - } = this.options; - this.logger.debug('TTPlayerVideo init options', this.options); - const video = this.video.getInstance(); - if (type === 'auto') { - if ((/m3u8(#|\?|$)/i).exec(src)) { - type = 'hls'; - } else if ((/.flv(#|\?|$)/i).exec(src)) { - type = 'flv'; - } else if ((/.mpd(#|\?|$)/i).exec(src)) { - type = 'dash'; - } else { - type = 'normal'; - } - } - - // 能直接播放hls的 不需要解析 - if ( - type === 'hls' && - ( - video.canPlayType('application/x-mpegURL') || - video.canPlayType('application/vnd.apple.mpegURL') - ) - ) { - type = 'normal'; - } - - this.logger.info('TTPlayerVideo current mse type', type); - this.options.type = type; - - try { - switch (type) { - case 'flv': - this.__flv__ = initFlvMSE(src, video, flvjs); - this.__flv__.on('error', this.handleInitMSEError); - break; - case 'hls': - this.__hls__ = initHlsMSE(src, video, hlsjs); - this.__hls__.on('hlsError', this.handleInitMSEError); - break; - case 'dash': - this.__dash__ = initDashMSE(src, video, dashjs); - this.__dash__.on('error', this.handleInitMSEError); - break; - case 'webtorrent': - this.__webtorrent__ = initWebTorrentMSE(src, video, webtorrent); - this.__webtorrent__.on('error', this.handleInitMSEError); - break; - default: - } - - this.logger.info('TTPlayerVideo current src', this.src); - - } catch (error) { - this.logger.error(error); - throw error; - } - - return this; - } - - private clearMSE () { - this.logger.info('TTPlayerVideo clear MSE'); - const { - __flv__, __hls__, __dash__, __webtorrent__, - } = this; - - if (__flv__) { - __flv__.off('error', this.handleInitMSEError); - __flv__.destroy(); - } - - if (__hls__) { - __hls__.off('hlsError', this.handleInitMSEError); - __hls__.destroy(); - } - - if (__dash__) { - __dash__.off('error', this.handleInitMSEError); - __dash__.reset(); - } - - if (__webtorrent__) { - __webtorrent__.off('error', this.handleInitMSEError); - __webtorrent__.destroy(); - } - - this.__flv__ = this.__hls__ = this.__dash__ = this.__webtorrent__ = null; - return this; - } - - private handleInitMSEError (data: any) { - this.event.emit('error', data); - } - -} - - -const TTPlayerVideoFactory = (): typeof TTPlayerVideo => { - class T extends TTPlayerVideo { - - static videoComponentsCtor = []; - constructor (player: TTPlayerCore) { - super(player); - } - - } - - return T; -}; - - -export { TTPlayerVideoFactory, VideoOptions }; - -export default TTPlayerVideo; diff --git a/packages/video/src/mse/dash/index.ts b/packages/video/src/mse/dash/index.ts deleted file mode 100644 index aeaef7e..0000000 --- a/packages/video/src/mse/dash/index.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { DashJsOption } from '../../type'; -import { MediaPlayerClass } from './dash'; - -declare global { - interface Window { - dashjs: MediaPlayerClass; - } -} - -const initDashMSE = ( - url: string, - video: HTMLVideoElement, - dashOption?: DashJsOption, -): MediaPlayerClass => { - const dashjs = window.dashjs; - if (!dashjs) throw new Error(`can't find dashjs`); - const dash = dashjs.MediaPlayer().create(); - dashOption && dash.updateSettings(dashOption); - dash.initialize(video, url, false); - return dash; -}; - -export default initDashMSE; diff --git a/packages/video/src/mse/flv/index.ts b/packages/video/src/mse/flv/index.ts deleted file mode 100644 index d1780e5..0000000 --- a/packages/video/src/mse/flv/index.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { FlvJsOption } from '../../type'; -import FlvJs from './flv'; - -declare global { - interface Window { - flvjs: typeof FlvJs; - } -} - - -const initFlvMSE = (url: string, video: HTMLVideoElement, flvjsOption: Partial): FlvJs.Player => { - - const { - mediaDataSource = {}, - config = {}, - } = flvjsOption || {}; - const flvjs = window.flvjs; - if (!flvjs) throw new Error(`can't find flvjs`); - if (!flvjs.isSupported()) throw new Error(`flv is not supported`); - - const options = { - url : url, - type: 'flv', - ...mediaDataSource, - }; - - const flv = flvjs.createPlayer(options, config); - flv.attachMediaElement(video); - flv.load(); - return flv; -}; - -export default initFlvMSE; diff --git a/packages/video/src/mse/hls/index.ts b/packages/video/src/mse/hls/index.ts deleted file mode 100644 index 52f9b0a..0000000 --- a/packages/video/src/mse/hls/index.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { HlsJsOption } from '../../type'; -import Hls from './hls'; - -declare global { - interface Window { - Hls: Hls; - } -} - -const initHlsMSE = (url: string, video: HTMLVideoElement, hlsOption?: Partial): Hls => { - const hlsjs = window.Hls; - if (!hlsjs) throw new Error(`can't find hlsjs`); - if (!hlsjs.isSupported()) throw new Error(`hlsjs is not supported`); - - const hls = new hlsjs(hlsOption); - hls.loadSource(url); - hls.attachMedia(video); - return hls; -}; - -export default initHlsMSE; diff --git a/packages/video/src/mse/index.ts b/packages/video/src/mse/index.ts deleted file mode 100644 index ec03ea3..0000000 --- a/packages/video/src/mse/index.ts +++ /dev/null @@ -1,13 +0,0 @@ -import initFlvMSE from './flv'; -import initHlsMSE from './hls'; -import initDashMSE from './dash'; -import initWebTorrentMSE from './webtorrent'; - - -export { - initFlvMSE, - initHlsMSE, - initDashMSE, - initWebTorrentMSE, -}; - diff --git a/packages/video/src/mse/webtorrent/index.ts b/packages/video/src/mse/webtorrent/index.ts deleted file mode 100644 index a43a63e..0000000 --- a/packages/video/src/mse/webtorrent/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import WebTorrent from './webtorrent'; - -declare global { - interface Window { - WebTorrent: WebTorrent.WebTorrent; - } -} - -const initWebTorrentMSE = (url: string, video: HTMLVideoElement, WebTorrentOption?: WebTorrent.Options): WebTorrent.Instance => { - const WebTorrent = window.WebTorrent; - if (!WebTorrent) throw new Error(`can't find WebTorrent`); - if (!WebTorrent.WEBRTC_SUPPORT) throw new Error(`WebTorrent is not supported`); - - const client = new WebTorrent(WebTorrentOption); - - client.add(url, torrent => { - const file = torrent.files.find(file => file.name.endsWith('.mp4')); - if (!file) return; - file.renderTo(video, { autoplay: false }); - }); - - return client; -}; - -export default initWebTorrentMSE; diff --git a/packages/video/src/options.ts b/packages/video/src/options.ts deleted file mode 100644 index fd37282..0000000 --- a/packages/video/src/options.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { - IVideoOptions, MSEType, FlvJsOption, HlsJsOption, DashJsOption, WebTorrentOption, -} from './type'; - -import { TTPlayerVideoOptions } from '@dking/ttplayer-core'; - -const DEFAULT_OPTIONS = { - flvjs : {}, - hlsjs : {}, - dashjs : {}, - webtorrent: {}, - type : 'auto' as MSEType, -}; - -class VideoOptions extends TTPlayerVideoOptions { - - public type: MSEType; - public flvjs: Partial = {}; - public hlsjs: Partial = {}; - public dashjs: Partial = {}; - public webtorrent: Partial = {}; - - constructor (options: IVideoOptions = {}) { - super(options); - this.type = options.type || DEFAULT_OPTIONS.type; - this.flvjs = options.flvjs || DEFAULT_OPTIONS.flvjs; - this.hlsjs = options.hlsjs || DEFAULT_OPTIONS.hlsjs; - this.dashjs = options.dashjs || DEFAULT_OPTIONS.dashjs; - this.webtorrent = options.webtorrent || DEFAULT_OPTIONS.webtorrent; - } - -} - -export default VideoOptions; diff --git a/packages/video/src/type.ts b/packages/video/src/type.ts deleted file mode 100644 index b5504a9..0000000 --- a/packages/video/src/type.ts +++ /dev/null @@ -1,76 +0,0 @@ -import FlvJs from './mse/flv/flv'; -import WebTorrent from './mse/webtorrent/webtorrent'; - -export type VideoPreload = 'auto' | 'meta' | 'none'; - -export type VideoOrientation = 'portraint' | 'landscape'; - -export interface NormalObject { - [key: string]: any; -} - -export interface VideoSource { - src: string; - type?: string; -} - -export interface SpecialVideoAttributes { - playsinline: boolean; - 'webkit-playsinline': boolean; - 'x5-playsinline': boolean; - 'x5-video-player-type': 'h5'; - 'x5-video-player-fullscreen': boolean; - 'x5-video-orientation': VideoOrientation; - airplay: 'allow'; - 'webkit-airplay': 'allow'; - 'x-webkit-airplay': 'allow'; - 'tabindex': number; -} - -export interface VideoAttributes { - src: string; - width: number | string; - height: number | string; - volume: number; - autoplay: boolean; - muted: boolean; - loop: boolean; - preload: VideoPreload; - poster: string; - tabindex: number; - controls: boolean; -} - -export type MSEType = 'auto' | 'flv' | 'dash' | 'hls' | 'webtorrent' | 'normal'; - -export interface FlvJsOption { - mediaDataSource: Pick>; - config: FlvJs.Config; -} - -export interface HlsJsOption extends NormalObject{ - -} - -export interface DashJsOption extends dashjs.MediaPlayerSettingClass { - [key: string]: any; -} - -export interface WebTorrentOption extends WebTorrent.Options{ - [key: string]: any; -} - -export interface MSEAttributes { - type: MSEType; - flvjs: Partial; - hlsjs: Partial; - dashjs: Partial; -} - -export interface IVideoOptions extends Partial, Partial, Partial { - [key: string]: any; -} - -export interface VideoActionsType { - [key: string]: string; -} diff --git a/scripts/watch.js b/scripts/watch.js index c1b4da4..c726eea 100644 --- a/scripts/watch.js +++ b/scripts/watch.js @@ -110,9 +110,7 @@ const WatchPackages = [ 'utils', 'core', 'svg-icons', - 'video', - 'video-play-button', - 'video-control', + 'mse', 'components', { name : 'ttplayer',