CODEWITHSUNDEEP
ioshtmlcordovavideo
Sheri Trager
Sheri Trager

Reputation: 852

video source not found when using cordova inappbrowser

I use cordova's inappbrowser plugin to access a web page that hosts a bunch of videos. The web page is a simple html page that uses the Ultimate Video Player to display the videos. It uses relative paths which work just fine from the website.

 data-video-source="content/genie/ClientConsultationTips1/HaircolorConsultationChecklist1.mp4"

However when using the inappbrowser, the video source is not found. I tried changing the video paths in the website to absolute paths and even a url.

I am testing using xcode with an iphone plus 6.

Any ideas?

I tried... http://myhaircolorgenie.com/content/genie/ClientConsultationTips1/HaircolorConsultationChecklist1.mp4

I tried the actual url... http://myhaircolorgenie.com/videos.html#/?playlistId=0&videoId=0

How can I reference the video paths in the website so that the inappbrowser browser will see the path?

Upvotes: 1

Views: 602

Answers (2)

Sheri Trager
Sheri Trager

Reputation: 852

The problem wasn't the inAppBrowser or anything else related to the app. It was the encoding on the mp4 videos. I would convert a video so that it would work on iPhone and then it wouldn't work on android.
Sometimes the audio would work but the video wouldn't show.

What I had to do is convert all videos to...

Video Encoder = H.264/mpeg-4

Audio Encoder = AAC

I tried numerous free video converters on both Mac and Windows but couldn't get the right settings. I finally broke down and bought one.

Upvotes: 0

VC.One
VC.One

Reputation: 15881

Make a test HTML page with below code (original source link) and see if it works at all :

Untested so need feedback... 

<html>
  <head>
    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,maximum-scale=1.0,initial-scale=1.0" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- ISO-8859-1 -->
    <title>Cordova Mobile Spec</title>

  </head>
  <body>
    <video width=100% height=100% id="player">
      <source src="http://myhaircolorgenie.com/content/genie/ClientConsultationTips1/HaircolorConsultationChecklist1.mp4">
      <meta property="og:video:secure_url" content="https://www.w3schools.com/tags/movie.mp4">
      <meta property="og:video:type" content="video/mp4">
    </video>
    <div>
      <button onclick="document.getElementById('player').play()"> play </button>
      <button onclick="document.getElementById('player').pause()"> pause </button>
    </div>
    <script>
      document.getElementById('player').play();
    </script>
  </body>
</html>

Upvotes: 0

Related Questions