VgDASH @Directive

Component to stream with DASH an mpd file.

You can combine VgDashDirective and VgHlsDirective. If you pass a VOD file (that means, not HLS or DASH) it will fallback to the native video implementation.

VgDashDirective is exported as vgDash in case you want to access to it from your template.

In this example currentStream can contain either an mpd, m3u8 or mp4 file.

<vg-player>
    <video #media
           #vgDash="vgDash"
           [vgMedia]="media"
           [vgDash]="currentStream"
           [vgHls]="currentStream"
           id="singleVideo"
           controls
           crossorigin>
    </video>
</vg-player>

This module is dependant of dashjs library and you need to install via npm install dashjs --save and include it on your .angular-cli.json config file:

{
    ...
    "apps": [
        {
            ...
            "scripts": [
                "../node_modules/dashjs/dist/dash.all.min.js"
            ],
            ...
        }
    ],
    ...
}

Inputs

Outputs

HTML Definition

<vg-player>
    <video #myMedia
           [vgDash]="stream.source"
           [vgDRMLicenseServer]="stream.licenseServers"
           [vgDRMToken]="stream.token"
           (onGetBitrates)="dashBitrates = $event"
           id="my-video"
           type="video/mp4"
           controls>
    </video>
</vg-player>

In your component create a stream property

stream = {
    source: 'https://storage.googleapis.com/shaka-demo-assets/angel-one-widevine/dash.mpd',
    licenseServers: {
        'com.widevine.alpha': {
            serverURL: 'https://widevine-proxy.appspot.com/proxy'
        }
    },
    token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
}