Question

一旦按下按钮，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>

Answer 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();
  }
}

Answer 2

浏览器尚未广泛采用对fullScreen API的支持。因此，虽然您的代码看起来没问题，但在某些情况下它不会像预期的那样表现。

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

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

_

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

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

HTML视频元素全屏

2 个答案: