CODEWITHSUNDEEP
javascripthtmlxmlcordova
dav
dav

Reputation: 375

Phonegap Video "Failed to load because no supported source was found"

I am currently working on a mobile Phonegap "website wrapper" application; that is, I simply redirect from index.html to my URL:

window.location.href=myUrl;

And it opens the page in the InAppBrowser. Most of the functionality seems to be working just fine; however, I am having a problem playing any of the videos on the site using my phone.

My first impression was that it has something to do with a cross-origin policy issue, which led me to believe that perhaps I'd have to do some whitelisting. However, if that is the case, I have as yet failed to find a solution for it.

The error I am currently getting (on my android phone used for testing):

Error: Failed to load because no supported source was found.

More specific details:

My HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My Title</title>
  <meta charset="utf-8" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
  <script>
    window.location.href=myURL;  //where myURL is the URL of the site I am using
  </script>
</body>
</html>

My config.xml (I am aware that it is very messy and incomplete in various ways):

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.myId" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>My App Name here.</name>
    <description>
        My description here.
    </description>
    <author email="[email protected]" href="href.here">
        My author here.
    </author>
    <content src="index.html" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="14" />
    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
    <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
    <platform name="android">
        <icon src="www/res/icon/android/icon.png" width="672" height="672"/>
    </platform>
    <platform name="ios">
        <icon src="www/res/icon/ios/icon.png" width="672" height="672"/>
    </platform>
    <platform name="wp8">
        <icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
        <icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
        <splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
    </platform>
    <platform name="windows">
        <icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
        <icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
        <icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
        <splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
        <icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
        <icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
        <icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
        <icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
        <icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
        <icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
        <icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
        <icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
        <icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
        <icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
        <splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
    </platform>
    <access origin="https://myURL.com/" subdomains="true" />
    <allow-navigation href="https://myURL.com/*" />
    <access origin="*" />
    <allow-navigation href="*" />
    <allow-navigation href="blob:*" />
    <allow-intent href="*"/>
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-intent href="blob:*"/>
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="https://github.com/apache/cordova-plugin-whitelist.git" />
</widget>

I've looked all around for a solution to this issue, to no avail. Any help would be greatly appreciated.

As a side note, if anyone has suggestions for a better way altogether to achieve what I am trying to do with this project, please let me know and I will keep it in mind for the future.

Upvotes: 0

Views: 1208

Answers (2)

dav
dav

Reputation: 375

So, it turns out the problem was actually with my phone. What exactly, I couldn't say, but it worked fine on a different android phone...

Upvotes: 0

A. El-zahaby
A. El-zahaby

Reputation: 1160

First 1:

Do not forget to put video Tag:

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
      Your browser does not support the video tag.
</video>

NOTE:

1. The file:// protocol to play something native to the device such as: window.plugins.videoPlayer.play("file:///sdcard/MyMovie.mp4");

2. The http:// protocol to play something on the internet such as: window.plugins.videoPlayer.play("http://path.to.my/file.mp4");

3. The http:// protocol pointing to a video on YouTube such as: window.plugins.videoPlayer.play("http://www.youtube.com/watch?v=E0UV5i5jY50");

Second 2:

You can use this : VideoPlayer

Upvotes: 1

Related Questions