In yesterday’s post I described the project I want to build: HyperVideo. This morning I created a new Blazor application and the first thing I did was to open CoPilot and give it a prompt. Specifically, I asked it to build what I described yesterday.
Create an application with a rectangle in which a video is playing (typically news or an instructional video, but it can be anything). Next to the video is a transcript. Under the video are a few buttons. One pauses the video and lets you inquire about something that was just said (or anything that comes to mind for that matter). The video player now takes you to Wikipedia, Wiktionary and any other public source that might best answer your question. It may even begin a related video. A second button resumes the video. There is a button to jump back 15 seconds and another to jump ahead 30 seconds.
CoPilot went to work. Literally five minutes later I had the skeleton of a working program
With that in place, I have a framework to add the AI features. In fact, CoPilot even prompted me on which features I need. Here’s what CoPilot says it implemented:
What I’ve Created:
Optional: Add Azure OpenAI for intelligent Q&A response
VideoLearning.razor – Main component with
• HTML5 video player with all requested controls
• Interactive transcript with timestamp navigation
• Pause & Inquire feature with multi-source search
• Jump back 15s and forward 30s buttons
• Resume functionalityVideoLearning.razor.css – Comprehensive styling with:
• Responsive grid layout
• Professional card designs
• Smooth animations
• Mobile-friendly design
• Scroll customizationNavMenu.razor snippet – Navigation integration
README-VideoLearning.md – Complete setup and usage guide
Next Steps:Add your video: Place a video file in wwwroot/videos/sample-video.mp4
Customize transcript: Replace sample data with your actual transcript
Optional: Integrate with Wikipedia/YouTube APIs for richer search results
