mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-20 04:01:20 -08:00
update docs
This commit is contained in:
Harvey committed
1 parent
5d8b4fb7ce
commit
f7d7d2992f
44 files changed
+518
-127
No files matched your search
@@ -5,6 +5,8 @@ sidebar_position: 1
|
||||
|
||||
Sometimes you need to add a list in the controls, then you can use the `selector` and `onSelect` attribute when adding controls
|
||||
|
||||
### Switch subtitle
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
@@ -37,3 +39,196 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Switch filter
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/instagram.css@0.1.4/dist/instagram.min.css">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var instagramFilters = [
|
||||
{
|
||||
"html": "1977",
|
||||
"class": "filter-1977"
|
||||
},
|
||||
{
|
||||
"html": "Aden",
|
||||
"class": "filter-aden"
|
||||
},
|
||||
{
|
||||
"html": "Amaro",
|
||||
"class": "filter-amaro"
|
||||
},
|
||||
{
|
||||
"html": "Ashby",
|
||||
"class": "filter-ashby"
|
||||
},
|
||||
{
|
||||
"html": "Brannan",
|
||||
"class": "filter-brannan"
|
||||
},
|
||||
{
|
||||
"html": "Brooklyn",
|
||||
"class": "filter-brooklyn"
|
||||
},
|
||||
{
|
||||
"html": "Charmes",
|
||||
"class": "filter-charmes"
|
||||
},
|
||||
{
|
||||
"html": "Clarendon",
|
||||
"class": "filter-clarendon"
|
||||
},
|
||||
{
|
||||
"html": "Crema",
|
||||
"class": "filter-crema"
|
||||
},
|
||||
{
|
||||
"html": "Dogpatch",
|
||||
"class": "filter-dogpatch"
|
||||
},
|
||||
{
|
||||
"html": "Earlybird",
|
||||
"class": "filter-earlybird"
|
||||
},
|
||||
{
|
||||
"html": "Gingham",
|
||||
"class": "filter-gingham"
|
||||
},
|
||||
{
|
||||
"html": "Ginza",
|
||||
"class": "filter-ginza"
|
||||
},
|
||||
{
|
||||
"html": "Hefe",
|
||||
"class": "filter-hefe"
|
||||
},
|
||||
{
|
||||
"html": "Helena",
|
||||
"class": "filter-helena"
|
||||
},
|
||||
{
|
||||
"html": "Hudson",
|
||||
"class": "filter-hudson"
|
||||
},
|
||||
{
|
||||
"html": "Inkwell",
|
||||
"class": "filter-inkwell"
|
||||
},
|
||||
{
|
||||
"html": "Kelvin",
|
||||
"class": "filter-kelvin"
|
||||
},
|
||||
{
|
||||
"html": "Kuno",
|
||||
"class": "filter-juno"
|
||||
},
|
||||
{
|
||||
"html": "Lark",
|
||||
"class": "filter-lark"
|
||||
},
|
||||
{
|
||||
"html": "Lo-Fi",
|
||||
"class": "filter-lofi"
|
||||
},
|
||||
{
|
||||
"html": "Ludwig",
|
||||
"class": "filter-ludwig"
|
||||
},
|
||||
{
|
||||
"html": "Maven",
|
||||
"class": "filter-maven"
|
||||
},
|
||||
{
|
||||
"html": "Mayfair",
|
||||
"class": "filter-mayfair"
|
||||
},
|
||||
{
|
||||
"html": "Moon",
|
||||
"class": "filter-moon"
|
||||
},
|
||||
{
|
||||
"html": "Nashville",
|
||||
"class": "filter-nashville"
|
||||
},
|
||||
{
|
||||
"html": "Perpetua",
|
||||
"class": "filter-perpetua"
|
||||
},
|
||||
{
|
||||
"html": "Poprocket",
|
||||
"class": "filter-poprocket"
|
||||
},
|
||||
{
|
||||
"html": "Reyes",
|
||||
"class": "filter-reyes"
|
||||
},
|
||||
{
|
||||
"html": "Rise",
|
||||
"class": "filter-rise"
|
||||
},
|
||||
{
|
||||
"html": "Sierra",
|
||||
"class": "filter-sierra"
|
||||
},
|
||||
{
|
||||
"html": "Skyline",
|
||||
"class": "filter-skyline"
|
||||
},
|
||||
{
|
||||
"html": "Slumber",
|
||||
"class": "filter-slumber"
|
||||
},
|
||||
{
|
||||
"html": "Stinson",
|
||||
"class": "filter-stinson"
|
||||
},
|
||||
{
|
||||
"html": "Sutro",
|
||||
"class": "filter-sutro"
|
||||
},
|
||||
{
|
||||
"html": "Toaster",
|
||||
"class": "filter-toaster"
|
||||
},
|
||||
{
|
||||
"html": "Valencia",
|
||||
"class": "filter-valencia"
|
||||
},
|
||||
{
|
||||
"html": "Vesper",
|
||||
"class": "filter-vesper"
|
||||
},
|
||||
{
|
||||
"html": "Walden",
|
||||
"class": "filter-walden"
|
||||
},
|
||||
{
|
||||
"html": "Willow",
|
||||
"class": "filter-willow"
|
||||
},
|
||||
{
|
||||
"html": "X-Pro",
|
||||
"class": "filter-xpro-ii"
|
||||
}
|
||||
]
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Instagram Filters',
|
||||
selector: instagramFilters,
|
||||
onSelect: function (item) {
|
||||
var classNameReg = /\b$|(\sfilter-.+)/;
|
||||
var videoClassName = art.template.$video.className;
|
||||
var filterClassName = videoClassName.replace(classNameReg, ' ' + item.class);
|
||||
art.template.$video.className = filterClassName;
|
||||
console.info(filterClassName);
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -5,6 +5,8 @@ sidebar_position: 1
|
||||
|
||||
有时你需要在控制栏添加列表，那么你可以在添加控件的时候使用 `selector` 和 `onSelect` 属性
|
||||
|
||||
### 切换字幕
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
@@ -37,3 +39,197 @@ var art = new Artplayer({
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 切换滤镜
|
||||
|
||||
<div className="run-code" data-libs="https://cdn.jsdelivr.net/npm/instagram.css@0.1.4/dist/instagram.min.css">▶ Run Code</div>
|
||||
|
||||
```js
|
||||
var instagramFilters = [
|
||||
{
|
||||
"html": "1977",
|
||||
"class": "filter-1977"
|
||||
},
|
||||
{
|
||||
"html": "Aden",
|
||||
"class": "filter-aden"
|
||||
},
|
||||
{
|
||||
"html": "Amaro",
|
||||
"class": "filter-amaro"
|
||||
},
|
||||
{
|
||||
"html": "Ashby",
|
||||
"class": "filter-ashby"
|
||||
},
|
||||
{
|
||||
"html": "Brannan",
|
||||
"class": "filter-brannan"
|
||||
},
|
||||
{
|
||||
"html": "Brooklyn",
|
||||
"class": "filter-brooklyn"
|
||||
},
|
||||
{
|
||||
"html": "Charmes",
|
||||
"class": "filter-charmes"
|
||||
},
|
||||
{
|
||||
"html": "Clarendon",
|
||||
"class": "filter-clarendon"
|
||||
},
|
||||
{
|
||||
"html": "Crema",
|
||||
"class": "filter-crema"
|
||||
},
|
||||
{
|
||||
"html": "Dogpatch",
|
||||
"class": "filter-dogpatch"
|
||||
},
|
||||
{
|
||||
"html": "Earlybird",
|
||||
"class": "filter-earlybird"
|
||||
},
|
||||
{
|
||||
"html": "Gingham",
|
||||
"class": "filter-gingham"
|
||||
},
|
||||
{
|
||||
"html": "Ginza",
|
||||
"class": "filter-ginza"
|
||||
},
|
||||
{
|
||||
"html": "Hefe",
|
||||
"class": "filter-hefe"
|
||||
},
|
||||
{
|
||||
"html": "Helena",
|
||||
"class": "filter-helena"
|
||||
},
|
||||
{
|
||||
"html": "Hudson",
|
||||
"class": "filter-hudson"
|
||||
},
|
||||
{
|
||||
"html": "Inkwell",
|
||||
"class": "filter-inkwell"
|
||||
},
|
||||
{
|
||||
"html": "Kelvin",
|
||||
"class": "filter-kelvin"
|
||||
},
|
||||
{
|
||||
"html": "Kuno",
|
||||
"class": "filter-juno"
|
||||
},
|
||||
{
|
||||
"html": "Lark",
|
||||
"class": "filter-lark"
|
||||
},
|
||||
{
|
||||
"html": "Lo-Fi",
|
||||
"class": "filter-lofi"
|
||||
},
|
||||
{
|
||||
"html": "Ludwig",
|
||||
"class": "filter-ludwig"
|
||||
},
|
||||
{
|
||||
"html": "Maven",
|
||||
"class": "filter-maven"
|
||||
},
|
||||
{
|
||||
"html": "Mayfair",
|
||||
"class": "filter-mayfair"
|
||||
},
|
||||
{
|
||||
"html": "Moon",
|
||||
"class": "filter-moon"
|
||||
},
|
||||
{
|
||||
"html": "Nashville",
|
||||
"class": "filter-nashville"
|
||||
},
|
||||
{
|
||||
"html": "Perpetua",
|
||||
"class": "filter-perpetua"
|
||||
},
|
||||
{
|
||||
"html": "Poprocket",
|
||||
"class": "filter-poprocket"
|
||||
},
|
||||
{
|
||||
"html": "Reyes",
|
||||
"class": "filter-reyes"
|
||||
},
|
||||
{
|
||||
"html": "Rise",
|
||||
"class": "filter-rise"
|
||||
},
|
||||
{
|
||||
"html": "Sierra",
|
||||
"class": "filter-sierra"
|
||||
},
|
||||
{
|
||||
"html": "Skyline",
|
||||
"class": "filter-skyline"
|
||||
},
|
||||
{
|
||||
"html": "Slumber",
|
||||
"class": "filter-slumber"
|
||||
},
|
||||
{
|
||||
"html": "Stinson",
|
||||
"class": "filter-stinson"
|
||||
},
|
||||
{
|
||||
"html": "Sutro",
|
||||
"class": "filter-sutro"
|
||||
},
|
||||
{
|
||||
"html": "Toaster",
|
||||
"class": "filter-toaster"
|
||||
},
|
||||
{
|
||||
"html": "Valencia",
|
||||
"class": "filter-valencia"
|
||||
},
|
||||
{
|
||||
"html": "Vesper",
|
||||
"class": "filter-vesper"
|
||||
},
|
||||
{
|
||||
"html": "Walden",
|
||||
"class": "filter-walden"
|
||||
},
|
||||
{
|
||||
"html": "Willow",
|
||||
"class": "filter-willow"
|
||||
},
|
||||
{
|
||||
"html": "X-Pro",
|
||||
"class": "filter-xpro-ii"
|
||||
}
|
||||
]
|
||||
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'https://artplayer.org/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: 'Instagram Filters',
|
||||
selector: instagramFilters,
|
||||
onSelect: function (item) {
|
||||
var classNameReg = /\b$|(\sfilter-.+)/;
|
||||
var videoClassName = art.template.$video.className;
|
||||
var filterClassName = videoClassName.replace(classNameReg, ' ' + item.class);
|
||||
art.template.$video.className = filterClassName;
|
||||
console.info(filterClassName);
|
||||
return item.html;
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
```
|
||||
Reference in new issue
Block a user