iOS12界面设计指南之视觉设计(Visual Design)–视频(Video)


Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

Notice: Undefined variable: class_attr in /data/wwwroot/default/wordpress/wp-content/plugins/jquery-image-lazy-loading/jq_img_lazy_load.php on line 57

引自《iOS12界面交互设计规范(iOS 12 Human Interface Guidelines)》

 

系统提供的视频播放器提供两种查看模式:全屏(纵横填充)和适合屏幕(纵横比)。默认情况下,系统根据视频的宽高比选择查看模式,用户可以在播放期间切换模式。有关开发人员指导,请参阅  AVPlayerViewController

  • 全屏(纵横填充)查看模式。视频缩放以填充显示。可能会发生一些边缘裁剪。这是宽视频的默认查看模式(2:1到2.40:1)。有关开发人员指导,请参阅  resizeAspectFill
  • 适合屏幕(纵横)观看模式。整个视频在屏幕上可见。将发生信箱或邮筒。这是标准视频(4:3,16:9,以及最高2:1的任何内容)和超宽视频(任何高于2.40:1)的默认查看模式。有关开发人员指导,请参阅  resizeAspect

iPhone X S上的查看模式示例

确保自定义视频播放器的行为符合预期。 目标是在全屏设备上播放视频内容时默认填充显示。但是,如果填充显示器导致裁剪过多,则应缩放视频以适合屏幕。您还应该允许人们根据个人喜好在全屏和适合屏幕的视图之间切换。有关开发人员指导,请参阅  AVPlayerLayer

iPhone X S上的填充示例

始终以原始宽高比显示视频内容。 当视频内容使用嵌入式信箱或邮箱填充符合特定宽高比时,iOS无法根据用户选择的查看模式正确缩放视频。嵌入在视频帧中的填充可以使视频在全屏模式和适合屏幕模式下显得更小。它还可以防止视频在边缘到边缘的非全屏幕环境中正确显示,例如  iPad上的画中画模式。