Blog

When building an Ionic/AngularJS app with the Appery.io App Builder you can add an HTML component to play back video files.

In this tutorial, you will learn how to do this.

To start, you need to create a new Ionic app.

1. Drag an HTML component to the page and click Edit to modify the code.
2. Add the following to the tag editor:

   <video controls="controls" width="640" height="340" name="Video Name" ></video>

   

   Edited HTML tag

3. Save it and switch to the SCOPE tab.
4. For the init() function, pass the following:

   $scope.makeAction();

5. Now, create a new function and name it makeAction and add the next code, replacing urlToVideo with the URL of the video you need to play:

   var vidURL = "urlToVideo";
   var myVideo = document.getElementsByTagName('video')[0];
   myVideo.src = vidURL;
   myVideo.load();
   myVideo.play();

Below is the example of playing back the video with URL = http://clips.vorwaerts-gmbh.de/VfE_html5.mp4:

Sample video playback with embedded player

Note that some HTML video may be unavailable for playback.