从 Angular 2 Typescript 播放 HTML 5 视频

Posted

技术标签:

【中文标题】从 Angular 2 Typescript 播放 HTML 5 视频【英文标题】:Playing HTML 5 video from Angular 2 Typescript 【发布时间】:2017-03-14 14:21:35 【问题描述】:

当用户单击视频区域本身时,我想以编程方式从 TypeScript 开始播放 html 视频。

这是我的 HTML 代码:

<div class="video">
<video controls (click)="toggleVideo()" id="videoPlayer">
    <source src="videoSource" type="video/mp4" />
    Browser not supported
</video>
</div>

这是我的 TypeScript 代码:

@ViewChild('videoPlayer') videoplayer: any;

toggleVideo(event: any) 
    this.videoplayer.play();

问题是我收到一条错误消息,指出 play() 函数未定义/不存在。这里可能是什么错误?

【问题讨论】:

【参考方案1】:

问题是您正在尝试使用 video 元素的 id 引用它。您需要改用模板引用变量 (#):

<div class="video">
    <video controls (click)="toggleVideo()" #videoPlayer>
        <source src="videoSource" type="video/mp4" />
        Browser not supported
    </video>
</div>

详细了解模板引用变量here。

编辑:

另外,在您的toggleVideo(event: any) 函数中,您需要获取nativeElement 然后调用play() 函数,因为您正在直接访问DOM 元素:

@ViewChild('videoPlayer') videoplayer: ElementRef;

toggleVideo(event: any) 
    this.videoplayer.nativeElement.play();

感谢@peeskillet 这个。

【讨论】:

感谢您的回复!我仍然收到一个异常,显示为this.videoplayer.play is not a function @Rai 你确定videoplay 功能吗? 我认为你需要从 elementRef 中获取原生元素。视频是标准的html。见mdn 认为这可能对这篇文章的其他人有所帮助...在 toggleVideo 功能内切换暂停和播放:this.videoplayer.nativeElement.paused ? this.videoplayer.nativeElement.play() : this.videoplayer.nativeElement.pause(); Chrome 已更改自动播放政策,developers.google.com/web/updates/2017/09/…。要在 chrome 中工作,请在播放前将视频静音。【参考方案2】:

其他人已经回答了基本问题(您必须使用nativeElement)。但是,由于nativeElementany 类型,您应该将其“转换”为更具体的元素类型(对于&lt;video&gt; 标记,这是HTMLVideoElement)。

 const video: HTMLVideoElement = this.videoElement.nativeElement;
 video.play();

这将为您提供所有支持的方法和属性的智能感知。

当然,这只是编译时间——你没有转换任何东西,如果元素不是真正的视频,你仍然会收到错误。

【讨论】:

感谢您指出正确的类型。重要的是要注意 HTMLVideoElement 是视频标签的 ElementRef.nativeElement 的类型。【参考方案3】:

这是将videoPlayer 变量设置为使用HTMLVideoElement 以实现类型安全的另一种方法

videoPlayer: HTMLVideoElement;

@ViewChild('videoPlayer')
  set mainVideoEl(el: ElementRef) 
    this.videoPlayer = el.nativeElement;
  

toggleVideo(event: any) 
    this.videoplayer.play();

【讨论】:

【参考方案4】:

这是我的 HTML 代码:

  <video controls class="video" (play)="video()" autoplay #videoPlayer>
    <source src="assets/video/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

这是我的 TS 代码:

  @ViewChild('videoPlayer') videoplayer: ElementRef;

  video() 
    console.log('im Play!');
    this.videoplayer?.nativeElement.play();
  

【讨论】:

【参考方案5】:

我就是这样做的:

<video (click)="playVideo($event)">
  <source src="video.mp4" type="video/mp4">
</video>

TS

playVideo(event) 
   event.toElement.play()

【讨论】:

请考虑添加解释为什么这样有效。请记住,您的答案不仅仅是针对最初的问题(现在已经超过 3 年了),而是针对有同样问题的未来读者。 如果你使用 console.log($event) 你会看到 toElement 是被点击的元素,它是 所以这确实有效,但暂停视频似乎不起作用

以上是关于从 Angular 2 Typescript 播放 HTML 5 视频的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 从 Jquery 调用 Typescript 函数会导致未捕获的 TypeError

使用 Visual Studio Code 调试和运行 Angular 2 Typescript?

Angular2-Webpack-Typescript - 3rd 方库

使用 Typescript 从 Angular 6 的在线链接中显示 Pdf

Angular 2、TypeScript 和 ui-router - 如何获取状态参数

如何在 Angular 的 Typescript 中使用数组