Clever Geek Handbook

Ionic / Phonegap doesn't play html5 videos but native browsers

I have a problem with android playing in HTML5 format. The webpage works fine in native android browser, and in Chome it works fine in my Samsung Galaxy TAB 3. But when I create an Ionic / Phonegap app from the same source, the video just won't play.

The player makes a penalty and I can click on the game, but when I do that, nothing happens. There are also no error messages on the console.

This is the code I am using:

<video class="chapter-video" controls="controls" preload="none">
    <source src="content/video1.mp4" type="video/mp4">
</video>
+3


source to share


3 answers


I made a simple myApp tabs project and added local videos from the start. What worked for me was just adding '/ android_asset /' to the beginning of the local video.

                <video customvideo>
                    <source src="/android_asset/www/img/small.mp4"/>
                    <!--<source src="../img/small.mp4"/>-->
                </video>


The actual path to the video is the commented code, the code that runs as a native app after running the Ionic Start Android command is uncommented.

Hope it helps.

+3


source


Most audio and video element issues with Android do not exist when using Crosswalk (Chromium webview) with your Ionic project.

Disclaimer: Adding Crosswalk increases the size of the application binary.



Make a backup before adding Crosswalk to your project.

ionic browser add crosswalk

+1


source


Instead of a tag, <video>

try using an HTML tag <iframe>

to insert another document into the current HTML. See example below:

<div class="item" >      
     <div class="video-container">
        <iframe src="{{ image.video }}" frameborder="0" width="560" height="300"></iframe>
     </div>
</div>

Read about iframe here: w3school iframe link

+1


source






More articles:


All Articles