0

I have an angular application, and i want to display a list of videos which url comes from an Odata service.

The video is not displaying, but the controls for the video are there. It shows only a black background as result. This is the HTML im using.

`

<div *ngFor="let video of videos" class="videos">
    <video class="videos" width="305" controls>
        <source src="{{video.Url1}}" alt="video" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>

`

The service returns the videos Url correctly, but i cant figure out what am i doing wrong. Please help

I attached a sample of how the videos are displayed

Videos sample

JGoytia
  • 41
  • 4
  • did you try `[src]="video.Url1"` ? – John Velasquez Apr 17 '20 at 04:39
  • Your console will be throwing an error. Post that too. – MonkeyScript Apr 17 '20 at 05:46
  • Yes, i have tried [src]="video.Url1" and i get the same result. There are no errors in my console, only a warning that looks like this: "Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=9Q2DOSyt3i0 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details." – JGoytia Apr 17 '20 at 12:33

1 Answers1

1

Assuming that you are getting response like below

videos=[
    {Url1:"anyVideo_1.mp4"},
    {Url2:"anyVideo_2.mp4"}
  ];

modify your html as below:

<div *ngFor="let video of videos; let i = index;" class="videos">
  <video class="videos" width="305" controls>
      <source [src]="video['Url' + (i+1)]" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
</div>

better way to put with expected response is:

videos=[
    {Url:"anyVideo_1.mp4"},
    {Url:"anyVideo_2.mp4"}
  ];

<div *ngFor="let video of videos;" class="videos">
  <video class="videos" width="305" controls>
      <source src="{{video.Url}}" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
</div>

with your sample response as below adding https:// to your link "http://youtube.com/watch?v=9Q2DOSyt3i0", html should should work:

  videos = [
    { IdService: "1922946358", IdVideo: 1525836411, Link1: "http://youtu.be/LlmwfRjkT9c", Link2: "https://youtube.com/watch?v=9Q2DOSyt3i0" }
  ];

modify your html as below:

 <div *ngFor="let video of videos;" class="videos">
  <video class="videos" width="305" controls>
      <source src="{{video.Link1}}" alt="video" type="video/mp4">
      Your browser does not support HTML5 video.
  </video>
  <video class="videos" width="305" controls>
    <source src="{{video.Link2}}" alt="video" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

else you may see below CORB warning on console:

A cookie associated with a cross-site resource at http://youtube.com/ was set without the SameSite attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

for that you need to modify some request headers: Cross-Origin Read Blocking (CORB)

Shoma
  • 479
  • 3
  • 9
  • My response looks like this: [{ IdService: "1922946358", IdVideo: 1525836411, Link1: "https://youtu.be/LlmwfRjkT9c", Link2: "https://www.youtube.com/watch?v=9Q2DOSyt3i0" }] The last solution you gave me, its the same i was using in the beginning, and its not working – JGoytia Apr 17 '20 at 12:41
  • I am wondering why you have src="{{video.Url1}}", video.Url1 with the response you have [{ IdService: "1922946358", IdVideo: 1525836411, Link1: "youtu.be/LlmwfRjkT9c", Link2: "youtube.com/watch?v=9Q2DOSyt3i0" }]. Besides, also i see Link1 and Link2 has url without "http://". with you response i will modify my code, have a look. – Shoma Apr 20 '20 at 03:06