x15904151985/ArtPlayer

0 Fork 0

mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-24 06:31:20 -08:00

Files

T

Harvey Zhao 0a9aadf543 feat: add link to LLMs resource in README

Implement code changes to enhance functionality and improve performance

chore: add initial empty files for artplayer.d.ts, llm.txt, and build-llm.js

Refactor Artplayer examples for improved readability and consistency

- Updated mobile.js to enhance code formatting and structure.
- Refined mpegts.js for better readability and consistency in function usage.
- Improved multiple.subtitles.js with clearer structure and modern syntax.
- Enhanced setting.test.js for better organization and clarity in settings management.
- Streamlined thumbnail.js for consistent formatting.
- Updated vast.js for improved readability and consistency in plugin usage.
- Refined vtt.thumbnail.js for better code organization.
- Enhanced webtorrent.js for improved readability and consistency in async handling.
- Updated TypeScript definitions for various plugins to maintain consistency in export statements.
- Adjusted package.json linting script to include TypeScript files in the docs/assets/ts directory.
- Removed outdated types.test.js file to clean up the test suite.

refactor: remove outdated documentation files and update translation script

- Deleted i18n.md and option.md documentation files as they are no longer needed.
- Updated trans-docs.js to streamline the translation process and improve error handling.
- Adjusted plugin template package.json for consistency.
- Changed console.log to console.warn in various test files for better logging practices.

feat: add danmaku plugin documentation and i18n support

- Introduced comprehensive documentation for the Danmaku library, including installation, usage examples, and configuration options.
- Added language settings documentation, highlighting the need for manual language imports starting from version 5.1.0.
- Updated basic options documentation with detailed descriptions and examples for player configuration options.

Refactor documentation for clarity and consistency; update translation script to handle large Markdown chunks

refactor: improve documentation clarity and consistency across various components

- Updated property descriptions in layers.md and setting.md for better readability.
- Enhanced language and structure in index.md, danmuku.md, i18n.md, and option.md to ensure uniformity.
- Corrected minor grammatical errors and improved phrasing throughout the documentation.
- Ensured consistent formatting in tables and code snippets for better user experience.

feat: add build script for generating llm.txt and update translation source directories

Refactor build-llm.js to improve concurrency and enhance prompt clarity

- Introduced a MAX_CONCURRENT_REQUESTS constant to manage concurrent API requests.
- Added a runConcurrent function to handle task execution with a limit on concurrent requests.
- Updated the askDeepSeek function to include more informative logging.
- Enhanced prompts for summarizing documentation, TypeScript definitions, and JavaScript examples to improve clarity and maintain formatting.
- Modified the main function to fetch files concurrently and streamline the summarization process.

Increase text chunk size from 5000 to 8000 in summarizeSection function for improved processing of larger files.

fix: update lint script to include .js files in the scripts directory

2025-10-08 12:20:12 +08:00

8.9 KiB

Raw Blame History

Settings Panel

Built-in

First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
	setting: true,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    subtitleOffset: true,
});

Create - Button

Property	Type	Description
`html`	`String`, `Element`	Element DOM
`icon`	`String`, `Element`	Element icon
`onClick`	`Function`	Element click event
`width`	`Number`	List width
`tooltip`	`String`	Tooltip text

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'Button',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            tooltip: 'tooltip',
			onClick(item, $dom, event) {
                console.info(item, $dom, event);
				return 'new tooltip'
			}
        },
    ],
});

Create - Selector List

Property	Type	Description
`html`	`String`, `Element`	Element DOM
`icon`	`String`, `Element`	Element icon
`selector`	`Array`	Element list
`onSelect`	`Function`	Element click event
`width`	`Number`	List width
`tooltip`	`String`	Tooltip text

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'Subtitle',
            width: 250,
            tooltip: 'Subtitle 01',
            selector: [
                {
                    default: true,
                    html: '<span style="color:red">Subtitle 01</span>',
                    url: '/assets/sample/subtitle.srt?id=1',
                },
                {
                    html: '<span style="color:yellow">Subtitle 02</span>',
                    url: '/assets/sample/subtitle.srt?id=2',
                },
            ],
            onSelect: function (item, $dom, event) {
                console.info(item, $dom, event);
                art.subtitle.url = item.url;
                return item.html;
            },
        },
        {
            html: 'Quality',
            width: 150,
            tooltip: '1080P',
            selector: [
                {
                    default: true,
                    html: '1080P',
                    url: '/assets/sample/video.mp4?id=1080',
                },
                {
                    html: '720P',
                    url: '/assets/sample/video.mp4?id=720',
                },
                {
                    html: '360P',
                    url: '/assets/sample/video.mp4?id=360',
                },
            ],
            onSelect: function (item, $dom, event) {
                console.info(item, $dom, event);
                art.switchQuality(item.url, item.html);
                return item.html;
            },
        },
    ],
});

Create - Nested List

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'Multi-level',
            selector: [
                {
                    html: 'Setting 01',
                    width: 150,
                    selector: [
                        {
                            html: 'Setting 01 - 01',
                        },
                        {
                            html: 'Setting 01 - 02',
                        },
                    ],
                    onSelect: function (item, $dom, event) {
                        console.info(item, $dom, event);
                        return item.html;
                    },
                },
                {
                    html: 'Setting 02',
                    width: 150,
                    selector: [
                        {
                            html: 'Setting 02 - 01',
                        },
                        {
                            html: 'Setting 02 - 02',
                        },
                    ],
                    onSelect: function (item, $dom, event) {
                        console.info(item, $dom, event);
                        return item.html;
                    },
                },
            ],
        },
    ],
});

## Create - Toggle Button

| Property   | Type                | Description               |
| ---------- | ------------------- | ------------------------- |
| `html`     | `String`, `Element` | DOM element of the item   |
| `icon`     | `String`, `Element` | Icon of the item          |
| `switch`   | `Boolean`           | Default state of the button |
| `onSwitch` | `Function`          | Button toggle event       |
| `tooltip`  | `String`            | Tooltip text              |

<div className="run-code">▶ Run Code</div>

```js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'PIP Mode',
            tooltip: 'Close',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            switch: false,
            onSwitch: function (item, $dom, event) {
                console.info(item, $dom, event);
                const nextState = !item.switch;
                art.pip = nextState;
                item.tooltip = nextState ? 'Open' : 'Close';
                return nextState;
            },
        },
    ],
});

Create - Range Slider

Property	Type	Description
`html`	`String`, `Element`	DOM element of the item
`icon`	`String`, `Element`	Icon of the item
`range`	`Array`	Default state array
`onRange`	`Function`	Event triggered on completion
`onChange`	`Function`	Event triggered on change
`tooltip`	`String`	Tooltip text

const range = [5, 1, 10, 1];
const value = range[0];
const min = range[1];
const max = range[2];
const step = range[3];

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            html: 'Slider',
            tooltip: '5x',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            range: [5, 1, 10, 1],
            onChange: function (item, $dom, event) {
                console.info(item, $dom, event);
                return item.range[0] + 'x';
            },
        },
    ],
});

Add

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
});

art.setting.show = true;

art.setting.add({
    html: 'Slider',
    tooltip: '5x',
    icon: '<img width="22" height="22" src="/assets/img/state.svg">',
    range: [5, 1, 10, 1],
});

Remove

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    flip: true,
    settings: [
        {
            name: 'slider',
            html: 'Slider',
            tooltip: '5x',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            range: [5, 1, 10, 1],
        },
    ],
});

art.setting.show = true;

art.on('ready', () => {
    setTimeout(() => {
        // Delete the setting by name
        art.setting.remove('slider');
    }, 3000);
});

Update

▶ Run Code

var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    setting: true,
    settings: [
        {
            name: 'slider',
            html: 'Slider',
            tooltip: '5x',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            range: [5, 1, 10, 1],
        },
    ],
});

art.setting.show = true;

art.on('ready', () => {
    setTimeout(() => {
        // Update the setting by name
        art.setting.update({
            name: 'slider',
            html: 'PIP Mode',
            tooltip: 'Close',
            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
            switch: false,
        });
    }, 3000);
});

8.9 KiB Raw Blame History

Settings Panel

Built-in

Create - Button

Create - Selector List

Create - Nested List

Create - Range Slider

Add

Remove

Update

8.9 KiB

Raw Blame History