Search code examples
htmlvideotrackingsubtitle

subtitle does not appear on an html video page

i wrote this html page and i put this video from my computer and i also included English subtitles but when i choose either of the two subtitles it does not appear on the screen. [![

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>RHoodHp</title>
        <meta name="desription" content="this is a movies streaming site">
        <h1>Movies streaming site</h1>
    </head>
    <body>
        <video controls autoplay muted width="800" height="400">
            <source src="matrix cc.mp4" type="video/mp4">
            <track src="matrix.vtt" kind="subtitles" srclang="en" label="English">
            <track src="The Matrix-English.srt" kind="subtitles" srclang="en" label="English 2">
        </video>
    </body>  
</html>

]1]1

enter image description here

enter image description here

enter image description here

Solution

  • You can see in the request headers from your provided screenshot that the Request URL starts with file:///F:/Movie/.... <track> doesn't work with file: but works with http: URLs. That just means you need to spin up an HTTP server to serve your files on http://localhost:8080 (or other port) and access the web page through http://localhost:8080/index.html instead. Only for local development, of course.

    By using localhost URLs, all of them share the same origin (localhost) and the strict-origin-when-cross-origin Referrer Policy will not kick in.