Add [attr.data-src] or data-src for video source

[aruizeac]

Add [attr.data-src] or data-src

What is the current behavior?

Currently, the mat-video module uses src tag, it's fine but it doesn't works properly when you try to lazyload a video. Also, the video doesn't appears on the http requests, just the poster.

What is the expected behavior?

Be able to use either the tags as data-src or [attr.data-src] and the current one src.

What are the steps to reproduce?

I have a home feed using instagram-like cards for every post, and I managed to dynamically load the proper container for every type of post's content (Just one content, multiple content using swiper), here's the snippet: `

<ng-template #swiperEnabled>
    <!-- Swiper -->
    <div mat-card-image class="swiper-container" [swiper]="postSwiper">
        <div class="swiper-wrapper">
            <ng-container mat-card-image *ngFor="let element of post.content" >
                <ng-container *ngIf="element.type != 1; else videoContainer" >
                    <img class="swiper-slide swiper-lazy" [attr.data-src]="element.url" onError="this.src ='assets/img/common/default-user.png'"  >
                </ng-container>
                <ng-template #videoContainer>
                    <mat-video class="swiper-slide swiper-lazy"
                        [autoplay]="false" [preload]="false" [fullscreen]="false" [loop]="true" playsinline=""
                        [quality]="false"
                        [download]="false" color="primary" spinner="spin" [poster]="element.poster">
                        <source matVideoSource [src]="element.url" type="video/mp4">
                    </mat-video>
                    <!-- DEFAULT VIDEO PLAYER
                    <video class="swiper-slide swiper-lazy"
                    muted loop controls playsinline="" preload="none" [poster]="element.poster"
                    [attr.data-src]="element.url" type="video/mp4" onError="this.src ='assets/img/common/default-user.png'">
                    </video>-->
                </ng-template>
                <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
            </ng-container>
        </div>

        <div class="swiper-pagination"></div>
    </div>
</ng-template>

`

What is the use-case or motivation for changing an existing behavior?

Like I wrote above, it would be useful for lazy load purposes, and also the request is not visible.

Using Angular 8+ with latest Material module.