diff --git a/docs/docs/README.md b/docs/docs/README.md index 529f0a248..6695aab9b 100644 --- a/docs/docs/README.md +++ b/docs/docs/README.md @@ -1124,11 +1124,11 @@ art.contextmenu.yourContextmenu.hide(); - Type: `Object` -| propertie | type | Description | -| --------- | ---------- | --------------- | -| `switch` | `Function` | Switch subtitle | -| `show` | `Function` | Show subtitle | -| `hide` | `Function` | Hide subtitle | +| propertie | type | Description | +| --------- | ---------- | ------------- | +| `init` | `Function` | Init subtitle | +| `show` | `Function` | Show subtitle | +| `hide` | `Function` | Hide subtitle | [Run Code](/) @@ -1143,7 +1143,7 @@ var art = new Artplayer({ }); this.art.on('firstCanplay', () => { - art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt'); + art.subtitle.init(url + '/subtitle/one-more-time-one-more-chance.vtt'); }); ``` diff --git a/docs/lab/index.html b/docs/lab/index.html index 25d88f2d3..a73226853 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -40,10 +40,7 @@ - - - - - - -``` - -Will expose the global variable to `window.artplayerPluginSubtitle`. - -## Usage - -```html -
-``` - -```js -var art = new Artplayer({ - container: '.artplayer-app', - url: 'path/to/video.mp4', - plugins: [ - artplayerPluginSubtitle, - ], -}); - -// There will be a slider in the settings panel. -// Or, you can set subtitle offset time by yourself, range from -5 to 5. -art.artplayerPluginSubtitle.set(-1); -``` - -## License - -MIT © [Harvey Zack](https://www.zhw-island.com/) diff --git a/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js b/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js deleted file mode 100644 index 4866d1089..000000000 --- a/packages/artplayer-plugin-subtitle/dist/artplayer-plugin-subtitle.js +++ /dev/null @@ -1,8 +0,0 @@ -/*! - * artplayer-plugin-subtitle.js v1.0.4 - * Github: https://github.com/zhw2590582/ArtPlayer#readme - * (c) 2017-2018 Harvey Zack - * Released under the MIT License. - */ - -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t["artplayer-plugin-subtitle"]={})}(this,function(t){"use strict";function e(i){var t=i.i18n,a=i.events.proxy;return{title:"Subtitle",name:"subtitle",index:20,html:'\n
\n '.concat(t.get("Subtitle offset time"),': 0s\n
\n
\n \n
\n '),mounted:function(t){var e=t.querySelector(".art-subtitle-range"),n=t.querySelector(".art-subtitle-value");a(e,"change",function(){var t=e.value;n.innerText=t,i.plugins.artplayerPluginSubtitle.offset(Number(t))}),i.on("subtitle:switch",function(){e.value=0,n.innerText=0}),i.on("artplayerPluginSubtitle:set",function(t){e.value!==t&&(e.value=t,n.innerText=t)})}}}function n(i){var a=i.constructor.utils.clamp,t=i.setting,r=i.notice,u=i.template,o=i.i18n;o.update({"zh-cn":{"Subtitle offset time":"字幕偏移时间"},"zh-tw":{"Subtitle offset time":"字幕偏移時間"}}),t.add(e);var l=[];return i.on("subtitle:switch",function(){l=[]}),{offset:function(t){var e=Array.from(u.$track.track.cues),n=a(t,-5,5);e.forEach(function(t,e){l[e]||(l[e]={startTime:t.startTime,endTime:t.endTime}),t.startTime=l[e].startTime+n,t.endTime=l[e].endTime+n}),r.show("".concat(o.get("Subtitle offset time"),": ").concat(t,"s")),i.emit("artplayerPluginSubtitle:set",t)}}}window.artplayerPluginSubtitle=n,t.default=n,Object.defineProperty(t,"__esModule",{value:!0})}); diff --git a/packages/artplayer-plugin-subtitle/package.json b/packages/artplayer-plugin-subtitle/package.json deleted file mode 100644 index fb54e8b5b..000000000 --- a/packages/artplayer-plugin-subtitle/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "artplayer-plugin-subtitle", - "version": "1.0.5", - "description": "Danmu plugin for ArtPlayer", - "main": "dist/artplayer-plugin-subtitle.js", - "style": "dist/artplayer-plugin-subtitle.css", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/zhw2590582/ArtPlayer.git" - }, - "keywords": [ - "video", - "player" - ], - "author": "Harvey Zack ", - "license": "MIT", - "bugs": { - "url": "https://github.com/zhw2590582/ArtPlayer/issues" - }, - "homepage": "https://github.com/zhw2590582/ArtPlayer#readme" -} diff --git a/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js b/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js new file mode 100644 index 000000000..80b71c162 --- /dev/null +++ b/packages/artplayer/src/plugins/artplayer-plugin-localPreview.js @@ -0,0 +1,7 @@ +export default function artplayerPluginLocalPreview(art) { + const { getExt } = art.constructor.utils; + const formats = ['mp4', 'ogg', 'webm', 'srt', 'vtt']; + return { + // TODO... + }; +} \ No newline at end of file diff --git a/packages/artplayer-plugin-subtitle/src/index.js b/packages/artplayer/src/plugins/artplayer-plugin-subtitle.js similarity index 95% rename from packages/artplayer-plugin-subtitle/src/index.js rename to packages/artplayer/src/plugins/artplayer-plugin-subtitle.js index 8f01d746d..44f303766 100644 --- a/packages/artplayer-plugin-subtitle/src/index.js +++ b/packages/artplayer/src/plugins/artplayer-plugin-subtitle.js @@ -57,7 +57,7 @@ function settingMix(art) { }; } -function artplayerPluginSubtitle(art) { +export default function artplayerPluginSubtitle(art) { const { clamp } = art.constructor.utils; const { setting, notice, template, i18n } = art; i18nMix(i18n); @@ -87,6 +87,3 @@ function artplayerPluginSubtitle(art) { }, }; } - -window.artplayerPluginSubtitle = artplayerPluginSubtitle; -export default artplayerPluginSubtitle; diff --git a/packages/artplayer/src/plugins.js b/packages/artplayer/src/plugins/index.js similarity index 73% rename from packages/artplayer/src/plugins.js rename to packages/artplayer/src/plugins/index.js index 11cf1abce..e18d099db 100644 --- a/packages/artplayer/src/plugins.js +++ b/packages/artplayer/src/plugins/index.js @@ -1,7 +1,13 @@ +import artplayerPluginSubtitle from './artplayer-plugin-subtitle'; +import artplayerPluginLocalPreview from './artplayer-plugin-localPreview'; + export default class Plugins { constructor(art) { this.art = art; this.id = 0; + + this.add(artplayerPluginSubtitle); + this.add(artplayerPluginLocalPreview); art.option.plugins.forEach(plugin => { this.add(plugin); }); diff --git a/packages/artplayer/src/subtitle.js b/packages/artplayer/src/subtitle.js index 2dd09468c..a85013810 100644 --- a/packages/artplayer/src/subtitle.js +++ b/packages/artplayer/src/subtitle.js @@ -1,4 +1,4 @@ -import { errorHandle, setStyles, setStyle, srtToVtt, vttToBlob } from './utils'; +import { setStyles, setStyle, srtToVtt, vttToBlob } from './utils'; export default class Subtitle { constructor(art) { @@ -6,26 +6,31 @@ export default class Subtitle { this.state = true; const { url } = this.art.option.subtitle; if (url) { - this.init(); + this.init(url); } } - init() { + init(url) { const { events: { proxy }, option: { subtitle }, - template: { $video, $subtitle }, + template: { $video, $subtitle, $track }, } = this.art; setStyles($subtitle, subtitle.style || {}); - const $track = document.createElement('track'); - $track.default = true; - $track.kind = 'metadata'; - $video.appendChild($track); - this.art.template.$track = $track; - this.load(subtitle.url).then(url => { - $track.src = url; + + if (!$track) { + const $newTrack = document.createElement('track'); + $newTrack.default = true; + $newTrack.kind = 'metadata'; + $video.appendChild($newTrack); + this.art.template.$track = $newTrack; + } + + this.load(url).then(url => { + this.art.template.$track.src = url; this.art.emit('subtitle:load', url); + if ($video.textTracks && $video.textTracks[0]) { const [track] = $video.textTracks; proxy(track, 'cuechange', () => { @@ -100,13 +105,4 @@ export default class Subtitle { this.show(); } } - - switch(url) { - const { $track } = this.art.template; - errorHandle($track, 'You need to initialize the subtitle option first.'); - this.load(url).then(url => { - $track.src = url; - this.art.emit('subtitle:switch', url); - }); - } } diff --git a/packages/artplayer/src/utils/index.js b/packages/artplayer/src/utils/index.js index 4fa22af1c..2de572a34 100644 --- a/packages/artplayer/src/utils/index.js +++ b/packages/artplayer/src/utils/index.js @@ -104,6 +104,10 @@ export function append(parent, child) { return parent.lastElementChild; } +export function remove(child) { + return child.parentNode.removeChild(child); +} + export function insertByIndex(parent, child, index) { const childs = Array.from(parent.children); child.dataset.index = index;