Skip to content
基于 AVPlayer 封装的全景播放器。
Objective-C GLSL
Branch: master
Clone or download

Latest commit

Latest commit ac7f4fa Mar 22, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
MFPanoramaPlayer 修改定点变换 Mar 14, 2020
MFPanoramaPlayerDemo 添加播放器状态控制,解决后台渲染导致崩溃问题 Feb 1, 2020
image 添加图片 Feb 2, 2020
.gitignore Initial commit Jan 22, 2020
README.md Update README.md Mar 22, 2020

README.md

简介

本项目是基于 AVPlayer 封装的全景播放器,接口简单易用。结合手机的陀螺仪,可以使全景视频在移动端具备更好的浏览体验。

效果预览

假设我们有一个全景视频:

那么,它播放起来的效果是这样的:

它还可以根据手机的倾斜角度自动调节视角。

如何导入

  1. MFPanoramaPlayer 文件夹拷贝到工程中
  2. 引入头文件 #import "MFPanoramaPlayer.h"

如何使用

MFPanoramaPlayer 的使用方式和 AVPlayer 并无太大区别,同样是使用 AVPlayerLayer 来播放。

// playerItem
NSURL *url = [[NSBundle mainBundle] URLForResource:@"sample" withExtension:@"mp4"];
AVURLAsset *asset = [AVURLAsset assetWithURL:url];
MFPanoramaPlayerItem *playerItem = [[MFPanoramaPlayerItem alloc] initWithAsset:asset];
playerItem.motionEnable = YES;
CGFloat renderHeight = playerItem.originRenderSize.height / 2;
CGSize renderSize = CGSizeMake(renderHeight * 4.0 / 3, renderHeight);
playerItem.renderSize = renderSize;

// panoramaPlayer
MFPanoramaPlayer *panoramaPlayer = [[MFPanoramaPlayer alloc] initWithPanoramaPlayerItem:playerItem];
panoramaPlayer.delegate = self;

// playerLayer
AVPlayerLayer *playerLayer = [AVPlayerLayer playerLayerWithPlayer:panoramaPlayer.player];
playerLayer.frame = CGRectMake(0,
                               100,
                               self.view.frame.size.width,
                               self.view.frame.size.width * 3.0 / 4);
[self.view.layer addSublayer:playerLayer];

接口说明

在全景播放器中,所有跟渲染相关的设置选项,都可以在 MFPanoramaPlayerItem.h 中找到。

1、模式切换

@property (nonatomic, assign) BOOL motionEnable;
@property (nonatomic, assign) CGFloat angleX;
@property (nonatomic, assign) CGFloat angleY;

通过 motionEnable 可以设置旋转模式,设置为 YES 时,表示启动陀螺仪,视角可以随设备方向旋转。设置为 NO 时,表示手动调整视角,可以通过 angleXangleY 来调整两个方向的角度。

2、可视范围

@property (nonatomic, assign) CGFloat perspective;

通过 perspective 可以调整可视范围,进行类似 窄角 广角 的调节。

3、渲染尺寸

@property (nonatomic, assign, readonly) CGSize originRenderSize;
@property (nonatomic, assign) CGSize renderSize;

originRenderSize 表示视频资源的原始尺寸,renderSize 表示我们最终期望的渲染尺寸。

更多介绍

使用 OpenGL ES 实现全景播放器

You can’t perform that action at this time.