How to show audio and video web page in mobile application ?

12 posts, 0 answers
  1. Aravind
    Aravind avatar
    15 posts
    Member since:
    Oct 2014

    Posted 27 Nov 2014 Link to this post

    Hi
      We develop mobile application with kendo,if click link form mobile application i will open webpage that deployed in server,it work fine for ordinary  file viewer,same like i develop webpage that play audio or video file when page open,it work in browser ,but same page call form mobile application,it not play audio and video files when page open,but in develop time in mobile simulator it play all files,why when install application in mobile device it not work,but in mobile simulator in AppBuilder windows client it work.

    In web page i use Telerik Radmedia player that support mp4,ogv,webm,mp3,ogg,wav,if open page in system browser it work,but same page call inside mobile application it not work.

    Or help me how to play mp4,ogv,webm,mp3,ogg,wav this file in mobile applicatoin ? which tag need to use in mobile html page and how to pass file name

    Pls reply me asap

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

    Posted 30 Nov 2014 in reply to Aravind Link to this post

    Hi
     i am call audio and video web page inside iframe in mobile application,if i run web page in browser html 5 audio and video work file,but when i call web page inside mobile application using iframe only play mp3 and wave files using html tag.

    This is my iframe tag in mobile application
      <div class="animClass">
    <iframe id="docFrame" scrolling="no" frameborder="0"  allowofullscreen="True" style="overflow:hidden;"
                data-content-height="100%"></iframe>
    </div>
    Below i pass file name to webpage and src pass to above iframe tag(docFrame)

      if ((filePath.indexOf('.mp4') > -1) || (filePath.indexOf('.ogv') > -1) || (filePath.indexOf('.webm') > -1) || (filePath.indexOf('.mp3') > -1) || (filePath.indexOf('.ogg') > -1) || (filePath.indexOf('.wav') > -1)) {
                    
                    $("#docFrame").attr("src", "http://" + localStorage.serverip + "/webmobile/video.aspx?filepath=" + escape(filePath) + "&userid=" + escape(localStorage.userid))
                } else if (filePath.indexOf('.swf') > -1) {
                    
                    $("#docFrame").attr("src", "http://" + localStorage.serverip + "/webmobile/jwplayer.aspx?filepath=" + escape(filePath) + "&userid=" + escape(localStorage.userid))
                }
                else {

                    $("#docFrame").attr("src", "http://" + localStorage.serverip + "/webmobile/viewerflx.aspx?filepath=" + escape(filePath) + "&userid=" + escape(localStorage.userid))
                }


    In above i will check 3 conditions, 
    First condition for audio and video file which support html 5 (same as Radmedia player UI for ASP.NET AJAX ),video.asp page contain 
     <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadMediaPlayer ID="RadMediaPlayer1" runat="server" AutoPlay="true" 
            Height="100%" Width="100%">
        </telerik:RadMediaPlayer>

    Second condition for play flash file , jwplayer.aspx page contain
           <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>

    Third condition for view file using viewer,it work fine,no problem in this page.

    But 1 and 2 condition ,file not play in mobile device after install in mobile,but in simulator all html file play successfully,including flash file.
    webmobile is website root folder that deploy in one server,it contains video.aspx,jwplayer.aspx and viewerflx.aspx,if i run video and jwplayer directly in browser,audio and video file work fine,but same page call inside mobile application using iframe it not work .
    I already enable "Force GPU rendring option in mobile device" and also i gave in css for div tag that contain docFrame (iframe tag)
    <style>
                .animClass {
        -webkit-transform: translate3d(0, 0, 0);
    }
        </style>

    Pls reply me,how to play html 5 audio and video file in mobile applicaition,which tag need to use for audio and video file,i already tyr html 5 audio and video tag like following ways,but not work
    <video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      </video>

    Pls reply me asap


    Regards
     Aravind


  3. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 01 Dec 2014 Link to this post

    Hi Aravind,

    The problem may be related to the device that you are trying to run your audio and video files on. Check what are the supported media formats for iOS and Android and see if your files are compatible:

    iOS Media Layer
    Android Supported Media Formats

    As for the AppBuilder simulator, its main usage is for debugging your code and preview of the UI, but in order to test an app's functionality, you should not rely on the simulator but only on physical devices testing.

    Regards,
    Tsvetina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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

    Posted 01 Dec 2014 in reply to Tsvetina Link to this post

    Hi
      Thank you for your reply,i search in both link that above mention,i found most of the format form this mp4,ogv,webm,mp3,ogg,wav, can support in ios and android,but in my mobile device it not play file,player looks like broken.
    In above passing file form is correct one ? in pass remote location file to audio and video source,then why in not play in mobile device ?

    And i try html 5 tag in mobile application like this ,
            <video id="video" width="100%" height="100%" controls>
       <source src ="http://192.168.0.8/webmobile/video/odi.mp4" type="video/mp4" />
    </video>

    This is also not work.
    Pls reply me how to play audio and vedio file in ios,android and window phone,what tag need to use and how to pass file to src.Can pass remote location file in http ? above i mention.

    Regards
      Aravind
  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 04 Dec 2014 Link to this post

    Hi Aravind,

    I created a test app where I open the ASP.NET AJAX RadMediaPlayer demos in the in-app browsers and the videos played on my side. 

    Can you confirm that the address you specify is accessible from the mobile device? Also, your files might be of too high quality or resolution. I tested the sample video from the following link in the app, attached to this message and as you can see, they work as expected when using the video tag:
    Sample WebM, Ogg, and MP4 Video Files for HTML5

    Regards,
    Tsvetina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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

    Posted 07 Dec 2014 in reply to Tsvetina Link to this post

    Thank you for your reply,what about audio files like mp3,ogg and wav ?
    And i try ur sample application,in that i modified,each file play in each page,only webm and mp4 file playing in mobile device,other two file not playing in mobile device,simply it appear play button,if i clikc play button nothing happen,here in attach that sample application pls verify it reply me and also need to play swf file in mobile application which support  android,ios and window phone,

    Pls download form dropbox link https://www.dropbox.com/s/c2719nhfxhfy6k4/vediosamplemobile.rar?dl=0

    Regards
      Aravind
  7. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 09 Dec 2014 Link to this post

    Hi Aravind,

    I made the sample to show that the HTML media tag works as expected and as long as the videos/audios are supported they would play. Some of the formats aren't supported by the OS, e.g. 3gp on iOS, so they would not play.

    If you do not get the video or audio playing using a properly declared media tag, then there is a problem with the format under the current operating system and you would need to convert it to a supported format - one listed both in the Android and iOS supported media formats.

    As previously mentioned, note that not only the file format is important but also the quality, encoding. resolution, etc. of the media files. Make sure that you cover the specific requirements listed in the two links I initially posted.

    Regards,
    Tsvetina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Niro
    Niro avatar
    8 posts
    Member since:
    Aug 2014

    Posted 12 Dec 2014 in reply to Tsvetina Link to this post

    Hi Tsvetina,

    i am trying to get html video tags working as well, I used the sample Tabstrip demo similar to the one you have attached and added the same video tags into the home view. When i build this for Android and run it on a real device the video player shows the controls with a white background for where the video should be. Pressing play plays the audio but no video is shown. Going into full screen does show the video on android.

    See my app VideoTest1

    Do you get the same issues ? is this a Andoid cordova issue or something else ?

    Cheers
    Niro
  9. Niro
    Niro avatar
    8 posts
    Member since:
    Aug 2014

    Posted 12 Dec 2014 in reply to Niro Link to this post

    Solved the issue above on android - By turning hardware acceleration on!

    However, on IOS for Iphones, playing the video which opens in fulls creen, once you return to the application scrolling no longer works. is this a bug ? is there some method to call as a workaround to turn scrolling back on ?
  10. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 16 Dec 2014 Link to this post

    Hello Niro,

    It seems like the video entering fullscreen interacts in some way with the Kendo UI Scroller and that is why the view doesn't scroll. A fast way to fix this is to enable native scrolling for the view where you put the video:

    <div data-role="view" data-title="Contacts" data-layout="main" data-model="APP.models.contacts" data-use-native-scrolling="true">
    ................


    Regards,
    Tsvetina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Niro
    Niro avatar
    8 posts
    Member since:
    Aug 2014

    Posted 17 Dec 2014 Link to this post

    Hi Tsvetina,

    Awsome thanks heaps that fixed it!!

    Just as a side note can i ask - any downsides to be aware of when using native scroller vs Kendo UI Scroller ?

    Also - should i be raising a bug re: this issue ?

    Thanks again
    Niro
  12. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 18 Dec 2014 Link to this post

    Hi Niro,

    You can find details about the native vs. emulated scrolling, in Kendo UI Mobile applications, in this article:
    Native VS Emulated Scrolling Explained

    As for the problem, I reported it to the Kendo UI development team but I still don't have a confirmation whether it is a bug or a limitation when combining their emulated scrolling with a page that triggers a fullscreen video.

    Regards,
    Tsvetina
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top