Я унаследовал проект, который нуждается в некоторой незначительной аналитике, более конкретно, видео воспроизводит аналитику.
Это Angular проект, который получает html тело от SQL сервера.
Он анализирует строку и вставляет ее на страницу. Поэтому я не могу добавить дополнительные html, чтобы решить эту проблему, я могу добавить только некоторый код Angular.
Текущая аналитика - это Matomo, я использую ngx-matomo для мониторинга просмотров и посещений.
AFAIK при воспроизведении видео Мне нужно отправить уведомление на сервер, но дело в том, как получить событие при воспроизведении видео?
Мои jQuery привычки сказал бы, что мониторинга событий и ожидания элемента видео будет достаточно, но вот суть, я не могу получить события щелчка по элементам видео.
Я написал этот небольшой фрагмент кода, который имитирует то, что я пытаюсь делать?
//our root app component
import {Component, NgModule, VERSION, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
@Component({
selector: 'my-app',
template: `
<div (click)="anyClick($event)" style="padding: 10px">
<div> not the video </div>
<video width="320" height="240" controls>
<source src="http://download.blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
`,
})
export class App {
anyClick(event: String) {
console.log(event);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App],
bootstrap: [ App ]
})
export class AppModule {
}
Здесь есть PLNKR http://plnkr.co/edit/ALk16AiaHtgqYYrw
Если вы нажмете где-нибудь на странице, вы получите событие на консоли, но то же самое не верно, если вы нажмете на видео, которое является событием, которое мне нужно.
Я могу прикрепить слушателя к событию воспроизведения с помощью тега, подобного этому
ngOnInit(){
let video = document.querySelector('video');
video.onplay = (event) => {
console.log('The Boolean paused property is now false. Either the ' +
'play() method was called or the autoplay attribute was toggled.');
};
}
Если работал на Plunker, но он чувствует неправильно ...
Уточнение проблемы с более подробной информацией:
Файл HTML на самом деле просто
<div [innerHTML]="innerHTML"></div>
Компонент TS имеет значение
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { Product } from 'src/app/entities/product';
import { Version } from 'src/app/entities/version';
import { ProductService } from '../product.service';
@Component({
selector: 'app-content',
templateUrl: './content.component.html',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {
@Input() product: Product;
@Output() load = new EventEmitter<{ title: string, href: string }>();
conteudo$: Observable<Version>;
innerHTML: SafeHtml;
constructor(
private productService: ProductService,
private sanitizer: DomSanitizer
) { }
ngOnInit() {
var pathToLoad;
this.productService.getVersion(pathToLoad).subscribe(version => {
this.innerHTML = this.sanitizer.bypassSecurityTrustHtml(version.conteudo);
const el = document.createElement('html');
el.innerHTML = version.conteudo;
const sections = el.getElementsByTagName('section');
for (let i = 0; i < sections.length; i++) {
const section = sections.item(i);
if (section.hasAttribute('id')) {
this.load.emit({
title: section.getElementsByTagName('h2').item(0).textContent,
href: section.getAttribute('id')
});
}
}
});
}
}