stencil-video-timeline
Advanced tools
A customizable video timeline component built with Stencil.js, designed to be framework-agnostic and easy to integrate into React, Vue, Angular, or any web application.
Install the package via npm:
npm install stencil-video-timeline
To use the component in a plain HTML/JavaScript project:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Stencil Video Timeline Example</title>
<script src="node_modules/stencil-video-timeline/dist/stencil-video-timeline/stencil-video-timeline.esm.js" type="module"></script>
<script src="node_modules/stencil-video-timeline/dist/stencil-video-timeline/stencil-video-timeline.js" nomodule defer></script>
</head>
<body>
<stencil-video-timeline></stencil-video-timeline>
<script>
// Optional: Initialize the component
stencilVideoTimeline.defineCustomElements(window);
</script>
</body>
</html>
<stencil-video-timeline
canvas-height="50"
play-time="1609459200000"
speed="1000"
for-ward-value="5000"
start-time-threshold="1609455600000"
end-time-threshold="1609462800000"
is-play-click="false"
></stencil-video-timeline>
npm install stencil-video-timeline-react
// App.jsx
import React from 'react';
import { defineCustomElements } from 'stencil-video-timeline/loader';
import { StencilVideoTimeline } from 'stencil-video-timeline-react';
defineCustomElements(window);
function App() {
return (
<div>
<StencilVideoTimeline
canvasHeight={50}
playTime="1609459200000"
speed={1000}
forWardValue={5000}
startTimeThreshold="1609455600000"
endTimeThreshold="1609462800000"
isPlayClick={false}
/>
</div>
);
}
export default App;
npm install stencil-video-timeline-vue
// main.js
import Vue from 'vue';
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from 'stencil-video-timeline/loader';
Vue.config.productionTip = false;
applyPolyfills().then(() => {
defineCustomElements(window);
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
<!-- App.vue -->
<template>
<div>
<stencil-video-timeline
:canvas-height="50"
:play-time="1609459200000"
:speed="1000"
:for-ward-value="5000"
:start-time-threshold="1609455600000"
:end-time-threshold="1609462800000"
:is-play-click="false"
></stencil-video-timeline>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
npm install stencil-video-timeline-angular
// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent],
})
export class AppModule {}
// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements } from 'stencil-video-timeline/loader';
import { AppModule } from './app/app.module';
defineCustomElements(window);
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
<!-- app.component.html -->
<stencil-video-timeline
[canvasHeight]="50"
[playTime]="1609459200000"
[speed]="1000"
[forWardValue]="5000"
[startTimeThreshold]="1609455600000"
[endTimeThreshold]="1609462800000"
[isPlayClick]="false"
></stencil-video-timeline>
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
canvasHeight | canvas-height | number | 50 | The height of the canvas element. |
playTime | play-time | number | string | Date | Date.now() | The current playback time in milliseconds. |
speed | speed | number | 1000 | The playback speed in milliseconds. |
forWardValue | for-ward-value | number | 5000 | Time to skip forward or backward in milliseconds. |
startTimeThreshold | start-time-threshold | number | string | Date | Date.now() - 12 * 3600 * 1000 | The start time threshold in milliseconds. |
endTimeThreshold | end-time-threshold | number | string | Date | Date.now() + 12 * 3600 * 1000 | The end time threshold in milliseconds. |
isPlayClick | is-play-click | boolean | false | Whether the play button has been clicked. |
videoCells | - | Array | [] | Array of video cell objects representing clips. |
borderColor | border-color | string | '#fff' | The color of the canvas border. |
bgColor | bg-color | string | '#fff' | The background color of the canvas. |
bottomLineColor | bottom-line-color | string | 'rgba(0,0,0,1)' | The color of the bottom line on the timeline. |
verticalBarColor | vertical-bar-color | string | 'rgba(0,0,0,1)' | The color of the vertical bars on the timeline. |
playBarColor | play-bar-color | string | '#448aff' | The color of the play bar. |
The component exposes several methods for controlling playback and timeline behavior.
onPlayClick() — Starts playback.
await stencilVideoTimeline.onPlayClick();
onPauseClick() — Pauses playback.
await stencilVideoTimeline.onPauseClick();
forward() — Skips forward by the specified amount in forWardValue.
await stencilVideoTimeline.forward();
backward() — Skips backward by the specified amount in forWardValue.
await stencilVideoTimeline.backward();
The component emits several events you can listen to:
| Event Name | Description |
|---|---|
playClick | Emitted when the play button is clicked. |
onMouseUp | Emitted when the mouse button is released. |
onMouseDown | Emitted when the mouse button is pressed down. |
onKeyUp | Emitted when a key is released. |
onKeyDown | Emitted when a key is pressed down. |
In JavaScript:
const timeline = document.querySelector('stencil-video-timeline');
timeline.addEventListener('playClick', (event) => {
console.log('Play clicked:', event.detail);
});
In React:
<StencilVideoTimeline
onPlayClick={(event) => {
console.log('Play clicked:', event.detail);
}}
/>
In Vue:
<stencil-video-timeline @playClick="handlePlayClick"></stencil-video-timeline>
<script>
export default {
methods: {
handlePlayClick(event) {
console.log('Play clicked:', event.detail);
},
},
};
</script>
In Angular:
<stencil-video-timeline (playClick)="handlePlayClick($event)"></stencil-video-timeline>
// app.component.ts
export class AppComponent {
handlePlayClick(event: CustomEvent) {
console.log('Play clicked:', event.detail);
}
}
You can style the component using properties or by targeting CSS variables:
| CSS Variable | Description |
|---|---|
--timeline-border-color | The border color of the timeline |
--timeline-bg-color | The background color |
--timeline-play-bar-color | The color of the play bar |
--timeline-vertical-bar-color | The color of vertical bars |
--timeline-bottom-line-color | The color of the bottom line |
stencil-video-timeline {
--timeline-border-color: #ccc;
--timeline-bg-color: #f9f9f9;
--timeline-play-bar-color: #ff0000;
}
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
This project is licensed under the MIT License.
FAQs
A StencilJS component for creating a video timeline.
We found that stencil-video-timeline demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.