CODEWITHSUNDEEP
htmlangularazure-media-player
DeadlyDagger
DeadlyDagger

Reputation: 129

Azure media player in Angular 6

I have created a basic setup: added these cdns in index.html

<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>

I read the html from an external file(which I only have access to) and inject it in div inner Html and set up the players that I have on that page:

@Component({
    selector: 'ss-training-page',
    template: '<div [innerHtml]="content"></div>',
    styleUrls: ['./training-page.component.scss']
})

export class TrainingPageComponent implements OnInit {

ngOnInit(): void {
    let loading = this.loadingService.addTask();
    this.route.paramMap
        .take(1)
        .subscribe(params => {
            let page: string = params.get("page") || "";

            if (page) {
                this.trainingService.getPageContent(page)
                    .take(1)
                    .subscribe(res => {
                        this.content = this.sanitizer.bypassSecurityTrustHtml(res);
                        this.setupPlayer();
                        this.loadingService.completeTask(loading);
                    })
            }
            else {
                this.loadingService.completeTask(loading);
            }
        },
            error => {
                this.notificationService.error("Error retrieving training page", error);
                this.loadingService.clearAllTasks();
            })
}


setupPlayer(): void {
        var allVideos = Array.from(document.querySelectorAll("video"))
        allVideos.forEach(v => {
            var player: amp.Player;
            player = amp(v.id);
            player.autoplay(false);
            player.controls(true);

            player.src([{
                src: document.getElementById(v.id).getElementsByTagName("source")[0].src,
                type: "video/mp4"
            }]);
        }) 
    };
}

here is an example of external html file:

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default b">
            <div class="panel-body">
                <span class="pull-right">
                    <button class="btn btn-square btn-primary" href="javascript:alert('This is an issue');"></button>
                </span>
                <div class="row">
                    <h1>This is a Test</h1>
                    <video id="vid1" class="azuremediaplayer amp-default-skin" width="640" height="400">
                        <source src="https://agstqaass.blob.core.net/asset-d7fd6f4e-26a7-453e-8e5e-204becae72a4/EditingABulletin.mp4?sv=2017-04-17" type="video/mp4" />
                    </video>
                </div>
                <div class="row">
                    <h1>This is a Test2</h1>
                    <video id="vid2" class="azuremediaplayer amp-default-skin" width="640" height="400">
                        <source src="https://agstqaass.blob.core.net/asset-d7fd6f4e-26a7-453e-8e5e-204becae72a4/EditingABulletin.mp4?sv=2017-04-17" type="video/mp4" />
                    </video>
                </div>
            </div>
        </div>
    </div>
</div>

this works perfectly when I load the page initially but when I navigate to somewhere else and I open the page again it shows blank black screen in video controls, kindly please help me on this. Thanks!!!

Upvotes: 0

Views: 819

Answers (1)

Bernardo Mondrag&#243;n Brozon
Bernardo Mondrag&#243;n Brozon

Reputation: 153

See this question.

Call player.dispose() on every amp instance when the window is closed or when the component is destroyed.

Upvotes: 2

Related Questions