zachrip / React Itinerary
Licence: mit
Render react components based on time sequences such as video or audio files.
Stars: ✭ 13
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Itinerary
H5player
网页播放器增强脚本,支持:播放进度记录、播放倍率记录、快进快退、倍速播放、画面缩放等
Stars: ✭ 736 (+5561.54%)
Mutual labels: video-player
Drm wv fp player
Few of the resources from flutter plugin video_player
Stars: ✭ 19 (+46.15%)
Mutual labels: video-player
Mpv.net
🎞 mpv.net is a modern media player for Windows that works just like mpv.
Stars: ✭ 737 (+5569.23%)
Mutual labels: video-player
Versaplayer
Versatile Video Player implementation for iOS, macOS, and tvOS
Stars: ✭ 608 (+4576.92%)
Mutual labels: video-player
Abplayerhtml5
Video Player for danmaku comments. ABPlayer in HTML5. ABPlayer核心构件以动态HTML编写的版本。向HTML5进发!HTML5弹幕播放器
Stars: ✭ 858 (+6500%)
Mutual labels: video-player
Timelinejs
🎬 jQuery timeline plugin, easily creates timeline slider.
Stars: ✭ 788 (+5961.54%)
Mutual labels: timeline
Vis Timeline
📈 Create a fully customizable, interactive timelines and 2d-graphs with items and ranges.
Stars: ✭ 654 (+4930.77%)
Mutual labels: timeline
Yuview
The Free and Open Source Cross Platform YUV Viewer with an advanced analytics toolset
Stars: ✭ 665 (+5015.38%)
Mutual labels: video-player
Pbjvideoplayer
▶️ video player, simple way to play and stream media on iOS/tvOS
Stars: ✭ 620 (+4669.23%)
Mutual labels: video-player
Timelinetool
Provides an easy way to change Playable Director's Bindings and Clips at runtime.
Stars: ✭ 24 (+84.62%)
Mutual labels: timeline
Svg Workshop
Materials for SVG Essentials & Animation Course
Stars: ✭ 612 (+4607.69%)
Mutual labels: timeline
Octocard
Highly flexible github info card for every github lover. [This project is deprecated.]
Stars: ✭ 742 (+5607.69%)
Mutual labels: timeline
Fluttertianyue
基于Flutter的超完整仿腾讯动漫,小说阅读,抖音视频项目,功能丰富,适合学习和日常使用,拥有较好的项目结构&比较规范的代码!Flutter入门,看这个就够了~Flutter project which provide richer functionality, if you want to learn flutter, this project is a good choice
Stars: ✭ 871 (+6600%)
Mutual labels: video-player
Opentimelineio
Open Source API and interchange format for editorial timeline information.
Stars: ✭ 777 (+5876.92%)
Mutual labels: timeline
react-itinerary
Render react components based on time sequences such as video or audio files.
Why
Sometimes you want to render certain things based on the current time of a video or music file.
Installation
npm install react-itinerary
more here
ExampleThis example will change the itinerary item text color when the current video playhead is between 5 and 10 seconds
import { ItineraryProvider, ItineraryHost, ItineraryItem } from 'react-itinerary';
const App = () => (
<ItineraryProvider>
<div>
<ItineraryHost
id="bigBuckBunny"
render={updateItinerary => (
<video
controls
src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_1080p_h264.mov"
onTimeUpdate={e => updateItinerary('bigBuckBunny', e.currentTarget.currentTime)}
/>
)}
/>
<ItineraryItem
id="bigBuckBunny"
start={5}
end={10}
onActivated={() => console.log('active!')}
onDeactivated={() => console.log('inactive!')}
render={active => (
<h1 style={{ color: active ? 'red' : 'dodgerblue' }}>itinerary item</h1>
)}
/>
</div>
</ItineraryProvider>
);
Docs (WIP)
Component | props |
---|---|
ItineraryProvider | n/a |
ItineraryHost | id: string; render: function; |
ItineraryItem | id: string; render?: function; onActivated?: function; onDeactivated?: function; end?: number; start?: number; |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].