ionic 全屏播放视频

ionic 中用 html5 的 video 标签播放视频，但是全屏的时候会黑屏。现在通过旋转手机屏幕和样式调整的方式，来模拟全屏视频播放。

扫码下载App

效果演示

依赖

安装插件

ionic cordova plugin add cordova-plugin-screen-orientationnpm install @ionic-native/screen-orientation复制代码

使用

添加 video 标签

添加样式

.full {  position: absolute !important;  height: 100vh;  z-index: 999;}.original {  position: relative;  height: 50vw;}.video-player {  position: relative;  width: 100%;  top: 0;  left: 0;  background-color: #000;  video {    position: absolute;    left: 0;    right: 0;    z-index: 0;    width: 100%;    height: 100%;    object-fit: cover;  }}.res-btn {  background-color: transparent;}复制代码

编写全屏切换方法

import { Content, Navbar } from 'ionic-angular';import { ScreenOrientation } from '@ionic-native/screen-orientation';import { StatusBar } from '@ionic-native/status-bar';...export class MyPage {  ...  @ViewChild(Content) content: Content;  @ViewChild(Navbar) navbar: Navbar;  // 当前滚动距离  private scrollHeight: number;  isFull = false;  constructor(    private screenOrientation: ScreenOrientation,    private statusBar: StatusBar  ) {}  // 全屏  async full() {    this.scrollHeight = this.content.getContentDimensions().scrollTop;    // 横屏    await this.screenOrientation.lock(      this.screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY    );    // 隐藏状态栏    this.statusBar.hide();    this.isFull = true;    this.content.scrollToTop(0);    // 禁止手势滚动    this.content.setScrollElementStyle('overflowY', 'hidden');    // 隐藏ion-header    this.navbar.setHidden(true);    this.content.resize();  }  // 还原  async restore(): Promise
    
      {    // 切换为竖屏    await this.screenOrientation.lock(      this.screenOrientation.ORIENTATIONS.PORTRAIT_PRIMARY    );    // 显示状态栏    this.statusBar.show();    // 显示ion-header    this.navbar.setHidden(false);    this.isFull = false;    // 恢复手势滚动    this.content.setScrollElementStyle('overflowY', 'scroll');    // 滚动到原来的位置    setTimeout(() => {      this.content.scrollTo(0, this.scrollHeight, 0);    }, 300);    this.content.resize();  }}复制代码