Search code examples
androidcordovahtml5-video

How to play html5 video tag in Cordova?

This should be so simple, but after hours of googling I cannot find a solution for playing external video in an html5 video tag using cordova 12. Starting with a fresh project:

$ cordova create VideoTest com.example.videotest VideoTest
Creating a new cordova project.
$ cd VideoTest
$ cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
    Path: platforms/android
    Package: com.example.videotest
    Name: VideoTest
    Activity: MainActivity
    Android Target SDK: android-33
    Android Compile SDK: 33
Subproject Path: CordovaLib
Subproject Path: app
Android project created with [email protected]

Then add AllowInlineMediaPlayback to config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.videotest" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>VideoTest</name>
    <description>Sample Apache Cordova App</description>
    <author email="[email protected]" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <preference name="AllowInlineMediaPlayback" value="true"/>
</widget>

and finally putting a simple html5 video tag in index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Security-Policy" content="default-src *; media-src *;style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    </head>
    <body>
        <video controls preload="metadata">
            <source src="http://www.example.com/waterfall-video.mp4" type="video/mp4"/>
            Video not supported.
        </video>

        <script src="cordova.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

When I build and run this on my phone (running Android 11) I get the 'broken video' image enter image description here

I am clearly missing something, but I cannot find any cordova-specific documentation for this. [I need the video to play inline, not fullscreen, so I cannot use the cordova-plugin-video-player plugin]

Solution

  • You may try this html

    <!DOCTYPE html>
<html>
 
<body>
  <center>
    <h1 style="color:green;">Test</h1>
    <h3>HTML video tag</h3>
    <p>Adding video on the webpage
    <p>
      <video width="450" height="250"
      controls preload="auto">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" 
                type="video/mp4">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" 
                type="video/webm">
      </video>
  </center>
</body>
 
</html>

    Output :

    1