mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-28 18:41:20 -08:00
add art.quality
This commit is contained in:
1 parent
8582259dd4
commit
6c5393b691
16 files changed
+250
-148
No files matched your search
@@ -1,25 +1,25 @@
|
||||
// ../../node_modules/vitepress/dist/client/theme-default/index.js
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
|
||||
|
||||
// ../../node_modules/vitepress/dist/client/theme-default/without-fonts.js
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/base.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
|
||||
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
|
||||
import VPBadge from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||
import Layout from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/Layout.vue";
|
||||
import { default as default2 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
|
||||
import { default as default3 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
|
||||
import { default as default4 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
|
||||
import { default as default5 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
|
||||
import { default as default6 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
|
||||
import { default as default7 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
|
||||
import { default as default8 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
|
||||
import { default as default9 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/base.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
|
||||
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
|
||||
import VPBadge from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||
import Layout from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/Layout.vue";
|
||||
import { default as default2 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
|
||||
import { default as default3 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
|
||||
import { default as default4 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
|
||||
import { default as default5 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
|
||||
import { default as default6 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
|
||||
import { default as default7 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
|
||||
import { default as default8 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
|
||||
import { default as default9 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
|
||||
var theme = {
|
||||
Layout,
|
||||
enhanceApp: ({ app }) => {
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
{
|
||||
"hash": "87e13f7a",
|
||||
"browserHash": "17e94e99",
|
||||
"hash": "49bbf3cf",
|
||||
"browserHash": "27d1e0c3",
|
||||
"optimized": {
|
||||
"vue": {
|
||||
"src": "../../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||
"file": "vue.js",
|
||||
"fileHash": "052bf677",
|
||||
"fileHash": "feae30a7",
|
||||
"needsInterop": false
|
||||
},
|
||||
"@theme/index": {
|
||||
"src": "../../../../../../node_modules/vitepress/dist/client/theme-default/index.js",
|
||||
"file": "@theme_index.js",
|
||||
"fileHash": "176080f4",
|
||||
"fileHash": "c693c8dd",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -920,4 +920,46 @@ art.on('ready', () => {
|
||||
art.cssVar('--art-theme', 'green');
|
||||
console.log(art.cssVar('--art-theme'));
|
||||
});
|
||||
```
|
||||
|
||||
## `quality`
|
||||
|
||||
- Type: `Setter`
|
||||
|
||||
动态设置画质列表
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{19-29}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
html: 'SD 480P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
html: 'HD 720P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.quality = [
|
||||
{
|
||||
default: true,
|
||||
html: '1080P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
html: '4K',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
];
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
@@ -903,4 +903,46 @@ var art = new Artplayer({
|
||||
});
|
||||
|
||||
console.info(art.video);
|
||||
```
|
||||
|
||||
## `quality`
|
||||
|
||||
- Type: `Setter`
|
||||
|
||||
Dynamically set the quality list
|
||||
|
||||
<div className="run-code">▶ Run Code</div>
|
||||
|
||||
```js{19-29}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
quality: [
|
||||
{
|
||||
default: true,
|
||||
html: 'SD 480P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
html: 'HD 720P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
art.on('ready', () => {
|
||||
setTimeout(() => {
|
||||
art.quality = [
|
||||
{
|
||||
default: true,
|
||||
html: '1080P',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
{
|
||||
html: '4K',
|
||||
url: '/assets/sample/video.mp4',
|
||||
},
|
||||
];
|
||||
}, 3000);
|
||||
})
|
||||
```
|
||||
@@ -1,4 +1,4 @@
|
||||
import { errorHandle, addClass, removeClass, isMobile } from '../utils';
|
||||
import { errorHandle, addClass, removeClass, isMobile, sleep } from '../utils';
|
||||
import Component from '../utils/component';
|
||||
import fullscreen from './fullscreen';
|
||||
import fullscreenWeb from './fullscreenWeb';
|
||||
@@ -10,7 +10,6 @@ import volume from './volume';
|
||||
import setting from './setting';
|
||||
import thumbnails from './thumbnails';
|
||||
import screenshot from './screenshot';
|
||||
import quality from './quality';
|
||||
import loop from './loop';
|
||||
import airplay from './airplay';
|
||||
|
||||
@@ -104,13 +103,9 @@ export default class Control extends Component {
|
||||
}
|
||||
|
||||
if (option.quality.length) {
|
||||
this.add(
|
||||
quality({
|
||||
name: 'quality',
|
||||
position: 'right',
|
||||
index: 10,
|
||||
}),
|
||||
);
|
||||
sleep().then(() => {
|
||||
this.art.quality = option.quality;
|
||||
});
|
||||
}
|
||||
|
||||
if (option.screenshot && !isMobile) {
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
export default function quality(option) {
|
||||
return (art) => {
|
||||
const qualityOption = art.option.quality;
|
||||
const qualityDefault = qualityOption.find((item) => item.default) || qualityOption[0];
|
||||
return {
|
||||
...option,
|
||||
style: {
|
||||
marginRight: '10px',
|
||||
},
|
||||
html: qualityDefault ? qualityDefault.html : '',
|
||||
selector: qualityOption,
|
||||
onSelect(item) {
|
||||
art.switchQuality(item.url, item.html);
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -30,6 +30,7 @@ import typeMix from './typeMix';
|
||||
import stateMix from './stateMix';
|
||||
import subtitleOffsetMix from './subtitleOffsetMix';
|
||||
import airplayMix from './airplayMix';
|
||||
import qualityMix from './qualityMix';
|
||||
import optionInit from './optionInit';
|
||||
import eventInit from './eventInit';
|
||||
|
||||
@@ -67,6 +68,7 @@ export default class Player {
|
||||
stateMix(art);
|
||||
subtitleOffsetMix(art);
|
||||
airplayMix(art);
|
||||
qualityMix(art);
|
||||
eventInit(art);
|
||||
optionInit(art);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
import { def } from '../utils';
|
||||
|
||||
export default function qualityMix(art) {
|
||||
def(art, 'quality', {
|
||||
set(quality) {
|
||||
const { controls, notice, i18n } = art;
|
||||
const qualityDefault = quality.find((item) => item.default) || quality[0];
|
||||
controls.update({
|
||||
name: 'quality',
|
||||
position: 'right',
|
||||
index: 10,
|
||||
style: {
|
||||
marginRight: '10px',
|
||||
},
|
||||
html: qualityDefault ? qualityDefault.html : '',
|
||||
selector: quality,
|
||||
async onSelect(item) {
|
||||
await art.switchQuality(item.url);
|
||||
notice.show = `${i18n.get('Switch Video')}: ${item.html}`;
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -20,6 +20,7 @@
|
||||
|
||||
.art-selector-item {
|
||||
.art-center();
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
flex-shrink: 0;
|
||||
line-height: 1;
|
||||
|
||||
Vendored
+2
-16
@@ -3,6 +3,7 @@ import { Setting } from './setting';
|
||||
import { Icons } from './icons';
|
||||
import { I18n } from './i18n';
|
||||
import { CssVar } from './cssVar';
|
||||
import { quality } from './quality';
|
||||
import { ComponentOption } from './component';
|
||||
import Artplayer = require('./artplayer');
|
||||
|
||||
@@ -207,22 +208,7 @@ export type Option = {
|
||||
/**
|
||||
* Custom video quality list
|
||||
*/
|
||||
quality?: {
|
||||
/**
|
||||
* Whether the default is selected
|
||||
*/
|
||||
default?: boolean;
|
||||
|
||||
/**
|
||||
* Html string of quality
|
||||
*/
|
||||
html: string | HTMLElement;
|
||||
|
||||
/**
|
||||
* Video quality url
|
||||
*/
|
||||
url: string;
|
||||
}[];
|
||||
quality?: quality[];
|
||||
|
||||
/**
|
||||
* Custom highlight list
|
||||
|
||||
Vendored
+2
@@ -1,5 +1,6 @@
|
||||
import { CssVar } from './cssVar';
|
||||
import { CustomType } from './option';
|
||||
import { quality } from './quality';
|
||||
|
||||
export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>);
|
||||
export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
|
||||
@@ -63,6 +64,7 @@ export declare class Player {
|
||||
get subtitleOffset(): number;
|
||||
set subtitleOffset(time: number);
|
||||
set switch(url: string);
|
||||
set quality(quality: quality[]);
|
||||
pause(): void;
|
||||
play(): Promise<void>;
|
||||
toggle(): void;
|
||||
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
export type quality = {
|
||||
/**
|
||||
* Whether the default is selected
|
||||
*/
|
||||
default?: boolean;
|
||||
|
||||
/**
|
||||
* Html string of quality
|
||||
*/
|
||||
html: string | HTMLElement;
|
||||
|
||||
/**
|
||||
* Video quality url
|
||||
*/
|
||||
url: string;
|
||||
};
|
||||
Reference in new issue
Block a user