Embedded local video file not playing on Android

[Geovanni]

Embedded local video file not playing on Android in release build but fine in debug build when using AppBuilder (Windows Client).

<video id="video" width="320" height="240"  controls>
  <source src="video.mp4" type='video/mp4' />
</video>

This works good for both build types in iOS and Android. EXCEPT when I do an Android release build. When I click the video nothing happens. 
Is there something special in getting local video to play on Android in release mode?

[Tina Stancheva]

Hello Geovanni,

It seems that in Android you cannot use the html5 video tag to run a local file located in the assets directory. Instead the file should either be external (hosted on a remote server) and loaded through http, or it should be saved on the SD card of the device and loaded from there.

Your app works as expected when built in debug mode, as in that case we create a temp folder to store the app files on the SD card/storage of the device as we need to be able to modify them during the live sync operations. This is why in that case the app will not look for the video file in the assets directory, but under the temp directory we created and since the file is available there, you can successfully load it.

However, when the app is build in release mode, all its files are wrapped within the app package and the video file will be available under the assets directory. In that case, the video tag will try to load it from there and will fail. This means that if you want to use the video tag, you would need to
  - either play the file from a remote server over http
  - or dynamically download and save the video file on the SD card of a device by utilizing the FileTransfer Cordova API

Regards,
Tina Stancheva
Telerik

 

 

[Geovanni]

Wow thanks for such a precise answer. Could I also just put my video file in a subdirectory like /video/videofile.mp4 and still use the local file that way?

[Tina Stancheva]

Hi Geovanni,

As long as the file is saved on the SD card of the device, you can place it in as many folders as necessary. For instance, if you have the following file on the SD card of a device: Videos/samples/sample.mp4 you can define such a video tag:

<video id="video" width="320" height="240" controls>
   <source src="/sdcard/Movies/samples/sample.mp4" type='video/mp4'  />
</video>

and you should be able to play the video as expected.

Let me know if you need more information.

Regards,
Tina Stancheva
Telerik

 

 

[Geovanni]

Well I was able to solve my issue by just uploading it to Amazon S3 and serving it http from there. This also dramatically decreased the size of my app as I didnt have to bundle the video file with it. 

But for future reference how do I install something on the users SD card? During installation? Do I simply reference it via the /sdcard/Movies/... path like you mentioned above?

[Tina Stancheva]

Hello Geovanni,

In order to save the image to the SD card, you would have to take advantage of the FileTransfer Cordova API If the image is part of your application bundle, then you would have to first upload it to a server and then download it from there to the SD card of the device.

However, I honestly think that this is an overkill when you have the option to play the video from a remote location.

Regards,
Tina Stancheva
Telerik

 

 

[David Gerding]

Hi,
Is there any chance that playback has gotten more flexible - ie, the ability to play from app storage (part of web app file path) in subsequent builds?  Or is there maybe a media player plugin to use instead?

I need the flexibility of having a small video as part of the installation.

Any hints appreciated.
Thanks,
Dave G

[Tina Stancheva]

Hi Dave,

There are a couple of plugins which you can try. I haven't tested them thoroughly but they seem to allow you to play local files on an Android device:

• Video Player Plugin for Cordova 3.3+ Android
• Cordova Html5Video Plugin

In order to add a custom plugin in AppBuilder you can follow the steps outlined in this tutorial. Let me know if you have any issues or questions I can assist you with.

Regards,
Tina Stancheva
Telerik

 

 

[Aravind]

Hi Tina
 
    I am try to play audio,vedio and swf file in mobile application,i am use html5 tag for playing audio and video file ,i am try to pass remote server file path(http://192.168.0.8/MBServices/images/Obi Wan.mp4) to src in html5 tag,in not work.I am try like this

         <video id="video" width="100%" height="100%" autoplay ="autoplay"  controls>
   <source src ="http://localhost/MBServices/images/Obi Wan.mp4" type="video/mp4" />
</video>

if i copy http://localhost/MBServices/images/Obi Wan.mp4 and paste in browser,can play vedio,so path is correct,but why not play in mobile simulator and mobile device.
pls look this link http://prntscr.com/5cdrt3  it look like player broken

Regards
   Aravind
   

[Tina Stancheva]

Hi Aravind,

The device simulator doesn't support the audio and video audio tags at the moment, which means that you will not be able to run the video in it. However, you should be able to use the video tag to run a remote video on a device.

Since you hosted the video on a localhost, you need to use a public domain name or an IP address to access the video from your device. I would recommend that you try to open the video from a mobile browser on your device before testing the app on the device. If a mobile browser on the device can access and play the video, so should your application.

For your convenience I attached a sample application playing a video tutorial. I hope it will help you move forward.

Regards,
Tina Stancheva
Telerik

 

 

[Aravind]

Hi
  Thank you for ur reply,i download and build ur sample application in Appbuilder for visual studio extension,and install my mobile device,it just blink the player when i click play button in player.

My, phone specification is Sony Ericsson xperia st23i Android version is 4.0.4  and i enable Force GPU rendering form
Setting   - > Developer option,but still not play in mobile device ,why ?

And one thing same vedio tag work in ios and window phone also ?

And in above question i mistype for src,actually i gave ip address only not "localhost" 

   <video id="video" width="100%" height="100%" autoplay ="autoplay"  controls>
   <source src ="http://192.168.0.9/MBServices/images/Obi Wan.mp4" type="video/mp4" />
</video>

If i copy and play above url in mobile browser and system browser,it will play vedio.

Pls reply me asap

Regards
  Aravind

[Aravind]

Hi
  Now it work,i mistype website name,now ok,but followin format all are not play "mp4,ogv,webm,mp3,ogg,wav" in ogv,ogg not play in mobile device,i am give correct src file path,but i use <vedio></vedio> tag for all format,is it correct way,can use mp3 format in vedio tag ?
Note: mp3 file can play in vedio tag,ogv and ogg not play in mobile device.

And one more thing,can't call viedio webpage in mobile device using iframe tag ? like 

<iframe id="docFrame" scrolling="no" frameborder="0"  allowofullscreen="True" style="overflow:hidden;"
    src="http://demos.telerik.com/aspnet-ajax/media-player/examples/overview/defaultcs.aspx"   data-content-height="100%"></iframe>

[Fitness]

I was running my app in debug mode there is a sound that i use for a timer, when i put it on release mode there is no sound. the same with the video, but know i know why.

I wish we can play videos saved on the apk, nook devices don't have wifii all the time.

[Tina Stancheva]

Hi guys,

@Aravind - There are indeed some restrictions to the supported media types on mobile web browsers. This is the reason why in a hybrid mobile app you cannot use the video tag to display all video formats. However, I was able to play an ogg video through the Html5 video tag as long as I did not set the type attribute of the video source:

<video width="427" height="240" preload="metadata" controls="controls">
    <source src="http://sampledomain/myfile.ogg"/>
</video>

As for your second question, you can use iframe elements to display external pages or videos but I wouldn't recommend that particular approach as iframes pose many security issues and are rendered differently throughout the different platforms. If you want to display external web pages, then I would recommend using the InAppBrowser instead.

@Californitraining - We received your ticket describing the issue you are experiencing in your app but we will need more time to examine your application and try to figure out what is going wrong. I will reply within the ticket you submitted with more information. In the meantime, please note that you can download the video files on a device as long as you make sure you download them on a publicly available directory on the Android device. For instance you can use the Cordova File API to save app-specific data files on external storage (take a look at the description of the cordova.file.externalDataDirectory object as it might be helpful). You can also have a look at our File Transfer Sample to see in action the File download API.

Regards,
Tina Stancheva
Telerik

 

 

[Aravind]

Hi Tina 
   Thank you for your reply,i need to call external webpage into mobile application using iframe tag,Because in web page i have to play mp4,ogv,webm,mp3,ogg,wav and swf file,in web page it work fine,i am pass filepath using query string and inside webpage i take file extension form query string and play video,audio and swf file.

For Video and Audio file

 <telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" AutoPlay="true" 
        Height="100%" Width="100%">
    </telerik:RadMediaPlayer>

And for sfw file 

        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
                                    width="200" height="100">
                                    <param name="movie" value="<% =swfFileName%>" />
                                    <param name="quality" value="high" />
                                    <embed src="<% =swfFileName%>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" class="video"
                                        type="application/x-shockwave-flash" width="100%" height="<% =heightv%>"></embed>
                                </object>

The above both tag available in webpage,so directly if i call webpage inside mobile application using iframe then can play mp4,ogv,webm,mp3,ogg,wav and swf  ?


I read inappbrowser form GitHub,can u explain me what are the files(any js script,plugin) need to add in appbuilder for visual studio extension. ? and all are in javascript code.
Below is my mobile application code for showing video
   
<div data-role="view" id="viewerPage" data-title="File" data-show="hiddenViewShow" style ="width :100%; height :100% " >
        <header data-role="header">  
                <div  data-role="navbar">
                    <a  data-role="button" data-click="gotoFileList" data-icon="back" data-align="left"  >back</a>
                    <span data-role="view-title"></span>                    
                </div>
            </header>

        <div class="animClass">
        <iframe id="docFrame" scrolling="no" frameborder="0"  allowofullscreen="True" style="overflow:hidden;"
            data-content-height="100%"></iframe>
            <video id="video" width="100%" height="100%" preload="metadata" autoplay ="autoplay" controls>
   <source    />
</video>
             
            </div> 
Now i need call web page in docFrame iframe tag.

Regards
 Aravind

[Tina Stancheva]

Hello Aravind,

I am not sure whether you will have a good video/audio quality if you use an IFrame to display a web page where a RadMediaPlayer plays a video. Further, as I noted iframes don't bring a very good experience to mobile applications.

Regarding the InAppBrowser plugin, it basically allows you to open external pages in a system browser on the device or within an InAppBrowser instance which is displayed on top of the application and which you can easily close to go back to your application. However, you cannot  use the InAppBrowser to display content from an external web page inline the mobile application (as you would do with an iFrame). You can have a look at our InAppBrowser sample to get started with the plugin.

Having all of the above in mind, I would recommend that you use the Cordova Media plugin to play all audio files in your app. You can take a look at our sample demonstrating how you can utilize the plugin in an AppBuilder project. As for the video files, this forum thread basically describes all options you can utilize a custom plugin or the html5 video tag, which is widely supported across the latest mobile OSs. I believe you might only have a problem displaying flash videos, as they are not supported on iOS at all.

In the AppBuilder extension for VisualStudio you can easily enable and disable core Cordova plugins as described in this tutorial. Both the InAppBroswer and the Media plugins are considered two of the core plugins which allow you to work with the native API of the devices.

Regards,
Tina Stancheva
Telerik

 

 

[Aravind]

Hi Tina
 
   Thank you for your reply,file i can play audio and video files using inappbrowser ,i use following code to call audio and vedio webpages,i am not use iframe.just i call window.open

  window.open("http://" + localStorage.serverip + "/VedioServices/video.aspx?filepath=" + escape(filePath) + "&userid=" + escape(localStorage.userid), "_blank");

And for flash file(.swf),when i copy and paste in mobile device browser can play,but same url call via window.open can't play flash file. why ? 
Open in device browser same as window.open event ? i mean window.open call the mobile device browser ? correct ?
And ogg,ogv can't play inside mobile device when i call using window.open.
mp3,wav,mp4,webem this file can play.

Note: i am use window.open to call external webpage,that webpage contains  mp3,wav,ogg,mp4,webem,ogv and swf files to play when page open,but out of 7 only play 4, ogg,ogv and swf can't play.

Regards
  Aravind

[Zdravko]

Hi Aravind,

I am afraid flash files are not very well supported on mobile devices and I personally couldn't play such on android device neither in the InAppBrowser nor in the system browser.
I tested to open this example without avail.

The case is similar with the various video formats. Each browser has own preferences about the video format it plays. You can find detailed comparison following this link. Different formats depends on specific codecs which makes them hardly supported.
That is why video tag supports multiple resources where to provide different formats and be able to cover the basic browsers.
Here are two more articles on the matter:

• HTML5 VIDEO ON MOBILE—A PRIMER
• Making HTML5 Video work on Android phones

The window.open function opens either InAppBrowser or the system browser. The behavior depends on the target parameter.

Basically, you should have a particular video in a various formats in order to be able to play it on different devices using different browsers and cover all platforms.

Regards,
Zdravko
Telerik

 

 

[Sepehr]

Hey buddies,

 It may not be very related to this topic, but just like me you may following this thread because you need to play an mp4 video using html5 video tag and it's not working even if the mp4 file is hosted on a web server.

 

If so:

 In app properties -> android, turn on hardware acceleration, then build the .apk package and test it stand alone outside of the companion app.

Cheers

 

[SAM]

Hi Tina,

 In our application, we are serving mp4 videos using HTML5 like-


<video controls="" autoplay="" name="media">
<source src="http://testsystems.com/data/20150918_103225_9826/1B_Structure_v1_1.mp4" type="video/mp4">
</video>

mp4 videos are playing well without any issue on Desktop, Laptop, Andriod Tab and iPad using HTTP. 

But when we are trying to play mp4 videos using HTTPS on Andriod Tab (Samsung Galaxy), we are geeting black screen. Although there is no issue on Laptop, Desktop and iPAD. The only issue on Android Tab. 

We are using following HTML5 mark up to play mp4 videos using HTTPS-



<video controls="" autoplay="" name="media">
<source src="https://testsystems.com/data/20150918_103225_9826/1B_Structure_v1_1.mp4" type="video/mp4">
</video>

What could be the problem? Is Android doesn't support mp4 videos using HTTPS?

 

 

Regards,

Samir

[Tina Stancheva]

Hello Samir,

I am not aware of a specific limitation on Android that would stop the app from playing videos over HTTPS when using the video tag. I would only ask you to check whether you have enabled the Hardware Acceleration property for your application. In AppBuilder you can do that through the Android-specific project properties.

I tested this behavior on my side in a sample app and it worked as expected on a Galaxy Note3 running Android 5.0. If you can submit a support ticket I can send you my sample project, where you can also test it on your side. In a support ticket you can also share a project so that I can further investigate this behavior.

Regards,
Tina Stancheva
Telerik

 

 

[Harish]

Hi Tina

       In our application video is played but other video willnot play

this is my html

<div class="modal transparent fullscreen-player">
       <video class="centerme" controls autoplay style="display: inline-block;">

             <source src="videos/test.mp4" type="video/mp4"/>
     </video>     

</div>​

[Tina Stancheva]

Hello Harish,

I am not sure I understand your last comment. Do you mean that the code snippet works for you as long as the video file is available in the application package. I actually tested your code snippet  with both a local video file and a file uploaded on a server and accessed over HTTPS. Both work on my side. This is why I want to ask you to please submit a ticket, where you will be able to attach a project. Having a project, replicating the issue will allow me to investigate the cause for the erroneous behavior further and suggest a solution.

Regards,
Tina Stancheva
Telerik

 

 

[Renaud]

Hi there,

As I spend some time with a similar issue, I feel its worth sharing:

 1. If you want to display video fullscreen: dont use html tag as there is a media plugin for that. If you dont need to play offline: the video src pointing to a web server will work just fine.
 2. If you need to play offline and the video is part of your app package, have a look to    https://github.com/jaeger25/Html5Video (it help to automatically copy the video files in a public location)
 3. If you need to play offline videos dynamically downloaded: (my case)
 - Use fileTransfer plugin
 - Save file in cordova.file.externalDataDirectory as its public
 - In some case you may need to force the file to be public
 -   you can do that by adding 'file.setReadable(true, false);' to FileTransfer.java line 820

Cheers

[Dimitrina]

Hi Renaud,

Thank you so much for sharing your research with the community!

Indeed, using the standard approach for embedding videos is not supported in Cordova hybrid apps and this seems to be a known issue. In addition, I can just add some discussions on the points:
- PhoneGap iOS can't play video using HTML 5, where a solution using Cordova File api is suggested.
- Video Tag Local File Download Cordova Android
- Cordova external app + local video

Regards,
Dimitrina
Telerik

 

 

[Bhupander]

Hi Tina Stancheva,

can you please help me.

<video id="fullvideo_section" autoplay  allowFullScreen mute="true" loop>
                <source src="video.mp4" type="video/mp4" id="vid">
            </video>

i'm using this code for video it's working fine all dive and browser, but it is not working in android phone.please help me , I'm wait your response.

Warm Regards

Bhupander Choudhary

[Sepehr]

Hi Bhupander, In your project's properties, for android, turn on hardware acceleration then it should work after rebuild the apk package. cheer,

[Bhupander]

Hi Sepehr,

i'm not understand your point, can you please explain in details, with the help of screen-short or any thing else. please help.

[Evan]

Hi Tina , I am busy developing a cordova application , with the telerik extension for visual studio. We are struggling to stream video content from our server to the application, is there any plugins available that we can use for video streaming over a network, which is displayed as a video thumbnail on the device. 

[Preslav]

Hi Evan,

I am not aware of such plugin in our verified marketplace.

However, I did some searching and found this plugin on GitHub. I believe that it is worth trying out if it can provide the functionality required by your app.

Additionally, to import the plugin in the app, you will need to download it as a ZIP file from GitHub and then follow the procedure outlined here.

Regards,
Preslav
Telerik by Progress