视频 html 使用通用 SSR 播放 angular2+ 指令

Question

我目前正在尝试实施 Angular 指令，该指令会自动静音和播放 HTML5 视频标签。

我是运行这段代码在Angular10.我测试的所有浏览器都出现这个错误

这是我的代码。

<video appVideoAutoplayMuted [autoplay]="true" preload="metadata" playsinline [controls]="false" [loop]="true" [muted]="true"
       poster="../../../assets/video-mask-spot.png">
  <source src="../../../assets/neon-smash-gameplay-trailer.mp4#t=0.5"
          type="video/mp4">
  <source src="../../../assets/neon-smash-gameplay-trailer.webm#t=0.5"
          type="video/webm">
  <source src="../../../assets/neon-smash-gameplay-trailer.ogv#t=0.5"
          type="video/ogg">
  Your browser does not support the video tag.
</video>

指令组件看起来像

import { Directive, ElementRef, OnInit} from '@angular/core';

@Directive({
  selector: '[appVideoAutoplayMuted]'
})
export class VideoAutoplayMutedDirective implements OnInit {

  constructor(public videoElement: ElementRef) {
  }

  ngOnInit(): void {
    const video: HTMLVideoElement = this.videoElement.nativeElement;
    video.muted = true;
    video.play(); // play is not a function exception
  }
}

当代码到达 video.play(); 行时它崩溃并给出下一个错误。

错误类型错误：video.play 不是函数

我调试了代码，video const不为null，他的类型是HTMLVideoElement。

Intellisense 也在工作。我在 mdn 中发现该函数存在。

Answer 1

我找到了解决方案。问题是代码是在 server-side 上调用的，因为我使用的是 Angular Universal。我不知道为什么，但似乎当 HTMLVideoElement 在服务器中时没有 play()、load() 和其他方法。我认为这个方法是由浏览器实现的。

我通过运行指令中的 if 语句解决了检查代码在哪里的问题。

import {Directive, ElementRef, Inject, OnInit, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from '@angular/common';

@Directive({
  selector: '[appVideoAutoplayMuted]'
})
export class VideoAutoplayMutedDirective implements OnInit {

  constructor(public videoElement: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {
  }

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) { // here is the check 
      const video: HTMLVideoElement = this.videoElement.nativeElement;
      video.muted = true;
      video.play();
    }
  }
}

请随意扩展此答案，以便我们更好地了解正在发生的事情。

视频 html 使用通用 SSR 播放 angular2+ 指令

Video html play with angular2+ directive using Universal SSR

html

html5-video

typescript

angular-directive

angular