Custom Video Player for Kodular / Other App Inventor

Custom video Player in Kodular

So if you are bored with the default Video Player Component of Kodular and Other App Inventors & Wanna Something New in Video Player. If Yes, Then You are at the right place as here you will be learning how you can create a custom video player in kodular.

Custom Video Player Kodular

Step1: Adding WebViewer

So for creating this video player you have to use a WebViewer component and have to Load some Custom HTML in the WebViewer and Your Video Player Would be ready. Set the Height of the WebViewer to 300px and Width of the Webviewer to Fill Parent in the Properties section of WebViewer.

Step2: Replace Video URL and Thumbnail URL

Now to load your Desired Video You have to Replace the word “VIDEOTHUMBNAILURLTECHYRAKSHAK” to the video’s image to be used as the thumbnail and you have to replace “VIDEOURLTECHYRAKSHAK” to the URL of the video which you want to play in the Video Player. For more clarification you can check out the image below showing how you can use the Replace text blocks for the purpose. You can get the HTML Code below at the end of the post.

Custom HTML Video Player

Step3: Testing the Video Player 

Now you have successfully created a custom video player for your Kodular App but before giving it the finalization and exporting it you may test the app using the kodular companion which is available by kodular on Google Play Store. 

HTML CODE:

Leave a Reply