如何在中间显示带有播放按钮的视频缩略图？答案

【问题标题】：How to display video thumbnail with play button in center?如何在中间显示带有播放按钮的视频缩略图？
【发布时间】：2015-08-06 19:00:04
【问题描述】：

我正在尝试从 ios 中的 url 播放视频。所以基本上我在主视图中添加了一个 MPMoviePlayerController 视图。所以我想要加载视图控制器我应该能够看到带有视频缩略图的 VideoView &正如我们在 YouTube 应用中看到的那样，中间的播放按钮图像。我知道如何获取视频缩略图，但有什么功能可以让我在中间获取播放按钮图像作为缩略图的一部分。

添加VideoView的代码：

    NSURL *fileURL = [NSURL URLWithString:@"http://www.w3schools.com/html/movie.mp4"];
    self.moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL:fileURL];
    CGRect movieFrame;
    movieFrame.size = self.videoView.frame.size;
    [self.moviePlayerController.view setFrame:movieFrame];
    [self.moviePlayerController setControlStyle:MPMovieControlStyleNone];
    [self.moviePlayerController.view setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.videoView addSubview:self.moviePlayerController.view];
    [self.videoView bringSubviewToFront:self.moviePlayerController.view];
    [self.videoView addConstraint:[NSLayoutConstraint constraintWithItem:self.moviePlayerController.view
                                                               attribute:NSLayoutAttributeBottom
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.videoView
                                                               attribute:NSLayoutAttributeBottom
                                                              multiplier:1.0
                                                                constant:0.0]];
    [self.videoView addConstraint:[NSLayoutConstraint constraintWithItem:self.moviePlayerController.view
                                                               attribute:NSLayoutAttributeTrailing
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.videoView
                                                               attribute:NSLayoutAttributeTrailing
                                                              multiplier:1.0
                                                                constant:0.0]];
    [self.videoView addConstraint:[NSLayoutConstraint constraintWithItem:self.moviePlayerController.view
                                                               attribute:NSLayoutAttributeLeading
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.videoView
                                                               attribute:NSLayoutAttributeLeading
                                                              multiplier:1.0
                                                                constant:0.0]];
    [self.videoView addConstraint:[NSLayoutConstraint constraintWithItem:self.moviePlayerController.view
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.videoView
                                                               attribute:NSLayoutAttributeTop
                                                              multiplier:1.0
                                                                constant:0.0]];
    UIImage *thumbnail = [self.moviePlayerController thumbnailImageAtTime:1.0 timeOption:MPMovieTimeOptionNearestKeyFrame];
    [self.moviePlayerController play];

    UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(fullVideoScreen:)];
    singleFingerTap.numberOfTapsRequired = 2;
    [self.moviePlayerController.view addGestureRecognizer:singleFingerTap];

获取缩略图的代码

  NSURL *fileURL = [NSURL URLWithString:@"http://www.w3schools.com/html/movie.mp4"];
    MPMoviePlayerController *mp = [[MPMoviePlayerController alloc]
                                 initWithContentURL:fileURL];
    mp.shouldAutoplay = NO;
    mp.initialPlaybackTime = 0;
    mp.currentPlaybackTime = 05;
    // get the thumbnail
    UIImage *thumbnail = [mp thumbnailImageAtTime:2
                                       timeOption:MPMovieTimeOptionNearestKeyFrame];
    self.videoView.backgroundColor=[UIColor colorWithPatternImage:thumbnail];

【问题讨论】：

标签： ios objective-c iphone ipad video

【解决方案1】：

当您将控件样式设置为 MPMovieControlStyleNone 时，播放器视图将不会显示任何控件 UI。您可能需要根据需要构建自己的控制 UI。希望这有帮助。

【讨论】：

【解决方案2】：

以下代码用于获取视频的缩略图。

NSString *str = [[self.videoArray objectAtIndex:i] valueForKey:@"vName"];
NSURL *videoURL = [NSURL URLWithString:str] ;
MPMoviePlayerController *player = [[[MPMoviePlayerController alloc] initWithContentURL:videoURL]autorelease];
UIImage  *thumbnail = [player thumbnailImageAtTime:0.41 timeOption:MPMovieTimeOptionNearestKeyFrame];
player = nil;

对于播放按钮，您需要在 uiview 上添加自定义。

希望对您有所帮助。

【讨论】：

【解决方案3】：

将视频控制样式设为无：

myPlayer.view.frame = videoView.bounds;
myPlayer.controlStyle = MPMovieControlStyleNone;

现在您可以将 UIButton 添加到视频视图框架的中心并自己控制视频。

[videoControllButton setBackgroundImage:[UIImage imageNamed:@"pauseButton.png"] forState:UIControlStateNormal];
[videoControllButton addTarget:self action:@selector(playPauseClick:) forControlEvents:UIControlEventTouchUpInside];

这是我的旧应用程序的代码，可以解决这个问题：

视频播放器的初始化标签

UITapGestureRecognizer *singleFingerTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(onPlayerTapped:)];
singleFingerTap.numberOfTapsRequired = 1;
singleFingerTap.delegate = self;
[myPlayer.view addGestureRecognizer:singleFingerTap];

并从按钮控制点击：

bool videoIsPlaying = NO;
-(IBAction)playFromIcon:(id)sender{
    videoIsPlaying = TRUE;
    [videoControllButton setBackgroundImage:[UIImage imageNamed:@"pauseButton"] forState:UIControlStateNormal];
    [myPlayer play];
    playIcon.hidden = YES;
}

点击播放器

-(void) onPlayerTapped:(UIGestureRecognizer *)gestureRecognizer {
    if (videoIsPlaying == TRUE) {
         videoIsPlaying = FALSE;
         [videoControllButton setBackgroundImage:[UIImage imageNamed:@"playButton"] forState:UIControlStateNormal];
         [myPlayer pause];
         playIcon.hidden = NO;
    }else{
        videoIsPlaying = TRUE;
        [videoControllButton setBackgroundImage:[UIImage imageNamed:@"pauseButton"] forState:UIControlStateNormal];
        [myPlayer play];
        playIcon.hidden = YES;
    }
}

或点击按钮播放暂停...

-(IBAction)playPauseClick:(id)sender{
    if (videoIsPlaying == TRUE) {
        videoIsPlaying = FALSE;
        [videoControllButton setBackgroundImage:[UIImage imageNamed:@"playButton.png"] forState:UIControlStateNormal];
        [myPlayer pause];
        playIcon.hidden = NO;
    }else{
        videoIsPlaying = TRUE;
        [videoControllButton setBackgroundImage:[UIImage imageNamed:@"pauseButton.png"] forState:UIControlStateNormal];
        [myPlayer play];
        playIcon.hidden = YES;
    }
}

【讨论】：