8 Replies Latest reply on Aug 30, 2016 12:18 PM by faustot4544220

    How to play video on phonegap?

    faustot4544220
    faustot4544220 Aug 25, 2016 1:33 PM

      Hi there. I'm struggling to play videos on phonegap.

       

      I'm trying to use <video> tag. I'm trying to play on Android but I'll be tested soon on iphone too. How can I play video like snapchat style? (full div not fullscreen). When I resize to a fullscreen the video is automatically fit properly. When returned to non-fullscreen it works how I suppose to.

       

      I have three major questions

      1) How can I make it work how I suppose to?

      2) Also is there a way to customize the controls? (make it look better)

      3) Is there a way to build native video play to android / ios? (it might be my last chance) if yes please post the links to put me on tracks

       

       

      How it plays

       

      phonegap-wide.jpg

       

      So in fullscreen mode it plays ok

      Screenshot_2016-08-25-17-06-22.png

       

      Returnin to non-fullscreen mode

      Screenshot_2016-08-25-17-06-28.png

      Also with bootstrap it breaks the controls.

       

      I have three questions

      1) How can I make it work how I suppose to?

      2) Also is there a way to customize the controls?

      3) Is there a way to build native video play to android / ios? (it might be my last chance)

       

      Appreciate any help thanks

        • 1. Re: How to play video on phonegap?
          kerrishotts Adobe Employee
          kerrishotts Employee Aug 26, 2016 9:09 AM (in response to faustot4544220)

          Kind of hard to help without seeing exactly how you're using the video tag. Please post some code so we can take a look. If it's long, post link to a gist or a pastebin.

           

          There are also plugins that do video playback. You might have better luck with those.

          • 2. Re: How to play video on phonegap?
            faustot4544220 Level 1
            faustot4544220 Aug 28, 2016 5:07 PM (in response to kerrishotts)

            the code. looking for any feedback

             

            <!DOCTYPE html>

            <html>

            <head>

                <meta charset="utf-8" />

                <meta name="format-detection" content="telephone=no" />

                <meta name="msapplication-tap-highlight" content="no" />

                <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />

                <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

                <link rel="stylesheet" type="text/css" href="css/framework.css" />

                <link href="//vjs.zencdn.net/5.8/video-js.min.css" rel="stylesheet">

                <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>

                <script src="//vjs.zencdn.net/5.8/video.min.js"></script>

            </head>

             

            <body>

              <div>

              <video id="really-cool-video" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}' width="350" height="600">

                <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">

              </video>

              </div>

            </body>

            </html>

             

            hi kerrishotts looking forward to any feedback. thanks..

            • 3. Re: How to play video on phonegap?
              faustot4544220 Level 1
              faustot4544220 Aug 30, 2016 7:31 AM (in response to faustot4544220)

              kerrishotts you asked me to post some code. The code is here. Waiting for any feedback. Thanks!

              • 4. Re: How to play video on phonegap?
                jaimeyunker Level 1
                jaimeyunker Aug 30, 2016 9:29 AM (in response to faustot4544220)

                I haven't tested it yet on iOS, but my videos work perfectly on an Android using very simple <video> tags...

                 

                <video width="100%" poster="../../images/video-thumbnails/whiteboard.jpg" preload="auto" controls >

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

                </video>

                • 5. Re: How to play video on phonegap?
                  faustot4544220 Level 1
                  faustot4544220 Aug 30, 2016 10:02 AM (in response to jaimeyunker)

                  Did you see how it display? it might show up in fullscreen over a div. I tried your code and didn't work in my case. I'm considering new ways or write my a new plugin .

                  • 6. Re: How to play video on phonegap?
                    kerrishotts Adobe Employee
                    kerrishotts Employee Aug 30, 2016 10:25 AM (in response to faustot4544220)

                    faustot4544220,

                     

                    - Does your issue occur with any video, or only certain videos?

                     

                    - Is there any other styling affecting the video tag (from a stylesheet)?

                     

                    - On Android, I highly suggest using Crosswalk -- otherwise you're subject to the OS and manufacturer variations in the system web view (and there are many).

                     

                    - You might also just want to consider playing video using plugins. There's several at Cordova's plugin repo.

                    • 7. Re: How to play video on phonegap?
                      faustot4544220 Level 1
                      faustot4544220 Aug 30, 2016 10:33 AM (in response to kerrishotts)

                      kerrishotts

                      - Does your issue occur with any video, or only certain videos?

                      Yes, it does. The video was recorded by native camera but got that format when playbacked.

                       

                      - Is there any other styling affecting the video tag (from a stylesheet)?

                      There is a bootstrap but the video got in "widescreen" mode without bootstrap.

                       

                      - On Android, I highly suggest using Crosswalk -- otherwise you're subject to the OS and manufacturer variations in the system web view (and there are many).

                      I'm not familiar with Crosswalk but I'll take a look.

                       

                      - You might also just want to consider playing video using plugins. There's several at Cordova's plugin repo.

                      I tried all on the repo but none of them does what I need (play a video on full width/height div)

                       

                       

                      Thanks

                       

                      How to play video on phonegap?

                       

                      • 8. Re: How to play video on phonegap?
                        faustot4544220 Level 1
                        faustot4544220 Aug 30, 2016 12:18 PM (in response to kerrishotts)

                        kerrishotts I've marked your answer as correct. Crosswalk project has solved my problem. I don't know what version of webview is running natively in phonegap on my phone (didn't find a lot of functions defined on html5 specs). By the way Crosswalk seems to fix it and it's working how supposed to.

                         

                        I had to upgrade the android minimal sdk to version 20, it was 14, I think it's ok. It gave me the chance to care about only of the most recent versions and I don't have to maintain the oldest ones. I didn't test on iOS but I think it'll play ok.

                         

                         

                        Thanks