Azure медиаплеер в Angular 6 - PullRequest
Новая
       50

Azure медиаплеер в Angular 6

0 голосов
/ 22 января 2020

Я создал базовую c установку: добавил эти CDNS в индекс. 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>

Я прочитал html из внешнего файла (к которому у меня есть только доступ) и вставьте его в div inner Html и настройте плееры, которые у меня есть на этой странице: 

@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"
            }]);
        }) 
    };
}

вот пример внешнего html файла: 

<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 отлично работает, когда я сначала загружаю страницу, но когда я перехожу в другое место и снова открываю страницу, в элементах управления видео отображается пустой черный экран, пожалуйста, помогите мне в этом. Спасибо !!!

...