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

    How to play video on phonegap?

    faustot4544220 Level 1

      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 Community Professional

          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

            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

              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

                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

                  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 Community Professional

                    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

                      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

                       

                      • 8. Re: How to play video on phonegap?
                        faustot4544220 Level 1

                        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