2

in my angular project i am trying to create a movie streaming site where i want to display movie as well as subtitles. i can play the video well but i am not able to load the subtitles .

i know this question might have been asked previously but wasn't useful in my case

here is my relevant html code

<video
      class="video"
      id="myVideo"
      autoplay
      #videoPlayer
    >
     <source
        src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/Dunkirk.2017.1080p.BluRay.x264-[YTS.AG].mp4"
        type="video/mp4"
      /> 
      
      <track
        label="English"
        kind="subtitles"
        srclang="en"
        src="http://binzwatchftp.ddns.net/Hollywood/Others/Dunkirk%20(2017)/dunkirk_subtitle.vtt"
        default
      />

it gives me this error

enter image description here

can you please help me with this problem?

though it loads when i include the .vtt subtitle file in my project folder statically . But i want it to be fetched from online url

shubham sharma
  • 41
  • 5

2 Answers2

0

You are suffering from a CORS issue. This post will get you closer:

How to enable CORS for html5 video loading vtt file?

but you'll also have to loosen the crossorigin policy on the remote server (I got a second error that the server is not allowed to serve Localhost)/

Doug Sillars
  • 1,625
  • 5
  • 7
-1

you can use read link to show show subtitles https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

Tien Nguyen Van
  • 17
  • 2