Part 1 – Creating a Video streaming app using WordPress API, Youtube, and Ionic/Native player

In Ionic 3 by semeLeave a Comment

In this tutorial we’re going to show you how to create a video streaming app using Youtube, WordPress, and Ionic 3 Native’s youtube player. I should mention for this tutorial you would need a working online wordpress website with the WP-REST-API plugin enabled.

First things first:

We need to install the following plugins:

So before we begin, we’re going to explain how things work, and how we would implement it.

Right now, the wordpress rest api currently supplies us with a JSON object of our data, but a youtube reference does not come with such a response. To enable this we would need to install a plugin that can add such a reference to our JSON object, and that plugin is the Advanced Custom Fields Plugin for WordPress

Setting ACF Plugin.

For those of you familiar with your wordpress, navigate to your dashboard plugins, and search for the ACF plugin to install.

Next, we’re going to install the ACF to WordPress plugin. This will take whatever data we create with ACF and insert into our wordpress api (JSON) response

Now, to see if our plugin is working, open any endpoint on your api referring to posts. In this example, we’re using /posts/ – open the url below on your wordpress website:

htttp://your-wordpress-url/wp-json/wp/v2/posts

Scroll down and look for a reference starting with "acf" (or just use CTRL+F to find it). If your installation is working you should see an acf reference for every post. Since we haven’t supplied any acf data, it will return false – handy for checks in the future. This is fine, because when we add our youtube ID with ACF this is where it will show for us to consume in our mobile app. If your response isn’t as fancy looking as mine don’t worry I’m using a chrome extension to make this more readable.

 

ACF reference with no data

ACF reference with no data

 

ACF With youtube Reference - When we are done

ACF With youtube Reference – When we are done

Back to ACF

So, navigating back to our WordPress, clicking Custom Fields in our sidebar, we’re going to create our field group. Click the “Add New” button.

a Field group is where we’ll state our fields for use under ACF, in this case, would be a youtube url. We’ll set this to basic text and show this field only where posts are concerned, leaving most of the items by default. See what it looks like:

Don’t forget to hit publish. If done right, we should have our Online Video successfully added

 

So without further ado, go to youtube, open any video, and copy the url from from the share button…

Copy the url from this section. Yes, I’m #purpleNation #Titanfall2 #IniquityRhymes 😀

Now, go to any post, (preferably the latest post that you’ve published), when in editing view you’ll see our created youtube_url field is now available to us on a post-by-post basis.

Paste our Youtube URL, and hit Update.

Now, head to our posts url. Remember to supplement with your own wordpress url:

htttp://your-wordpress-url/wp-json/wp/v2/posts

Now if we refresh our endpoint results and search for ‘acf’, we should now see the youtube url we added to our JSON response, which is great, because we can now move over to the ionic side of things in loading and streaming the video.

This concludes the first part of this tutorial. In the second, we’ll be working from Ionic, pulling data and adding play buttons to launch the native player

Follow us on twitter  or check this post later. Also, I’m writing a book on all I’ve learnt on WordPress and Ionic, so be sure to click and subscribe for updates