How do you display mp4 video containing chapters via asp.net web application project?

Hello David Anderson ,

I see you've set up the VTT chapters file correctly. However, browsers don't display chapters automatically, so you'll need to add some JavaScript to create the visible navigation.

Fix your HTML first:

<video controls width="1920" height="1080">
<source src="Recordings/Short sample.mp4" type="video/mp4">
<track kind="chapters" src="MyChaptersVTT.vtt" srclang="en" default>
</video>

JavaScript sample for visible chapter navigation:

const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
    const track = video.textTracks[0];
    track.cues.forEach(cue => {
        const button = document.createElement('button');
        button.textContent = cue.text;
        button.onclick = () => video.currentTime = cue.startTime;
        document.body.appendChild(button);
    });
});

This is just sample code to demonstrate the concept. You'll need to add proper error handling and CSS styling for production use. The VTT provides the data, but you must build the entire UI yourself since browsers don't show chapter markers by default.

Hope this helps!

See docs on controlling video with JavaScript. You are interested in tracks support

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/video

Yes, it’s possible to display and use chapters in videos online, but it depends on how the chapters are stored and how you’re serving the video.

When you play the file locally in VLC or JRiver, those apps are reading the chapter metadata that’s embedded inside the MP4 container. Unfortunately, most browsers and HTML5 <video> players don’t natively recognize MP4 chapter metadata. The chapter info isn’t exposed through the browser’s media API, so you won’t see them automatically on a web page.

To make chapters work in a web environment, you have a couple of options:

Create a separate “chapters” (VTT) file You can export or manually create a WebVTT file that defines chapter start times and titles. For example:

WEBVTT

00:00:00.000 --> 00:03:30.000
Introduction

00:03:30.000 --> 00:10:00.000
Main Topic

00:10:00.000 --> 00:15:45.000
Summary

Then include it in your HTML:

<video id="myVideo" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="chapters.vtt" kind="chapters" label="Chapters" default>
</video>

Most browsers don’t show a chapter menu by default, but you can read these tracks through JavaScript and build your own chapter list or navigation buttons.

Use a JavaScript player that supports chapters Players like Video.js, Plyr, or JW Player can parse WebVTT chapter files and display them in a nice interface. You’d just need to add the plugin or configuration that enables chapters.

ASP.NET side Your ASP.NET page can simply host the HTML/JavaScript player. You don’t need special server-side code for this unless you want to dynamically generate the chapter data.

So in short, browsers don’t use the embedded MP4 chapters directly — you’ll need to provide them separately (as WebVTT) or use a player that can read them.

After a lot more Google searches, I found the answer to my problem. It did indeed require mime mapping, which was done by adding the following code to the configuration section of the ASP.NET web.config file.

	<system.webServer>
		<staticContent>
			<remove fileExtension=".vtt" />
			<mimeMap fileExtension=".vtt" mimeType="text/vtt" />
		</staticContent>
	</system.webServer>