西瓜播放器 HTML5 video video.js 播放器 HTML5播放器 mp4 hls hls.js flv flv.js dash dash.js 无缝切换

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

  1. 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
  2. Before the first frame of the video is loaded,Will get playerConfig.poster to display the background
  3. 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 is frameRate
  • realtime Real-time rendering, with the highest rendering frequency
  • firstframe 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