HTML 视频元素全屏答案

【问题标题】：HTML Video element FullscreenHTML 视频元素全屏
【发布时间】：2017-11-09 14:26:18
【问题描述】：

Angular 2 中有没有一种方法可以在按下按钮后使视频全屏显示？

这是我目前尝试的功能。（请注意，暂停和播放效果很好。）

fullscreen(video){
        video.requestFullscreen();
    }

HTML 代码

<video #video autoplay>
  <source src="assets/videos/mov_bbb.mp4" type="video/mp4">
   <img alt = "Test image" src="/assets/images/example.png" title="Your browser does not support the <video> tag">
   </video>
<button (click)="fullscreen(video);"> Fullscreen </button>

【问题讨论】：

Html5 Full screen video的可能重复
this topic 的可能重复项。您只需要使用 ViewChild 使解决方案适应 Angular。你知道怎么做吗？
我没有，可悲的是我对 Angular 很陌生
那我现在就给你答复

标签： html angular video html5-video

【解决方案1】：

按照我的评论，您可以做的事情（并按照already answered topic）是这样的

@ViewChild('video') video: ElementRef;

toFullScreen() {
  let elem = this.video.nativeElement as HTMLVideoElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
}

【讨论】：

我应该把@ViewChild('video') video: ElementRef; 放在哪里？还有 mozRequestFullScreen();给出一个错误
你把它放在你的类的构造函数之前，在那里你定义你的变量。对于错误，您将不得不处理它，或者在您的帖子中发布堆栈跟踪，以便我可以提供帮助！

【解决方案2】：

浏览器尚未广泛采用对 fullScreen API 的支持。因此，尽管您的代码看起来不错，但在某些情况下它的行为并不符合预期。

如果此功能对您的应用很重要，我建议使用 Mozilla 推荐的 FScreen polyfill。

NPM 安装屏幕
将其导入您的组件中
修改您的fullScreen() 方法以使用它：

fullscreen(video){
  if(fscreen.fullscreenEnabled) {
      fscreen.requestFullscreen(video);
  } else {console.error('fullscreen is not supported');}
}

如果您不想引入第 3 方依赖项，则可能需要使用浏览器期望的各种前缀。 See the docs 或改编@trichetriche 的回答

【讨论】：