javascript - 如何使用 Angular 7 获取视频元素的播放或点击事件？

问题描述

我继承了一个需要一些小分析的项目，更具体地说，是视频播放分析。

这是一个从 SQL 服务器获取 html 正文的 Angular 项目。

它解析一个字符串并注入一个页面。所以我不能添加额外的 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')
          });
        }
      }
    });
  }

}

标签： javascriptangular

javascript - 如何使用 Angular 7 获取视频元素的播放或点击事件？

问题描述

解决方案

推荐阅读