Embedded local video file not playing on Android

28 posts, 0 answers
  1. Geovanni
    Geovanni avatar
    12 posts
    Member since:
    Apr 2013

    Posted 07 Aug 2014 Link to this post

    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?
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 11 Aug 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Geovanni
    Geovanni avatar
    12 posts
    Member since:
    Apr 2013

    Posted 11 Aug 2014 Link to this post

    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?
  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Aug 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Geovanni
    Geovanni avatar
    12 posts
    Member since:
    Apr 2013

    Posted 12 Aug 2014 in reply to Tina Stancheva Link to this post

    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?
  6. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 15 Aug 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  7. David Gerding
    David Gerding avatar
    44 posts
    Member since:
    Sep 2005

    Posted 19 Nov 2014 Link to this post

    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
  8. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Nov 2014 Link to this post

    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: 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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  9. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 02 Dec 2014 in reply to Tina Stancheva Link to this post

    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
       
  10. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 03 Dec 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  11. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 04 Dec 2014 in reply to Tina Stancheva Link to this post

    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
  12. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 04 Dec 2014 in reply to Aravind Link to this post

    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>




  13. Fitness
    Fitness avatar
    1 posts
    Member since:
    Nov 2014

    Posted 05 Dec 2014 Link to this post

    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.
  14. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Dec 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  15. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 09 Dec 2014 in reply to Tina Stancheva Link to this post

    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


  16. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Dec 2014 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  17. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 15 Dec 2014 in reply to Tina Stancheva Link to this post

    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


  18. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 15 Dec 2014 Link to this post

    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:
    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  19. Sepehr
    Sepehr avatar
    14 posts
    Member since:
    Oct 2014

    Posted 03 Aug 2015 Link to this post

    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

     

  20. SAM
    SAM avatar
    10 posts
    Member since:
    Oct 2006

    Posted 02 Nov 2015 in reply to Tina Stancheva Link to this post

    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

  21. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Nov 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  22. Harish
    Harish avatar
    1 posts
    Member since:
    Nov 2015

    Posted 13 Nov 2015 in reply to Tina Stancheva Link to this post

    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>​

  23. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 18 Nov 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  24. Renaud
    Renaud avatar
    1 posts
    Member since:
    Mar 2016

    Posted 11 Mar 2016 in reply to Tina Stancheva Link to this post

    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
  25. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 15 Mar 2016 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  26. Bhupander
    Bhupander avatar
    2 posts
    Member since:
    Jun 2016

    Posted 07 Jun 2016 in reply to Tina Stancheva Link to this post

    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

  27. Sepehr
    Sepehr avatar
    14 posts
    Member since:
    Oct 2014

    Posted 07 Jun 2016 Link to this post

    Hi Bhupander, In your project's properties, for android, turn on hardware acceleration then it should work after rebuild the apk package. cheer,
  28. Bhupander
    Bhupander avatar
    2 posts
    Member since:
    Jun 2016

    Posted 08 Jun 2016 in reply to Sepehr Link to this post

    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.

Back to Top