Video 元素

Video —— 轻松渲染视频。

继承

更新日志

开源前的最后版本为 v1.0.0-beta.3，查看更新日志。

📦 安装插件（已开源）

需要安装 video 插件才能使用，点此访问 Github 仓库。

npmpnpmyarnbun

npm install @leafer-in/video

pnpm add @leafer-in/video

yarn add @leafer-in/video

bun add @leafer-in/video

或通过 script 标签引入，使用全局变量 LeaferIN.video 访问插件内部功能。

video.minvideo

html

<script src="https://unpkg.com/@leafer-in/video@2.3.1/dist/video.min.js"></script>
<script>
  const { Video } = LeaferIN.video
</script>

html

<script src="https://unpkg.com/@leafer-in/video@2.3.1/dist/video.js"></script>
<script>
  const { Video } = LeaferIN.video
</script>

关键属性

width?: `number`

宽度，默认使用视频原始宽度。

height?: `number`

高度，默认使用视频原始高度。

url: `string`

视频 url 地址，支持 Blob url、Data url(Base64)。

我们还提供了资源库，支持预加载视频。

注意事项

Video 元素设置 url 后，不支持同时设置 fill 属性（url 会覆盖 fill ），单独设置 fill 代替 url 是可以的。

辅助属性

带图案填充的元素自身也支持这些辅助属性（属性需要设置在元素上）。

pixelRatio: `number`

视频的像素比，默认为 1，（适配高清屏为 2，超高清屏为 3）。

自动宽高的视频，此属性才有效。

lazy: `boolean`

视频是否懒加载，可以加快页面显示速度，默认为 false。

placeholderColor: `string`

视频占位符的背景颜色，当视频加载中(延迟 100ms)或加载失败时均会显示。

只读属性

ready: `boolean`

视频是否已经加载完成。

decoder: `IVideoDecoder`

视频的解码实例，视频加载完成才存在。

playerOptions: `IVideoPlayerOptions`

实时播放参数，视频加载完成才存在。

interface IVideoPlayOptions {
  paused?: boolean // 是否暂停播放
}

关键属性

duration: `number`

获取视频总时长，以秒为单位。

currentTime: `number`

设置、获取视频的当前播放时间，以秒为单位。

volume: `number`

设置、获取视频的音量，范围为 0～1。

paused: `boolean`

视频是否已暂停。

ended: `boolean`

视频是否已结束。

关键方法

play ( )

播放视频。

pause ( )

暂停视频。

togglePlay ( )

暂停或播放视频，自动切换。

stop( )

停止播放视频，并恢复到起点状态。

辅助方法

load ()

手动加载视频。

一般用于元素未添加到 Leafer 中时，手动加载视频，获取视频自然宽高。

资源库

我们还提供了资源库，可预加载视频。

引擎中的所有视频都会通过资源库有序并行加载，当视频不再使用时，会进入回收列表，到达阈值会自动销毁。

// #Video [等待视频加载完，再添加到引擎中]
import { App, Resource } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const url = '/video/forest.mp4'

Resource.loadVideo(url).then(() => {

    const video = new Video({ url, pixelRatio: 2, editable: true })
    app.tree.add(video)

    // 点击 video 暂停/播放视频
    video.on('click', () => {

        video.togglePlay()

        // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

        // video.duration // 获取视频总时长，以秒为单位

        // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

        // video.volume // 获取、设置视频的音量，0～1

        // video.paused // 视频是否已暂停

        // video.ended // 视频是否已结束

    })

})

视频事件

ImageEvent

示例

创建 Video

// #Video [创建Video元素]
import { App } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const video = new Video({
    url: '/video/forest.mp4',
    pixelRatio: 2,
    editable: true
})

app.tree.add(video)

// 点击 video 暂停/播放视频
video.on('click', () => {

    video.togglePlay()

    // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

    // video.duration // 获取视频总时长，以秒为单位

    // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

    // video.volume // 获取、设置视频的音量，0～1

    // video.paused // 视频是否已暂停

    // video.ended // 视频是否已结束

})

使用 fill 代替 url

fill 可支持多个填充。

// #Video [使用 fill 代替 url]
import { App } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const video = new Video({
    fill: {
        type: 'video',
        url: '/video/forest.mp4',
        mode: 'stretch',
    },
    pixelRatio: 2,
    editable: true
})

app.tree.add(video)

video.on('click', () => {
    video.togglePlay() // 点击 video 暂停/播放视频
})

使用 Rect 代替 Video

// #Video [使用 Rect 代替 Video]
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { PaintVideo } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const rect = new Rect({
    fill: {
        type: 'video',
        url: '/video/forest.mp4',
        mode: 'stretch',
    },
    pixelRatio: 2,
    editable: true
})

app.tree.add(rect)

const video = new PaintVideo(rect)

// 点击 video 暂停/播放视频
rect.on('click', () => {

    video.togglePlay()

    // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

    // video.duration // 获取视频总时长，以秒为单位

    // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

    // video.volume // 获取、设置视频的音量，0～1

    // video.paused // 视频是否已暂停

    // video.ended // 视频是否已结束

})

在 Polygon 中使用 Video

// #Video [在 Polygon 中使用 Video]
import { App, Polygon } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { PaintVideo } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const polygon = new Polygon({
    sides: 6,
    fill: {
        type: 'video',
        url: '/video/forest.mp4',
        mode: 'stretch',
    },
    pixelRatio: 2,
    editable: true
})

app.tree.add(polygon)

const video = new PaintVideo(polygon)

// 点击 video 暂停/播放视频
polygon.on('click', () => {

    video.togglePlay()

    // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

    // video.duration // 获取视频总时长，以秒为单位

    // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

    // video.volume // 获取、设置视频的音量，0～1

    // video.paused // 视频是否已暂停

    // video.ended // 视频是否已结束

})

监听视频加载成功事件

// #Video [监听视频加载成功事件]
import { App, ImageEvent } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const video = new Video({
    url: '/video/forest.mp4',
    pixelRatio: 2,
    editable: true
})

app.tree.add(video)

video.once(ImageEvent.LOADED, function (e: ImageEvent) {
    console.log(e)

    const videoDom = video.decoder.decoder as HTMLVideoElement

    if (videoDom.readyState !== 4) {
        (video.decoder.decoder as HTMLVideoElement).addEventListener('canplaythrough', () => {
            console.log('已缓冲所有数据，可以流畅播放')
        })
    } else {
        console.log('已缓冲所有数据，可以流畅播放')
    }

})

// 点击 video 暂停/播放视频
video.on('click', () => {

    video.togglePlay()

    // 获取、设置视频相关参数，后续会做一个可选的视频播放控制条插件

    // video.duration // 获取视频总时长，以秒为单位

    // video.currentTime // 获取、设置当前视频的播放时间，以秒为单位

    // video.volume // 获取、设置视频的音量，0～1

    // video.paused // 视频是否已暂停

    // video.ended // 视频是否已结束

})

监听视频加载失败事件

// #Video [监听视频加载失败事件]
import { App, ImageEvent } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件 (可选)

import { Video } from '@leafer-in/video' // 导入视频插件

const app = new App({ view: window, editor: {} })

const video = new Video({
    url: '/video/forest.mp4',
    pixelRatio: 2,
    editable: true
})

app.tree.add(video)

video.once(ImageEvent.LOADED, function (e: ImageEvent) {
    console.log(e)
})

Video 元素 ​

更新日志 ​

📦 安装插件（已开源） ​

关键属性 ​

width?: number ​

height?: number ​

url: string ​

辅助属性 ​

pixelRatio: number ​

lazy: boolean ​

placeholderColor: string ​

只读属性 ​

ready: boolean ​

decoder: IVideoDecoder ​

playerOptions: IVideoPlayerOptions ​

关键属性 ​

duration: number ​

currentTime: number ​

volume: number ​

paused: boolean ​

ended: boolean ​

关键方法 ​

play ( ) ​

pause ( ) ​

togglePlay ( ) ​

stop( ) ​

辅助方法 ​

load () ​

资源库 ​

视频事件 ​

ImageEvent ​

示例 ​

创建 Video ​

使用 fill 代替 url ​

使用 Rect 代替 Video ​

在 Polygon 中使用 Video ​

监听视频加载成功事件 ​

监听视频加载失败事件 ​

Video 元素

更新日志

📦 安装插件（已开源）

关键属性

width?: `number`

height?: `number`

url: `string`

辅助属性

pixelRatio: `number`

lazy: `boolean`

placeholderColor: `string`

只读属性

ready: `boolean`

decoder: `IVideoDecoder`

playerOptions: `IVideoPlayerOptions`

关键属性

duration: `number`

currentTime: `number`

volume: `number`

paused: `boolean`

ended: `boolean`

关键方法

play ( )

pause ( )

togglePlay ( )

stop( )

辅助方法

load ()

资源库

视频事件

ImageEvent

示例

创建 Video

使用 fill 代替 url

使用 Rect 代替 Video

在 Polygon 中使用 Video

监听视频加载成功事件

监听视频加载失败事件