CODEWITHSUNDEEP
htmlangularvideoodata
JGoytia
JGoytia

Reputation: 51

How to play videos in an Angular application? My code is not working

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

Upvotes: 0

Views: 1446

Answers (1)

Shoma
Shoma

Reputation: 499

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)

Upvotes: 1

Related Questions