ArtPlayer/docs/document/assets/en_plugin_ambilight.md.BIiOdZed.js

import{_ as i,o as e,c as t,ak as a,j as n}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Video ambilight","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ambilight.md","filePath":"en/plugin/ambilight.md","lastUpdated":1789497001000}'),l={name:"en/plugin/ambilight.md"};function p(r,s,d,h,o,c){return e(),t("div",null,s[0]||(s[0]=[a(`<h1 id="video-ambilight" tabindex="-1">Video ambilight <a class="header-anchor" href="#video-ambilight" aria-label="Permalink to &quot;Video ambilight&quot;">​</a></h1><p><a href="./../../plugin/ambilight.html">简体中文</a></p><p>Sample colors from the video to display a blurred glow around the player. The plugin reads pixels with Canvas, needs no additional SDK, and does not change video playback or audio output.</p><p>This page describes the refactor branch. Its lifecycle fixes and accurate type entry are not published yet. The online example and unpinned npm/CDN packages are not the current candidate.</p><h2 id="installation-and-example" tabindex="-1">Installation and example <a class="header-anchor" href="#installation-and-example" aria-label="Permalink to &quot;Installation and example&quot;">​</a></h2><div class="language-sh vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> artplayer-plugin-ambilight</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Artplayer </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> artplayerPluginAmbilight </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-ambilight&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>For script usage, load ArtPlayer before <code>dist/artplayer-plugin-ambilight.js</code>. The global is <code>artplayerPluginAmbilight</code>. The following code is unchanged from the <a href="https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ambilight/index.js&amp;example=ambilight" target="_blank" rel="noreferrer">online ambilight example</a>. Your application must provide its own container and accessible video.</p>`,8),n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ambilight/index.js"},"▶ Run Code",-1),a(`<div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// npm i artplayer-plugin-ambilight</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import artplayerPluginAmbilight from &#39;artplayer-plugin-ambilight&#39;;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> art</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Artplayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  container: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;.artplayer-app&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;/assets/sample/video.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  autoSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    artplayerPluginAmbilight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      blur: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;50px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      frequency: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      duration: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="options" tabindex="-1">Options <a class="header-anchor" href="#options" aria-label="Permalink to &quot;Options&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Field</th><th>Type</th><th>Default</th><th>Meaning</th></tr></thead><tbody><tr><td><code>blur</code></td><td><code>string</code></td><td><code>&#39;50px&#39;</code></td><td>CSS blur radius</td></tr><tr><td><code>opacity</code></td><td><code>number</code></td><td><code>0.5</code></td><td>Glow grid opacity; the example explicitly uses <code>1</code></td></tr><tr><td><code>frequency</code></td><td><code>number</code></td><td><code>10</code></td><td>Maximum samples per second; use a positive value; playback and frame scheduling limit the actual rate</td></tr><tr><td><code>duration</code></td><td><code>number</code></td><td><code>0.3</code></td><td>Color transition duration in seconds</td></tr><tr><td><code>zIndex</code></td><td><code>number</code></td><td>Actual value fixed at <code>9</code></td><td>Historical accepted input that does not change the grid&#39;s stacking order</td></tr></tbody></table><p>The plugin samples a 3×3 grid. Colors update only while the player is playing and the sampling interval has elapsed. <code>frequency</code> does not set the video&#39;s frame rate. Masks, clipping and an ancestor&#39;s <code>overflow</code> styles can also affect how much of the glow is visible.</p><h2 id="start-and-stop" tabindex="-1">start and stop <a class="header-anchor" href="#start-and-stop" aria-label="Permalink to &quot;start and stop&quot;">​</a></h2><p>The result has the fixed <code>name</code> of <code>artplayerPluginAmbilight</code>. When installed through the constructor options, it starts scheduling after the player&#39;s <code>ready</code> event:</p><div class="language-js vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> light</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> art.plugins.artplayerPluginAmbilight;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">light.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">stop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();  </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Stop sampling and retain the last colors.</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">light.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(); </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Resume sampling while the player is playing.</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Both methods return <code>undefined</code> synchronously and do not play or pause the video. <code>stop()</code> retains the last colors. <code>start()</code> is not a Promise that captures a frame immediately. Repeated calls do not create multiple sampling loops. If you install the plugin with <code>art.plugins.add(...)</code> after <code>ready</code> has already fired, call <code>start()</code> on the returned result yourself.</p><p>There is no plugin <code>update</code> or separate <code>destroy</code> method. Destroying the player stops frame scheduling, removes the grid and plugin subscriptions, and releases the sampling canvas. Retained <code>start/stop</code> methods do no work after destruction.</p><h2 id="media-access-and-proxies" tabindex="-1">Media access and proxies <a class="header-anchor" href="#media-access-and-proxies" aria-label="Permalink to &quot;Media access and proxies&quot;">​</a></h2><p>The browser must be able to decode the video and read its pixels into Canvas. Cross-origin video needs the appropriate media CORS configuration and server response headers; successful playback alone does not grant pixel access. A failed pixel read skips that update and retains existing colors. A later readable source can recover. The plugin does not bypass browser origin restrictions.</p><p>Canvas proxy sampling uses the actual dimensions of its output canvas. Other proxies must be checked for a drawable output; a passing desktop combination does not establish support for every browser or proxy. The effect does not control a physical monitor&#39;s backlight.</p><h2 id="typescript-compatibility-entries" tabindex="-1">TypeScript compatibility entries <a class="header-anchor" href="#typescript-compatibility-entries" aria-label="Permalink to &quot;TypeScript compatibility entries&quot;">​</a></h2><p>The root and <code>/legacy</code> entries retain the published 1.1.0 factory type: the options object is required, while its fields are optional. Pass <code>{}</code> for defaults with those types. JavaScript calls can still omit the argument.</p><p>For accurate optional calls, the CommonJS <code>.default</code> self-alias, or callable NodeNext ESM default types, use <code>/runtime</code>, which shares the same implementation:</p><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ambilight </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;artplayer-plugin-ambilight/runtime&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> installLight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ambilight</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> installDefaultLight</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ambilight.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ opacity: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.5</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>The root declarations export the named types <code>Option</code>, <code>Result</code>, <code>Callable</code>, <code>Factory</code> and <code>RuntimeFactory</code>. Version 1.0.0 used <code>export =</code> and required option fields, unlike 1.1.0. Earlier <code>import = require</code> callers can move to <code>/runtime</code>; reads of optional fields need a fallback. Node10 TypeScript default imports of <code>/runtime</code> require <code>esModuleInterop</code>; <code>import = require</code> works without it.</p>`,17)]))}const g=i(l,[["render",p]]);export{u as __pageData,g as default};