Canvas-based video player available on Vue3. If you enter FPS, it operates in frames. You can set the range and visualize the image recognition bounding-box data.
Streaming videos may have delays. Local video files are recommended.
npm install --save vue3-canvas-video-player<script setup>
import Vue3CanvasVideoPlayer from 'vue3-canvas-video-player';
import 'vue3-canvas-video-player/dist/style.css';
</script>
<template>
<Vue3CanvasVideoPlayer
:src="'video.mp4'" // ''
:muted="true" // false
:autoplay="true" // false
:loop="true" // false
:range="[10, 20]" // [0, 0]
:fps="30" // 0
:bbox="{
data: {
100: [{ label: 'stone', xywh: [0, 200, 100, 400] }, { label: 'flower', xywh: [50, 250, 150, 450] }],
101: [{ label: 'stone', xywh: [1, 201, 101, 401] }, { label: 'flower', xywh: [51, 251, 151, 451] }],
102: [{ label: 'stone', xywh: [2, 202, 102, 402] }, { label: 'flower', xywh: [52, 252, 152, 452] }],
},
textColor: '#fff',
fillColor: 'rgba(0, 0, 255, 0.5)',
borderSize: 1,
borderColor: 'rgba(255, 0, 0, 0.5)',
}" // { data: {}, textColor: '#fff', fillColor: 'rgba(0, 0, 255, 0.5)', borderSize: 1, borderColor: 'rgba(255, 0, 0, 0.5)' }; } }
:type="'contain'" // 'overlay'
:messageTime="1000" // 1000
:preview="true" // false
:darkMode="true" // true
@loadedmetadata="(event) => console.log('loadedmetadata', event)"
@play="(event) => console.log('play', event)"
@pause="(event) => console.log('pause', event)"
@timeupdate="(event) => console.log('timeupdate', event)"
@volumechange="(event) => console.log('volumechange', event)"
@error="(event) => console.log('error', event)"
/>
</template>Path to the video source file.
Defines the start-up mute state.
Automatically play video at startup. It only works when it is muted.
Which controls whether the media element should start over when it reaches the end.
Use seconds to set the range of the beginning and end of the video.
When you enter the FPS for the video, it operates in frames.
Visualize the image recognition bounding-box data. You can change the line thickness, fill and line color. It only works when use FPS.
You can use 'contain' mode to prevent the controller from covering the screen, or 'overlay' mode for movie viewing.
Sets the time when messages displayed in the center of the screen disappear. No message is displayed when 0.
Displays a preview in the seek bar.
Use dark or light mode.
The loadedmetadata event is fired when the metadata has been loaded.
The play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.
The pause event is sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the media has been paused through a call to the element's pause() method.
The event is sent once the pause() method returns and after the media element's paused property has been changed to true.
The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.
The event frequency is dependent on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video.
The volumechange event is fired when the volume has changed.
The error event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem).
| Keys | Description |
|---|---|
ctrl + alt + ArrowUp |
Volume up |
ctrl + alt + ArrowDown |
Volume down |
ctrl + alt + ArrowLeft |
Prev second or frame |
ctrl + alt + ArrowRight |
Next second or frame |
ctrl + alt + g |
Go to frame (FPS required) |