Introduction to Google Cardboard for iOS

Video View Interaction

You still have to implement the video view interaction which will let you pause and play the “Living with Elephants” video by Photos of Africa so that each moment of your vacation can last even longer.

Back in the main VacationViewController class, add the following new variable underneath the var currentDisplayMode declaration:

var isPaused = true

There is no property inherent to the GVRVideoView that indicates whether the video is paused or playing, so the variable you’ve just created can serve as a state marker.

Also create a method to set the initial play state behavior dependent on the display mode. Underneath viewDidLoad() add:

func refreshVideoPlayStatus() {
  // 1
  if currentView == videoVRView && currentDisplayMode != GVRWidgetDisplayMode.embedded {
    videoVRView?.resume()
    isPaused = false
  } 
  // 2
  else {
    videoVRView?.pause()
    isPaused = true
  }
}

1. If videoVRView is in fullscreen or VR mode, calling this method plays the video and appropriately sets isPaused to false.
2. Otherwise, if the videoVRView‘s display mode is in its embedded state or the imageVRView is in fullscreen, calling this method pauses the video and appropriately sets isPaused to true.

Then within widgetView(_:didLoadContent:)‘s else if block, add:

refreshVideoPlayStatus()

This pauses the video as soon as it loads.

Now in widgetView(_:didChange:), just before the if block and after setting currentDisplayMode, insert the following:

refreshVideoPlayStatus()

By calling refreshVideoPlayStatus() whenever the display mode changes, the video will play when entering fullscreen or VR mode, and pause otherwise.

Now that you’ve set videoVRView‘s initial display mode behaviors, you can implement a play/pause toggle triggered by user interaction. In widgetViewDidTap(_:), after the if block, add:

else {
  if isPaused {
    videoVRView?.resume()
  } else {
    videoVRView?.pause()
  }
  isPaused = !isPaused
}

You hit this else clause when you tap a videoVRView. If the video is paused, resume playing; if the video is playing, pause it. Then you update isPaused to reflect the new play state.

Build and run your app, open the video into fullscreen or VR mode, then tap the screen or widget button and the video should toggle between play and pause states:

Play/pause while watching the video by Photos of Africa

Play/pause while watching the video by Photos of Africa

You don’t want your vacation to stop after a few minutes though, do you? Of course not! So therefore you’ll loop the video to the beginning once it reaches the end.

Add a GVRVideoViewDelegate extension below the final bracket of the GVRWidgetViewDelegate extension to implement the looping behavior:

extension VacationViewController: GVRVideoViewDelegate {
  func videoView(_ videoView: GVRVideoView!, didUpdatePosition position: TimeInterval) {
    if position >= videoView.duration() {
      videoView.seekTo(0)
      videoView.resume()
    }
  }
}

videoView(_:didUpdatePosition:) is called at approximately one-second intervals as the video plays. Once the NSTimeInterval position of the video is greater than or equal to the duration of the video, the video has reached its end. videoView.seekTo(0) then sets the position back to the beginning before resuming the video.

Note: There is no need to set VacationViewController as the GVRVideoViewDelegate because…it’s already set! GVRVideoViewDelegate inherits from GVRWidgetViewDelegate, which you’ve already adopted and set up in viewDidLoad() of VacationViewController.

There you have it! Now you can build, run, sit back and enjoy the worldwide vacation you’ve just created with your bare hands. Isn’t iOS development spectacular?

Where to Go From Here?

Download the finished project here, and check out Google’s sample projects here.

The Google Cardboard mobile SDK had originally only been available for Android devices until Google graciously opened up its Cardboard SDK to iOS earlier this year. Google VR for iOS is still very new and will evolve over time, so keep an eye on raywenderlich.com for Google Cardboard VR tutorials using the enthralling new features Google will undoubtedly roll out in the near future.

Have comments or questions? Please join the forum discussion below!