search

videogular / videogular2

The HTML5 video player for Angular 2
https://videogular.github.io/videogular2-showroom/#/
MIT License
672 stars 211 forks source link

player not work if created like the documentation #848

Open martyandreas opened 5 years ago

martyandreas commented 5 years ago

Description

I will play a m3u8 file but its has errors.

Expected Behavior

videos can't be loaded

Actual Behavior

<vg-player>
      <video #myMedia
             vgHls="'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8'"
             vgHlsHeaders="headers"
             (onGetBitrates)="hlsBitrates = $event"
             id="my-video"
             type="video/mp4"
             controls>
      </video>
  </vg-player>

gets the error: https://localhost:44332/'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8' 404

also try without apostrophes' :

<vg-player>
      <video #myMedia
             vgHls="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8"
             vgHlsHeaders="headers"
             (onGetBitrates)="hlsBitrates = $event"
             id="my-video"
             type="video/mp4"
             controls>
      </video>
  </vg-player>

gets the error:

https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8 404 (Not Found)
Access to XMLHttpRequest at 'https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8' from origin 'https://localhost:44332' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Steps to Reproduce

https://videogular.github.io/videogular2/docs/modules/streaming/vg-hls/

cyberluke commented 4 years ago

It's crossorigin policy issue, try:


      <video #myMedia
             vgHls="https://mnmedias.api.telequebec.tv/m3u8/29880.m3u8"
             vgHlsHeaders="headers"
             (onGetBitrates)="hlsBitrates = $event"
             id="my-video"
             type="video/mp4"
             controls
             crossorigin>
      </video>
  </vg-player>