Use UIWebView to create a cool video background view (OC & Swift)

Original: Os:make an Awesome Video Background View Using uiwebview (objective-c & Swift)

2015-10-6 Update: Adaptation Swift2.0

Note: Using GIF animated images is only a viable way to achieve this effect, not the only solution. I personally prefer to achieve the video background effect by means of a video player, however, the GIF image is still a viable option. The implementation step jumps directly to the "pre-work preparation" below.

If you've ever used the iOS version of Spotify, you'll notice that in the new version of the app, they used a play video as the app launcher background. This is a pretty cool design relative to the static picture background. If you haven't seen this type of design yet, you can look at the final results I've made:

Just to make you feel funny, I took a slow-shift video of this track on a train from Berlin to Graz.

So I started to recreate a programming practice to achieve the same effect. So the question is: how to achieve it. My first thought was to create a video player and have the video file play repeatedly on the background view. But I also want to put other controls on top of the view, and I don't need the sound of the video.

Then I thought of the GIF file. Now the question is: How to put a GIF into a view. As far as I know, GIF animations are not supported by Uiimageview and UIImage. Although Uiimageview can be implemented by adding multiple images and animations, we really need to capture a large number of images from the video and add all of the images to the project. It's too complicated to prepare for a video job. What else is there to support GIF? The answer is UIWebView.

Pre-work preparation: Working with videos

Prepare a video that you want to play as a background. There are countless software and Web applications that can be used to convert videos to GIF images, and if you want the best results, you'll need to clip them to the iphone's screen size.

There is a very good guide to how to make, and more resources you can get from Google. Here I'm using a software called GIF Brewery. This software also has a very detailed guide page, very simple and easy to get started.

add GIF to the project

Just drag the GIF file to your project's navigation directory as you would any other file.

Start writing code

I will use Objective-c and Swift to show how to achieve this. All the code is written in the viewdidload of the default loaded Viewcontroller.

1. Create a GIF file path to read the GIF file you added.

Objective-c:

NSString *filepath = [[NSBundle Mainbundle] pathforresource:@ "railway" oftype:@ "GIF"]; NSData *gif = [NSData Datawithcontentsoffile:filepath];

Swift:

Let FilePath = Nsbundle.mainbundle (). Pathforresource ("Railway", OfType: "GIF") Let GIF = NSData (contentsoffile:file path!)

2. Create a UIWebView and convert the GIF into the NSData form as its data source. Because it needs to be used as a backdrop, frame size should be set according to the iphone's screen size. Also, UIWebView is similar to ScrollView, and you need to set its Userinteractionenabled property to No. Then add the UIWebView to the main view.

Objective-c:

UIWebView *WEBVIEWBG = [[UIWebView alloc] initWithFrame:self.view.frame]; [Webviewbg loaddata:gif mimetype:@ "Image/gif"