dynamicbg
Dynamic background Gaussian blur rendering plugin。SourceCode
pluginName: dynamicbg
The plugin is disable by default,The following configuration of playerConfig
is required for opening
const player = new Player({
...,
dynamicBg: {
disable: false
}
})
The plug-in display effect is shown in the figure below:
Note
- If the video.src under safari is blob type or the video is encrypted type,video frame cannot be captured, so we will be downgraded to use the
playerConfig.poster
image as the background - Before the first frame of the video is loaded,Will get
playerConfig.poster
to display the background - The video playback address must support cross-domain
config
isInnerRender
@type
:Boolean
default
:false
Whether to render only in the display area of the video screen, If true is selected, when the control bar is separated from the video screen, the position of the control bar will not be rendered
disable
@type
:Boolean
default
:true
mode
@type
:String
default
:framerate
The specific enumeration values are as follows:
framerate
Dynamic rendering according to the frame rate,frame rate value isframeRate
realtime
Real-time rendering, with the highest rendering frequencyfirstframe
Render only the first frame
frameRate
@type
:Number
default
:10
The frame rate is rendered when framed,,Only effective when mode:framerate
filter
@type
:String
default
:blur(50px)
Background Gaussian Blur Filter Settings
addMask
@type
:Boolean
default
:true
Do you need a transparency mask
maskBg
@type
:String
default
:rgba(0,0,0,0.7)
Mask color configuration, only effective when addMask
is true
multiple
@type
:number
default
:1.2
The multiple of the screen magnification when rendering
API
isSupport
@desc
: static API, Check whether the current environment supports rendering
import { DynamicBg } from 'xgplayer/es/plugins/dynamicBg'
const support = DynamicBg.isSupport()
start()
@desc
: Start rendering
stop()
@desc
: Stop rendering
updateImg(url)
@desc
: Use a picture url to render once@param
:{ String } url