mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
863 lines
48 KiB
HTML
863 lines
48 KiB
HTML
<!DOCTYPE html><html><head>
|
|
<title>README</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<link rel="stylesheet" href="file:////Users/zhaohaiwei/.vscode/extensions/shd101wyy.markdown-preview-enhanced-0.3.11/node_modules/@shd101wyy/mume/dependencies/katex/katex.min.css">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
/**
|
|
* prism.js Github theme based on GitHub's theme.
|
|
* @author Sam Clarke
|
|
*/
|
|
code[class*="language-"],
|
|
pre[class*="language-"] {
|
|
color: #333;
|
|
background: none;
|
|
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-break: normal;
|
|
word-wrap: normal;
|
|
line-height: 1.4;
|
|
|
|
-moz-tab-size: 8;
|
|
-o-tab-size: 8;
|
|
tab-size: 8;
|
|
|
|
-webkit-hyphens: none;
|
|
-moz-hyphens: none;
|
|
-ms-hyphens: none;
|
|
hyphens: none;
|
|
}
|
|
|
|
/* Code blocks */
|
|
pre[class*="language-"] {
|
|
padding: .8em;
|
|
overflow: auto;
|
|
/* border: 1px solid #ddd; */
|
|
border-radius: 3px;
|
|
/* background: #fff; */
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
/* Inline code */
|
|
:not(pre) > code[class*="language-"] {
|
|
padding: .1em;
|
|
border-radius: .3em;
|
|
white-space: normal;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.token.comment,
|
|
.token.blockquote {
|
|
color: #969896;
|
|
}
|
|
|
|
.token.cdata {
|
|
color: #183691;
|
|
}
|
|
|
|
.token.doctype,
|
|
.token.punctuation,
|
|
.token.variable,
|
|
.token.macro.property {
|
|
color: #333;
|
|
}
|
|
|
|
.token.operator,
|
|
.token.important,
|
|
.token.keyword,
|
|
.token.rule,
|
|
.token.builtin {
|
|
color: #a71d5d;
|
|
}
|
|
|
|
.token.string,
|
|
.token.url,
|
|
.token.regex,
|
|
.token.attr-value {
|
|
color: #183691;
|
|
}
|
|
|
|
.token.property,
|
|
.token.number,
|
|
.token.boolean,
|
|
.token.entity,
|
|
.token.atrule,
|
|
.token.constant,
|
|
.token.symbol,
|
|
.token.command,
|
|
.token.code {
|
|
color: #0086b3;
|
|
}
|
|
|
|
.token.tag,
|
|
.token.selector,
|
|
.token.prolog {
|
|
color: #63a35c;
|
|
}
|
|
|
|
.token.function,
|
|
.token.namespace,
|
|
.token.pseudo-element,
|
|
.token.class,
|
|
.token.class-name,
|
|
.token.pseudo-class,
|
|
.token.id,
|
|
.token.url-reference .token.variable,
|
|
.token.attr-name {
|
|
color: #795da3;
|
|
}
|
|
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
|
|
.token.title,
|
|
.token.title .token.punctuation {
|
|
font-weight: bold;
|
|
color: #1d3e81;
|
|
}
|
|
|
|
.token.list {
|
|
color: #ed6a43;
|
|
}
|
|
|
|
.token.inserted {
|
|
background-color: #eaffea;
|
|
color: #55a532;
|
|
}
|
|
|
|
.token.deleted {
|
|
background-color: #ffecec;
|
|
color: #bd2c00;
|
|
}
|
|
|
|
.token.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
|
|
|
|
/* JSON */
|
|
.language-json .token.property {
|
|
color: #183691;
|
|
}
|
|
|
|
.language-markup .token.tag .token.punctuation {
|
|
color: #333;
|
|
}
|
|
|
|
/* CSS */
|
|
code.language-css,
|
|
.language-css .token.function {
|
|
color: #0086b3;
|
|
}
|
|
|
|
/* YAML */
|
|
.language-yaml .token.atrule {
|
|
color: #63a35c;
|
|
}
|
|
|
|
code.language-yaml {
|
|
color: #183691;
|
|
}
|
|
|
|
/* Ruby */
|
|
.language-ruby .token.function {
|
|
color: #333;
|
|
}
|
|
|
|
/* Markdown */
|
|
.language-markdown .token.url {
|
|
color: #795da3;
|
|
}
|
|
|
|
/* Makefile */
|
|
.language-makefile .token.symbol {
|
|
color: #795da3;
|
|
}
|
|
|
|
.language-makefile .token.variable {
|
|
color: #183691;
|
|
}
|
|
|
|
.language-makefile .token.builtin {
|
|
color: #0086b3;
|
|
}
|
|
|
|
/* Bash */
|
|
.language-bash .token.keyword {
|
|
color: #0086b3;
|
|
}html body{font-family:"Helvetica Neue",Helvetica,"Segoe UI",Arial,freesans,sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#fff;overflow:initial;box-sizing:border-box;word-wrap:break-word}html body>:first-child{margin-top:0}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{line-height:1.2;margin-top:1em;margin-bottom:16px;color:#000}html body h1{font-size:2.25em;font-weight:300;padding-bottom:.3em}html body h2{font-size:1.75em;font-weight:400;padding-bottom:.3em}html body h3{font-size:1.5em;font-weight:500}html body h4{font-size:1.25em;font-weight:600}html body h5{font-size:1.1em;font-weight:600}html body h6{font-size:1em;font-weight:600}html body h1,html body h2,html body h3,html body h4,html body h5{font-weight:600}html body h5{font-size:1em}html body h6{color:#5c5c5c}html body strong{color:#000}html body del{color:#5c5c5c}html body a:not([href]){color:inherit;text-decoration:none}html body a{color:#08c;text-decoration:none}html body a:hover{color:#00a3f5;text-decoration:none}html body img{max-width:100%}html body>p{margin-top:0;margin-bottom:16px;word-wrap:break-word}html body>ul,html body>ol{margin-bottom:16px}html body ul,html body ol{padding-left:2em}html body ul.no-list,html body ol.no-list{padding:0;list-style-type:none}html body ul ul,html body ul ol,html body ol ol,html body ol ul{margin-top:0;margin-bottom:0}html body li{margin-bottom:0}html body li.task-list-item{list-style:none}html body li>p{margin-top:0;margin-bottom:0}html body .task-list-item-checkbox{margin:0 .2em .25em -1.8em;vertical-align:middle}html body .task-list-item-checkbox:hover{cursor:pointer}html body blockquote{margin:16px 0;font-size:inherit;padding:0 15px;color:#5c5c5c;border-left:4px solid #d6d6d6}html body blockquote>:first-child{margin-top:0}html body blockquote>:last-child{margin-bottom:0}html body hr{height:4px;margin:32px 0;background-color:#d6d6d6;border:0 none}html body table{margin:10px 0 15px 0;border-collapse:collapse;border-spacing:0;display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all}html body table th{font-weight:bold;color:#000}html body table td,html body table th{border:1px solid #d6d6d6;padding:6px 13px}html body dl{padding:0}html body dl dt{padding:0;margin-top:16px;font-size:1em;font-style:italic;font-weight:bold}html body dl dd{padding:0 16px;margin-bottom:16px}html body code{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;font-size:.85em !important;color:#000;background-color:#f0f0f0;border-radius:3px;padding:.2em 0}html body code::before,html body code::after{letter-spacing:-0.2em;content:"\00a0"}html body pre>code{padding:0;margin:0;font-size:.85em !important;word-break:normal;white-space:pre;background:transparent;border:0}html body .highlight{margin-bottom:16px}html body .highlight pre,html body pre{padding:1em;overflow:auto;font-size:.85em !important;line-height:1.45;border:#d6d6d6;border-radius:3px}html body .highlight pre{margin-bottom:0;word-break:normal}html body pre code,html body pre tt{display:inline;max-width:initial;padding:0;margin:0;overflow:initial;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}html body pre code:before,html body pre tt:before,html body pre code:after,html body pre tt:after{content:normal}html body p,html body blockquote,html body ul,html body ol,html body dl,html body pre{margin-top:0;margin-bottom:16px}html body kbd{color:#000;border:1px solid #d6d6d6;border-bottom:2px solid #c7c7c7;padding:2px 4px;background-color:#f0f0f0;border-radius:3px}@media print{html body{background-color:#fff}html body h1,html body h2,html body h3,html body h4,html body h5,html body h6{color:#000;page-break-after:avoid}html body blockquote{color:#5c5c5c}html body pre{page-break-inside:avoid}html body table{display:table}html body img{display:block;max-width:100%;max-height:100%}html body pre,html body code{word-wrap:break-word;white-space:pre}}.markdown-preview{width:100%;height:100%;box-sizing:border-box}.markdown-preview .pagebreak,.markdown-preview .newpage{page-break-before:always}.markdown-preview pre.line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}.markdown-preview pre.line-numbers>code{position:relative}.markdown-preview pre.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:1em;font-size:100%;left:0;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.markdown-preview pre.line-numbers .line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.markdown-preview pre.line-numbers .line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}.markdown-preview .mathjax-exps .MathJax_Display{text-align:center !important}.markdown-preview:not([for="preview"]) .code-chunk .btn-group{display:none}.markdown-preview:not([for="preview"]) .code-chunk .status{display:none}.markdown-preview:not([for="preview"]) .code-chunk .output-div{margin-bottom:16px}.scrollbar-style::-webkit-scrollbar{width:8px}.scrollbar-style::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}.scrollbar-style::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode]){position:relative;width:100%;height:100%;top:0;left:0;margin:0;padding:0;overflow:auto}html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{position:relative;top:0}@media screen and (min-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc(50% - 457px)}}@media screen and (max-width:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{font-size:14px !important;padding:1em}}@media print{html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{display:none}}html body[for="html-export"]:not([data-presentation-mode]) #sidebar-toc-btn{position:fixed;bottom:8px;left:8px;font-size:28px;cursor:pointer;color:inherit;z-index:99;width:32px;text-align:center;opacity:.4}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] #sidebar-toc-btn{opacity:1}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc{position:fixed;top:0;left:0;width:300px;height:100%;padding:32px 0 48px 0;font-size:14px;box-shadow:0 0 4px rgba(150,150,150,0.33);box-sizing:border-box;overflow:auto;background-color:inherit}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar{width:8px}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-track{border-radius:10px;background-color:transparent}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc::-webkit-scrollbar-thumb{border-radius:5px;background-color:rgba(150,150,150,0.66);border:4px solid rgba(150,150,150,0.66);background-clip:content-box}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc a{text-decoration:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{padding:0 1.6em;margin-top:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc li{margin-bottom:.8em}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .md-sidebar-toc ul{list-style-type:none}html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{left:300px;width:calc(100% - 300px);padding:2em calc(50% - 457px - 150px);margin:0;box-sizing:border-box}@media screen and (max-width:1274px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{padding:2em}}@media screen and (max-width:450px){html body[for="html-export"]:not([data-presentation-mode])[html-show-sidebar-toc] .markdown-preview{width:100%}}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .markdown-preview{left:50%;transform:translateX(-50%)}html body[for="html-export"]:not([data-presentation-mode]):not([html-show-sidebar-toc]) .md-sidebar-toc{display:none}
|
|
/* Please visit the URL below for more information: */
|
|
/* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css */
|
|
|
|
</style>
|
|
</head>
|
|
<body for="html-export">
|
|
<div class="mume markdown-preview ">
|
|
<h1 class="mume-header" id="artplayer">ArtPlayer</h1>
|
|
|
|
<p><img src="https://badgen.net/npm/v/artplayer" alt="version"><br>
|
|
<img src="https://badgen.net/npm/license/artplayer" alt="license"><br>
|
|
<img src="https://badgen.net/bundlephobia/minzip/artplayer" alt="size"></p>
|
|
<blockquote>
|
|
<p>ArtPlayer is a modern HTML5 video player</p>
|
|
</blockquote>
|
|
<h2 class="mume-header" id="status">Status</h2>
|
|
|
|
<p>⚠️ This project is WIP and not ready for production use yet!</p>
|
|
<h2 class="mume-header" id="demo">Demo</h2>
|
|
|
|
<p><a href="https://blog.zhw-island.com/ArtPlayer/">Checkout the demo</a></p>
|
|
<h2 class="mume-header" id="introduction">Introduction</h2>
|
|
|
|
<h2 class="mume-header" id="install">Install</h2>
|
|
|
|
<pre data-role="codeBlock" data-info="" class="language-"><code>$ npm install --save artplayer
|
|
</code></pre><pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">import</span> Artplayer <span class="token keyword">from</span> <span class="token string">'artplayer'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> <span class="token string">'artplayer/dist/artplayer.css'</span><span class="token punctuation">;</span>
|
|
</pre><p>OR umd builds are also available</p>
|
|
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/artplayer.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>path/to/artplayer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
</pre><p>Will expose the global variable to <code>window.Artplayer</code>.</p>
|
|
<h2 class="mume-header" id="usage">Usage</h2>
|
|
|
|
<pre data-role="codeBlock" data-info="html" class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>artplayer-app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
</pre><pre data-role="codeBlock" data-info="js" class="language-javascript"><span class="token keyword">var</span> art <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Artplayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
container<span class="token punctuation">:</span> <span class="token string">'.artplayer-app'</span><span class="token punctuation">,</span>
|
|
url<span class="token punctuation">:</span> <span class="token string">'path/to/video.mp4'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</pre><h2 class="mume-header" id="configuration">Configuration</h2>
|
|
|
|
<table>
|
|
<tbody><tr>
|
|
<th>parameter</th>
|
|
<th>description</th>
|
|
<th>Example</th>
|
|
</tr>
|
|
<tr>
|
|
<th><code>container</code></th>
|
|
<td>
|
|
Type: <code>string</code>, <code>element</code><br>
|
|
Default: <code>.artplayer</code><br>
|
|
Required: <code>true</code><br><br>
|
|
DOM container of the player, you need to initialize a size for the container element
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20%2F%2F%20container%3A%20document.querySelector(%27.artplayer-app%27)%2C%0A%20%20%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>url</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br>
|
|
Required: <code>true</code><br><br>
|
|
Video source url, Three video file formats are supported: <code>mp4</code>, <code>ogg</code>, <code>webm</code>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%20%20%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20%2F%2F%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.ogg%27%2C%0A%20%20%2F%2F%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.webm%27%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>poster</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Video poster image url
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20poster%3A%20url%20%2B%20%27%2Fimage%2Fone-more-time-one-more-chance-poster.jpg%27%2C%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>title</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Video title, will be shown in <code>screenshot</code> file name and <code>pip</code> mode
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20title%3A%20%27%E3%80%90%E6%96%B0%E6%B5%B7%E8%AF%9A%E5%8A%A8%E7%94%BB%E3%80%91%E3%80%8E%E7%A7%92%E9%80%9F5%E3%82%BB%E3%83%B3%E3%83%81%E3%83%A1%E3%83%BC%E3%83%88%E3%83%AB%E3%80%8F%27%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>volume</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>0.7</code><br><br>
|
|
Default volume, player will cache the last volume, which may be overwritten
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20volume%3A%200.5%2C%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>autoplay</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to play automatically, sometimes it doesn't necessarily succeed<br>
|
|
More info: <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes">autoplay-policy-changes</a>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20autoplay%3A%20true%2C%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>autoSize</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Keep the original video aspect ratio and automatically zoom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20autoSize%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>loop</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Automatic loop playback
|
|
</td>
|
|
<td>
|
|
<a target="_blank" href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20loop%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>playbackRate</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show playback rate controller in the contextmenu
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20playbackRate%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>aspectRatio</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show aspect ratio controller in the contextmenu
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20aspectRatio%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>screenshot</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show screenshot controller in the bottom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20screenshot%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>setting</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show setting controller in the bottom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20setting%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>pip</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show pip controller in the bottom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20pip%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>fullscreen</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show window fullscreen controller in the bottom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20fullscreen%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>fullscreenWeb</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether to show web page fullscreen controller in the bottom
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20fullscreenWeb%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>hotkey</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>true</code><br><br>
|
|
Whether to use hotkey<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>↑</code></th>
|
|
<td>Increase volume</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>↓</code></th>
|
|
<td>Decrease volume</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>←</code></th>
|
|
<td>Seek backward</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>→</code></th>
|
|
<td>Seek forward</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>space</code></th>
|
|
<td>Toggle playback</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20hotkey%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>mutex</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>true</code><br><br>
|
|
Player mutually exclusive, only one player can play at a time
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20mutex%3A%20true%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>lang</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>navigator.language.toLowerCase()</code><br><br>
|
|
Default display language: <code>en</code>, <code>zh-cn</code>, <code>zh-tw</code>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20lang%3A%20%27en%27%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>theme</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>#f00</code><br><br>
|
|
Default theme color
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20theme%3A%20%27%23ffad00%27%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>subtitle</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{}</code><br><br>
|
|
Custom subtitle<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>url</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Subtitle url, support <code>vtt</code> and <code>srt</code> format
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>style</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{}</code><br><br>
|
|
Subtitle style
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20subtitle%3A%20%7B%0A%20%20%20%20url%3A%20url%20%2B%20%27%2Fsubtitle%2Fone-more-time-one-more-chance.srt%27%2C%0A%20%20%20%20style%3A%20%7B%0A%20%20%20%20%20%20color%3A%20%27%2303A9F4%27%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>thumbnails</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{}</code><br><br>
|
|
Custom thumbnails in the progress bar with lazy load<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>url</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Thumbnails image url
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>number</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>60</code><br><br>
|
|
Thumbnails number
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>width</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>160</code><br><br>
|
|
Thumbnails width
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>height</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>90</code><br><br>
|
|
Thumbnails height
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>column</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>10</code><br><br>
|
|
Thumbnails column
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20thumbnails%3A%20%7B%0A%20%20%20%20url%3A%20url%20%2B%20%27%2Fimage%2Fone-more-time-one-more-chance-thumbnails.png%27%2C%0A%20%20%20%20width%3A%20190%2C%0A%20%20%20%20height%3A%20107%0A%20%20%7D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>moreVideoAttr</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{'controls': false,'preload': 'auto'}</code><br><br>
|
|
More video Attributes, these properties will be written directly to the video element<br>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20moreVideoAttr%3A%20%7B%0A%20%20%20%20%27webkit-playsinline%27%3A%20true%2C%0A%20%20%20%20%27playsinline%27%3A%20true%0A%20%20%7D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>quality</code></th>
|
|
<td>
|
|
Type: <code>array</code><br>
|
|
Default: <code>[]</code><br><br>
|
|
Custom quality, The type of quality is an object<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>default</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>false</code><br><br>
|
|
Whether the default quality, if not specified, the first quality will be taken
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>name</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Quality name
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>url</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
Quality url
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20quality%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20default%3A%20true%2C%0A%20%20%20%20%20%20name%3A%20%27%E6%A0%87%E6%B8%85%20480P%27%2C%0A%20%20%20%20%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20name%3A%20%27%E9%AB%98%E6%B8%85%20720P%27%2C%0A%20%20%20%20%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-720p.mp4%27%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>highlight</code></th>
|
|
<td>
|
|
Type: <code>array</code><br>
|
|
Default: <code>[]</code><br><br>
|
|
Custom highlight, The type of highlight is an object<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>time</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>0</code><br><br>
|
|
highlight seconds
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>text</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>''</code><br><br>
|
|
highlight text
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20highlight%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20time%3A%2060%2C%0A%20%20%20%20%20%20text%3A%20%27One%20more%20chance%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20time%3A%20120%2C%0A%20%20%20%20%20%20text%3A%20%27%E8%B0%81%E3%81%A7%E3%82%82%E3%81%84%E3%81%84%E3%81%AF%E3%81%9A%E3%81%AA%E3%81%AE%E3%81%AB%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20time%3A%20180%2C%0A%20%20%20%20%20%20text%3A%20%27%E5%A4%8F%E3%81%AE%E6%83%B3%E3%81%84%E5%87%BA%E3%81%8C%E3%81%BE%E3%82%8F%E3%82%8B%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20time%3A%20240%2C%0A%20%20%20%20%20%20text%3A%20%27%E3%81%93%E3%82%93%E3%81%AA%E3%81%A8%E3%81%93%E3%81%AB%E3%81%82%E3%82%8B%E3%81%AF%E3%81%9A%E3%82%82%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AB%27%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20time%3A%20300%2C%0A%20%20%20%20%20%20text%3A%20%27%EF%BC%8D%EF%BC%8D%E7%BB%88%E3%82%8F%E3%82%8A%EF%BC%8D%EF%BC%8D%27%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>layers</code></th>
|
|
<td>
|
|
Type: <code>array</code><br>
|
|
Default: <code>[]</code><br><br>
|
|
Custom layer, The type of layer is an <code>object</code> or <code>function</code><br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>disable</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Whether to disable the layer
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>name</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>layer${id}</code><br><br>
|
|
The unique name of the layer, used for the class name
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>index</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>${id}</code><br><br>
|
|
The unique index of the layer, used for the priority level
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>html</code></th>
|
|
<td>
|
|
Type: <code>string</code>, <code>element</code><br>
|
|
Default: <code>''</code><br><br>
|
|
The dom element of the layer
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>style</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{}</code><br><br>
|
|
The style object of the layer
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>click</code></th>
|
|
<td>
|
|
Type: <code>function</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Click event of the layer
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20layers%3A%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20html%3A%20%60%3Cimg%20style%3D%22width%3A%20100px%22%20src%3D%22%24%7Burl%7D%2Fimage%2Fyour-name.png%22%3E%60%2C%0A%20%20%20%20%20%20style%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%27position%27%3A%20%27absolute%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27top%27%3A%20%2720px%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27right%27%3A%20%2720px%27%2C%0A%20%20%20%20%20%20%20%20%20%20%27opacity%27%3A%20%27.9%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%5D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>contextmenu</code></th>
|
|
<td>
|
|
Type: <code>array</code><br>
|
|
Default: <code>[]</code><br><br>
|
|
Custom contextmenu, The type of layer is an <code>object</code> or <code>function</code><br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>disable</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Whether to disable the contextmenu
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>name</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>contextmenu${id}</code><br><br>
|
|
The unique name of the contextmenu, used for the class name
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>index</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>${id}</code><br><br>
|
|
The unique index of the contextmenu, used for the priority level
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>html</code></th>
|
|
<td>
|
|
Type: <code>string</code>, <code>element</code><br>
|
|
Default: <code>''</code><br><br>
|
|
The dom element of the contextmenu
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>style</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>{}</code><br><br>
|
|
The style object of the contextmenu
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>click</code></th>
|
|
<td>
|
|
Type: <code>function</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Click event of the contextmenu
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=var%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20contextmenu%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20html%3A%20%27%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95%20-%20%E5%A4%A9%E4%BA%AE%E8%AF%B7%E5%85%B3%E7%81%AF%20%CE%A3(%E3%81%A3%20%C2%B0%D0%94%20%C2%B0%3B)%E3%81%A3%27%2C%0A%20%20%20%20%20%20%20%20%20%20click%3A%20function()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20document.querySelector(%27.video-wrap%27).classList.toggle(%27dark%27)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.hide()%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%5D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>controls</code></th>
|
|
<td>
|
|
Type: <code>array</code><br>
|
|
Default: <code>[]</code><br><br>
|
|
Custom controls, The type of controls is an object<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>option</code></th>
|
|
<td>
|
|
Type: <code>object</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Instantiated an object property<br>
|
|
<table>
|
|
<tbody><tr>
|
|
<th><code>disable</code></th>
|
|
<td>
|
|
Type: <code>boolean</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
Whether to disable the controller
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>name</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>control${id}</code><br><br>
|
|
The unique name of the controller, used for the class name
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>position</code></th>
|
|
<td>
|
|
Type: <code>string</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
The position where the controller appears: <code>top</code>, <code>left</code>, <code>right</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th><code>index</code></th>
|
|
<td>
|
|
Type: <code>number</code><br>
|
|
Default: <code>undefined</code><br><br>
|
|
The unique index of the controller, used for the priority level
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</td>
|
|
<td>
|
|
<a href="https://blog.zhw-island.com/ArtPlayer/?code=function%20MyController(option)%7B%0A%09this.option%20%3D%20option%3B%0A%7D%0A%0AMyController.prototype.apply%20%3D%20function(art%2C%20dom)%7B%0A%20%20%20%20dom.innerHTML%20%3D%20%27MyController%27%3B%0A%7D%0A%0Avar%20url%20%3D%20%27https%3A%2F%2Fblog.zhw-island.com%2Fassets-cdn%27%3B%0Avar%20art%20%3D%20new%20Artplayer(%7B%0A%20%20container%3A%20%27.artplayer-app%27%2C%0A%20%20url%3A%20url%20%2B%20%27%2Fvideo%2Fone-more-time-one-more-chance-480p.mp4%27%2C%0A%20%20controls%3A%20%5Bnew%20MyController(%7B%0A%20%20%09%20%20name%3A%20%27myController%27%2C%0A%20%20%20%20%20%20disable%3A%20false%2C%0A%20%20%20%20%20%20position%3A%20%27right%27%2C%0A%20%20%20%20%20%20index%3A%2010%0A%20%20%7D)%5D%0A%7D)%3B">Demo</a>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
<h2 class="mume-header" id="api">API</h2>
|
|
|
|
<h2 class="mume-header" id="ecosystem">Ecosystem</h2>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Project</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><a href="https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmu">artplayer-plugin-danmu</a></td>
|
|
<td>Danmu plugin for ArtPlayer</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h2 class="mume-header" id="issue">Issue</h2>
|
|
|
|
<h2 class="mume-header" id="contributors">Contributors</h2>
|
|
|
|
<h2 class="mume-header" id="license">License</h2>
|
|
|
|
<p>MIT © <a href="https://www.zhw-island.com/">Harvey Zack</a></p>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body></html> |