8 Replies Latest reply on Aug 10, 2015 7:01 PM by Luche1937

    HTML5 video will not even show up on mobile

    Luche1937 Level 1

      Could someone please tell me what I'm missing to get HTML5 video to even show up on a mobile device?

       

      Here are my steps:

       

      1. Open Edge Animate.

       

      2. Click Create New.

       

      3. Change Stage dimensions to 300x250.

       

      4. File > Import, select both trail.mp4 and trail.ogv (the video files included with the video Lesson example in Edge).

       

      6. Check Autoplay, check Controls in the Video section in the Properties panel.

       

      7. File > Save As, choose a directory.

       

      8. Upload directory online.

       

      9. Test on desktop (Mac Mavericks, Windows 7) by pointing browser to the .html file that is in the same directory as the edge_includes folder, the media folder, xxx_edge.js and xxx_edgeActions.js. It works!

       

      10. Test on Android device (HTC One X, Samsung Galaxy S4). It does not work - video doesn't even show up.

       

      HOWEVER, when I directly link to trail.mp4 in an Android browser, the video plays perfectly. TIA.

        • 1. Re: HTML5 video will not even show up on mobile
          pittsburgh_joe Level 3

          When I did a project for iPad with Edge. The video wouldn't play in the project but would play by itself ..After pulling my hair out, I found that if I rendered the mp4 with Field Order: None (progressive)  ..not upper or lower ..it would magically start to work in the project

          ::shrugs::

          • 2. Re: HTML5 video will not even show up on mobile
            Luche1937 Level 1

            Thanks Joe. Did you play the .mp4 straight in an iPad browser? Or did you play it through the .html file associated with the .an file?

             

            Here's what I mean: https://www.dropbox.com/s/hg0w12k4dcnp2au/SPY_HTML5_AD_TEST_7.zip?dl=0

             

            That is a zip file that contains files generated by Edge when you save the project. The project consists of ONLY a video on the stage. That's it. When the contents in that zip file are uploaded and the index.html file is viewed online, it works great in any desktop browser.

             

            But when viewed on a mobile browser (I'm currently testing on Android), the index.html file does not show the video. I can link directly to the .mp4 file (inside the media folder) and it will play fine.

            • 3. Re: HTML5 video will not even show up on mobile
              pittsburgh_joe Level 3

              playing the videos directly on an iPad resulted in it playing in quicktime.

               

              anyways. When you are testing your project in the browsers ..are they live url's or are you just running them off your local machine?

               

              Whatever server you are using probably needs the mp4 mime type enabled

              • 4. Re: HTML5 video will not even show up on mobile
                Luche1937 Level 1

                Thanks Joe. They are live urls. I will doublecheck the mp4 mime type, but I'm pretty sure that's set up correctly for mp4s, because the video does play directly in an android browser.

                 

                www.someliveurl.com/test/index.html/media/trail.mp4 plays fine on mobile. www.someliveurl.com/test/index.html does not even show the video at all.

                • 5. Re: HTML5 video will not even show up on mobile
                  pittsburgh_joe Level 3

                  ermmm. I would try the project reordering the mp4 and ogv. Then try it with only one or the other.

                  You might want to convert a copy of the mp4 into a .webm and add that to the mix.

                  • 6. Re: HTML5 video will not even show up on mobile
                    pittsburgh_joe Level 3

                    and after that mess ..I'd ditch Edge only for a moment to test the same video files with this jPlayer : HTML5 Audio & Video for jQuery or HTML5 Video Player | Video.js

                    • 7. Re: HTML5 video will not even show up on mobile
                      Luche1937 Level 1

                      Thanks Joe. My mime type is set. I updated the Chrome browser on my mobile devices and Genymotion and that seems to work. I also had to list .webm as the first video file to play (.mp4 was listed first). It even played on an older Gen 2 iPad in Safari.

                       

                      The only issue now is that the video doesn't show sometimes in Firefox on a Mac desktop. I can hear the audio of the video though.

                      • 8. Re: HTML5 video will not even show up on mobile
                        Luche1937 Level 1

                        Worked on this all day with Edge Animate CC 2015. The files that are generated from Edge Animate CC will work in Chrome on mobile but they will NOT work in the native Android browser for 4.2 and 4.3.

                         

                        THIS approach to HTML5 video for mobile, however, works on every device browser I throw at it, including Android 4.2 native browser, Android 4.2 Chrome, Android 4.3 native browser, Android 4.3 Chrome, iPad 2, iPhone 5S, Firefox on Mac desktop, Chrome on Mac (Mavericks) desktop, Firefox on Mac (Mavericks) desktop, Safari on Mac (Mavericks) desktop:

                         

                        http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

                         

                        I have not tested this on Windows yet but I am positive it will work.

                         

                        Here is some quick and dirty code if anyone wants to take a look; simply copy and paste this into an .html doc and run it in a browser:

                         

                        <!doctype html>

                        <html>

                         

                        <head>

                         

                            <meta charset="UTF-8">

                            <title>HTML5 Video Test For Mobile</title>

                         

                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

                         

                         

                        </head>

                         

                        <body>

                         

                         

                            <video id="video" autobuffer height="240" width="360">

                                <source src="http://www.broken-links.com/tests/media/BigBuck.m4v">

                                <source src="http://www.broken-links.com/tests/media/BigBuck.webm" type="video/webm">

                                <source src="http://www.broken-links.com/tests/media/BigBuck.theora.ogv" type="video/ogg">

                            </video>

                         

                         

                            <script>

                                var video = document.getElementById('video');

                         

                                video.addEventListener("canplay", function() {

                                    video.pause();

                                    console.log("canplay.");

                         

                         

                                    //video.addEventListener("click" , playwhenclicked);

                         

                         

                                });

                         

                         

                            </script>

                         

                         

                            <div class="mortise" style="width:50px; height:50px; background-color:#11ccff; position:absolute; top:100px; left:-50px; cursor: pointer;">mor tise</div>

                         

                            <div class="animatedthing" style="width:50px; height:50px; background-color:#F075AE; position:absolute; top:10px; left:10px;">sell msg</div>

                         

                            <div class="custom_pause_button" style="width:50px; height:50px; background-color:#ccffAE; position:absolute; top:198px; cursor: pointer;">pause</div>

                         

                            <div class="custom_play_button" style="width:50px; height:50px; background-color:#F0ccAE; position:absolute; top:198px; left: 58px; cursor: pointer;">play</div>

                         

                         

                            <script>

                                video.addEventListener("play", function() {

                                    //  video.play();

                                    console.log("vid is playin'.");

                         

                         

                                    $(".animatedthing").hide();

                         

                         

                                    //video.addEventListener("click" , playwhenclicked);

                         

                         

                                });

                         

                         

                                video.addEventListener("ended", function() {

                                    //  video.play();

                                    console.log("the video has ended.");

                         

                         

                                    $(".animatedthing").show();

                                    $(".animatedthing").animate({

                                        left: '300px'

                                    });

                         

                         

                                    //video.addEventListener("click" , playwhenclicked);

                         

                         

                                });

                         

                         

                                var VideoCuePoint = 1;

                         

                                video.addEventListener("timeupdate", LaunchMortise);

                         

                                function LaunchMortise() {

                         

                                    console.log("timeupdater: " + video.currentTime);

                         

                                    if (video.currentTime > VideoCuePoint) {

                         

                                        $(".mortise").animate({

                                            left: '150px'

                                        });

                         

                                        video.removeEventListener("timeupdate", LaunchMortise);

                         

                                    }

                         

                                };

                         

                                $('.custom_play_button').click(function(e) {

                         

                                    console.log("play button clicked.");

                                    video.play();

                         

                                });

                         

                                $('.custom_pause_button').click(function(e) {

                         

                                    console.log("pause button clicked.");

                                    video.pause();

                         

                                });

                         

                            </script>

                         

                         

                        </body>

                         

                        </html>