https://github.com/yuan66-hub/video-to-canvas

透明视频播放工具
https://github.com/yuan66-hub/video-to-canvas

canvas video webgl

Last synced: about 18 hours ago
JSON representation

透明视频播放工具

• Host: GitHub
• URL: https://github.com/yuan66-hub/video-to-canvas
• Owner: yuan66-hub
• Created: 2024-06-11T04:04:04.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-11T04:10:25.000Z (5 months ago)
• Last Synced: 2024-10-31T18:13:08.799Z (18 days ago)
• Topics: canvas, video, webgl
• Language: TypeScript
• Homepage:
• Size: 8.78 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 安装

```bash

 npm i @yuanjianming/video-to-canvas

```

## 使用

```html

```

```javascript

        //.....

        const videoCanvas = new AlphaVideo({

            src: "http://f1.iplay.126.net/LTg4MDA1/c62f8e1f15e98ff9eb9a094d015db380.mp4",

            width: 140,

            height: 200,

            loop: true, // 是否循环播放

            canvas: document.getElementById('videoCanvas'),

        });

        videoCanvas.play();

```

## 选项

| 选项 | 是否必填  | 类型 | 默认值 | 备注 |

|:--------|:------:|-----:|-----:|-----:|

| src | 是 | string | '' | 视频地址（url）|

| autoplay | 否 | boolean | true | 是否自动播放 |

| loop | 否 | boolean | true | 是否循环播放 |

| canvas | 是 | HTMLCanvasElement  | null | canvas元素实例 |

| width | 否 | number | 375 | canvas标签宽度属性 |

| height | 否 | number | 300 | canvas标签高度属性 |

| onError | 否 | function | ()=>{} | 视频播放报错回调函数 |

| onPlay | 否 | function | ()=>{} | 视频播放回调函数 |