HarmonyOS鸿蒙Next中web里面的video标签在视频播放的时候点击全屏怎么进行横向全屏

HarmonyOS鸿蒙Next中web里面的video标签在视频播放的时候点击全屏怎么进行横向全屏 web里面的video标签在视频播放的时候点击全屏怎么进行横向全屏

3 回复

可以使用ArkUI的媒体查询接口实现横屏，可以在web的 onFullScreenEnter 和 onFullScreenExit 回调中监听是否点击全屏的按键，在这两个回调里使用媒体查询接口实现视频横向和竖向。

示例代码路径，验证手机横向全屏的时候可用：

import web_webview from '@ohos.web.webview'
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import common from '@ohos.app.ability.common';

@Entry
@Component
struct MediaQueryExample {
  @State color: string = '#DB7093';
  @State text: string = 'Portrait';
  @State portraitFunc:mediaquery.MediaQueryResult|void|null = null;
  handler: FullScreenExitHandler | null = null
  listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) {
    if (mediaQueryResult.matches as boolean) { // 若设备为横屏状态，更改相应的页面布局
      this.color = '#FFD700';
      this.text = 'Landscape';
    } else {
      this.color = '#DB7093';
      this.text = 'Portrait';
    }
  }

  aboutToAppear() {
    // 绑定当前应用实例
    // 绑定回调函数
    this.listener.on('change', (mediaQueryResult:mediaquery.MediaQueryResult) => { this.onPortrait(mediaQueryResult) });
  }

  // 改变设备横竖屏状态函数
  private changeOrientation(isLandscape: boolean) {
    let context:common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
    window.getLastWindow(context).then((lastWindow) => {
      lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT)
    });
  }

  build() {
    Column() {
      Web({ src: $rawfile('t1.html'), controller: this.controller })
        .javaScriptAccess(true)
        .domStorageAccess(true)
        .onFullScreenEnter((event) => {
          console.log("onFullScreenEnter...")
          this.handler = event.handler
          this.changeOrientation(true);
        })
        .onFullScreenExit(() => {
          console.log("onFullScreenExit...")
          if (this.handler) {
            this.handler.exitFullScreen()
            this.changeOrientation(false);
          }
        })
    }
    .width('100%').height('100%')
  }
}

html：

<!DOCTYPE html>
<html>
<head>
<title>浏览器全屏时横屏播放的demo</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<video src="xxxx" autoplay controls></video>
<script type="text/javascript">
var video = document.querySelector('video');

// 进入全屏
function requestFullscreen() {
video.webkitRequestFullscreen();
return 1;
}

// 退出全屏
function exitFullscreen() {
document.webkitExitFullscreen();
return 0;
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
// 进入全屏时，将视频旋转90度-->
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
} else {
// 退出全屏时，将视频旋转回来-->
video.style.transform = 'none';
video.style.width = '100%';
video.style.height = '100%';
}
});

// 监听窗口大小变化事件
window.addEventListener('resize', function() {
if (document.fullscreenElement) {
// 窗口大小变化时，调整视频大小
video.style.width = '100vh';
video.style.height = '100vw';
}
});

// 点击播放按钮时，进入全屏
video.addEventListener('play', function() {
requestFullscreen();
video.style.transform = 'rotate(90deg)';
video.style.width = '100vh';
video.style.height = '100vw';
});

// 点击退出按钮时，退出全屏
video.addEventListener('ended', function() {
exitFullscreen();
});
</script>
</body>
</html>

更多关于HarmonyOS鸿蒙Next中web里面的video标签在视频播放的时候点击全屏怎么进行横向全屏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用<video>标签播放视频时，要实现点击全屏后横向全屏显示，可以通过以下步骤实现：

  1. 设置<video>标签属性：确保<video>标签的controls属性已启用，以便显示默认的播放控件，包括全屏按钮。

  2. 监听全屏事件：使用JavaScript监听全屏事件，当用户点击全屏按钮时，手动调整视频的方向为横向。

  3. 修改CSS样式：在全屏状态下，通过CSS样式强制将视频容器设置为横向布局。

示例代码如下：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
</video>

<script>
  const video = document.getElementById('myVideo');

  video.addEventListener('webkitfullscreenchange', () => {
    if (document.fullscreenElement) {
      video.style.transform = 'rotate(90deg)';
      video.style.width = '100vh';
      video.style.height = '100vw';
    } else {
      video.style.transform = '';
      video.style.width = '';
      video.style.height = '';
    }
  });
</script>

<style>
  video {
    width: 100%;
    height: auto;
  }
</style>

在这个示例中，webkitfullscreenchange事件用于监听全屏状态的变化。当视频进入全屏时，通过CSS的transform属性将视频旋转90度，并调整宽度和高度以适应横向显示。退出全屏时，恢复原始样式。

在HarmonyOS鸿蒙Next中，通过<video>标签播放视频时，若需实现横向全屏，可以通过以下步骤：

  1. 设置video标签属性：确保<video>标签包含controls和playsinline属性，如<video controls playsinline>。

  2. 监听全屏事件：使用JavaScript监听webkitfullscreenchange事件，检测用户是否进入全屏模式。

  3. 旋转屏幕方向：在全屏模式下，通过screen.orientation.lock('landscape')锁定屏幕为横向，实现横向全屏播放。

  4. 恢复默认方向：退出全屏时，使用screen.orientation.unlock()恢复默认屏幕方向。

通过这些步骤，可以在鸿蒙Next中实现视频播放时的横向全屏功能。

回到顶部