CODEWITHSUNDEEP
androidhtmlcordovahtml5-videoionic-framework
mhtsbt
mhtsbt

Reputation: 1079

Ionic/Phonegap does not play html5 video, but native browsers do

I have an issue with android playing HTML5 video. The webpage perfectly works in the native android browser, and in Chome on my Samsung Galaxy TAB 3. But when I create an Ionic/Phonegap application from the same source, the video just won't play.

The player renders fine, and I can click play, but when I do, nothing happens. There are also no error messages visible in the console.

This is the code I'm using:

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

Upvotes: 3

Views: 3241

Answers (3)

Mini Bhati
Mini Bhati

Reputation: 343

Instead of <video> tag, try using HTML <iframe> tag to embed another document within the current HTML. See the 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

Upvotes: 1

Josh Buchea
Josh Buchea

Reputation: 1446

Most audio & video element issues with Android are non-existant when using Crosswalk (Chromium webview) with your Ionic project.

Disclaimer: Adding Crosswalk increases app binary size.

Make a backup before adding Crosswalk to your project.

ionic browser add crosswalk

Upvotes: 1

ohjeeez
ohjeeez

Reputation: 557

I made a simple myApp tabs project and had the hardest time adding local videos. What ended up working for me was to just add '/android_asset/' to the front 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 out code, the code that works as a native app after running the 'ionic run android' command is uncommented.

Hope this helps.

Upvotes: 3

Related Questions