Video Playlist

Add a video playlist to your Ionic app. Learn how we manage videos and media in Ion2FullApp.

So, here’s the thing if you want to integrate video functionalities inside your hybrid app.

About the implementation

The ideal scenario would be native video inside the web-view. Unfortunately, by definition you can’t set a portion of the screen as a native view and the other portion of the screen as a webview. The only way to implement native video in an hybrid app is if you launch the video in fullscreen mode, this way you exit the web-view and enter into a new native view that takes control and plays the video natively in full screen. This is why all the available video cordova plugins only handle fullscreen video.

What does the videoplayer component include?

The idea behind the playlist component in the ion2FullApp ELITE versión was to have control over the UI and the functionality to play/pause and do stuff with the videos. That’s why the only alternative was to use the HTML 5 <video> tag. We are using a great javascript (Videogular) library to handle all the interactions with the HTML 5 video API.

And what about youtube videos?

Youtube videos can be embedded using iframes and access their functionalities using the youtube javascript API. However you won’t be able to have control over the UI of the video player. And in some devices (typically old android phones) the performance of videos inside iframes is slow.

Where are the videos stored?

Some of the videos for this template are stored locally under the assets folder and some others are loaded from the internet. You can see the source of each of them in src/pages/video-playlist/video-playlist.model.ts

Can you use Firebase Storage to store the videos?

Sure! Just upload your video to Firebase storage and put the url of that video in src/pages/video-playlist/video-playlist.model.ts like in the following example. Please note that you are allowed to set more than one url for the same video but with different video type.

let __video_2 = new VideoModel(
    'YOUR VIDEO TITLE',
    'YOUR VIDEO DESCRIPTION',
    'YOUR VIDEO THUMB IMG',
    [
        {
            src: "http://static.videogular.com/assets/videos/videogular.mp4",
            type: "video/mp4"
        },
        {
            src: "http://static.videogular.com/assets/videos/videogular.ogg",
            type: "video/ogg"
        },
        {
            src: "http://static.videogular.com/assets/videos/videogular.webm",
            type: "video/webm"
        }
    ]
);