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

[Aravind]

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

[Aravind]

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

[Tsvetina]

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

 

 

[Aravind]

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

[Tsvetina]

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

 

 

[Aravind]

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

[Tsvetina]

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

 

 

[Niro]

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

[Niro]

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 ?

[Tsvetina]

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

 

 

[Niro]

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

[Tsvetina]

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