安卓设备上，在cordova应用的全屏模式下，竖屏HTML5视频被拉伸了。

Question

安卓设备上，在cordova应用的全屏模式下，竖屏HTML5视频被拉伸了。

4

当我在我的安卓设备上播放一个横向拍摄的视频并进入全屏模式时，设备仍然保持竖屏模式，并且视频被拉伸得非常难看。是否有办法在进入全屏模式时强制视频不要在竖屏模式下拉伸，而是保持横向方向，并在顶部和底部留出黑色边框？

      <video class="media-video" 
  video-directive item="$ctrl.item" 
  ng-src="{{$ctrl.item.videoUrl | trustUrl}}" 
  preload="auto" 
  controls
    poster="{{$ctrl.item.video.thumbnail_url}}">
    Your browser does not support the video tag.
  </video>

- Adam Diament

这篇文章会有所帮助吗？https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/ - Sreehari

Cordova有一个核心插件，允许您设置屏幕的方向。这可能会有所帮助吗？ - Matt Brewerton

谢谢@MattBrewerton - 但不必了。我已经在使用那个插件。我不想设置方向，我想让它保持纵向的同时保持视频比例。 - Adam Diament

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Damien · Accepted Answer

我有一个类似的项目，它在 Android 的 cordova 应用中播放视频，但我的视频在竖屏全屏时不会拉伸： enter image description here

我没有使用任何 codova 插件。这是自然行为。也许你可以通过一些 CSS 强制执行此行为，例如设置属性 height: 100% 或者其他方法。

这是我的视频播放器指令链接：https://github.com/Dammmien/Planete-cine/blob/master/src/js/directives/videoPlayer.js。