ArtPlayer

ArtPlayer is a modern HTML5 video player

Status

⚠️ This project is WIP and not ready for production use yet!

Demo

Checkout the demo

Introduction

Install

$ npm install --save artplayer

import Artplayer from 'artplayer';
import 'artplayer/dist/artplayer.css';

OR umd builds are also available

<link rel="stylesheet" href="path/to/artplayer.css" />
<script src="path/to/artplayer.js"></script>

Will expose the global variable to window.Artplayer.

Usage

<div class="artplayer-app"></div>

var app = new Artplayer({
  container: '.artplayer-app',
  url: 'path/to/video.mp4'
});

Note: You need to initialize a size for the container element, like:

.artplayer-app {
  width: 400px;
  height: 300px;
}

Configuration

parameter	description	Example
container	Type: string, element Default: .artplayer Required: true DOM container of the player	Demo
url	Type: string Default: '' Required: true Video source url, Three file formats are supported: mp4, ogg, webm	Demo
poster	Type: string Default: '' Video poster image url	Demo
title	Type: string Default: '' Video title, will be shown in screenshot file name and pip mode	Demo
volume	Type: number Default: 0.7 Default volume, player will cache the last volume, which may be overwritten	Demo
autoplay	Type: boolean Default: false Whether to play automatically, sometimes it doesn't necessarily succeed More info: autoplay-policy-changes	Demo
autoSize	Type: boolean Default: false Keep the original video aspect ratio and automatically zoom	Demo
loop	Type: boolean Default: false Automatic loop playback	Demo
playbackRate	Type: boolean Default: false Whether to show playback rate controller in the contextmenu
aspectRatio	Type: boolean Default: false Whether to show aspect ratio controller in the contextmenu
screenshot	Type: boolean Default: false Whether to show screenshot controller in the bottom
setting	Type: boolean Default: false Whether to show setting controller in the bottom
pip	Type: boolean Default: false Whether to show pip controller in the bottom
fullscreen	Type: boolean Default: false Whether to show window fullscreen controller in the bottom
fullscreenWeb	Type: boolean Default: false Whether to show web page fullscreen controller in the bottom
hotkey	Type: boolean Default: true Whether to use hotkey
lang	Type: string Default: navigator.language.toLowerCase() Default display language
theme	Type: string Default: #f00 Default theme color
mutex	Type: boolean Default: true Player mutually exclusive
subtitle	Type: object Default: {} Custom subtitle url Type: string Default: '' Subtitle url, support vtt and srt format style Type: object Default: {} Subtitle style
moreVideoAttr	Type: object Default: {'controls': false,'preload': 'auto'} More video Attributes
quality	Type: array Default: [] Custom quality, The type of quality is an object default Type: boolean Default: false Whether the default quality name Type: string Default: '' Quality name url Type: string Default: '' Quality url
highlight	Type: array Default: [] Custom highlight, The type of highlight is an object time Type: number Default: 0 highlight seconds text Type: string Default: '' highlight text
layers	Type: array Default: [] Custom layer, The type of layer is an object name Type: string Default: layer${id} The unique name of the layer, used for the class name index Type: number Default: ${id} The unique index of the layer, used for the priority level html Type: string, element Default: '' The dom element of the layer style Type: object Default: {} The style object of the layer click Type: function Default: undefined Click event of the layer
contextmenu	Type: array Default: [] Custom contextmenu, The type of layer is an object name Type: string Default: contextmenu${id} The unique name of the contextmenu, used for the class name index Type: number Default: ${id} The unique index of the contextmenu, used for the priority level html Type: string, element Default: '' The dom element of the contextmenu style Type: object Default: {} The style object of the contextmenu click Type: function Default: undefined Click event of the contextmenu
controls	Type: array Default: [] Custom controls, The type of controls is an object

API

Ecosystem

Project	Description
artplayer-plugin-danmu	Danmu plugin for ArtPlayer

Issue

Contributors

License

MIT © Harvey Zack