HTML video tag does not display video correctly

ionic-v1
1

I am trying to use Cordova Media Capture to play video however, it does not work.

Here is my JS:

function video() {

  navigator.device.capture.captureVideo(onSuccess, onFail, 
    {
      limit: 1,
      duration: constants.MAX_DURATION_OF_VIDEO
    });
  function onSuccess(mediaFiles) {
    console.log("MEDIA FILE");
    console.log(mediaFiles);
    var i, path, len;
    for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].localURL;
        console.log(path);
        $state.go('submitMoment', {picture: $sce.trustAsResourceUrl(path)});
    }
  };

  function onFail(message) {
    console.log("FAILED because: " + message);
  }
};

I have tried both FullPath and localURL. I’m using localURL here because this video is being taken from the user’s phone and I get an error from the browser. It is sandboxed so I cannot use a localURL coming from an external device. The device returns a video in mp4 format.

Here is how it looks when I display it on the next screen in ‘$state.go’

Video when user presses play

The controls appear fine but when you play the video nothing happens. It’s just a white screen.

Once the video is done playing it just disappears:

enter image description here

Here is my HTML:

<video width="100%" height="300px" controls>
  <source src="{{vm.picture}}" type="video/mp4"></source>
  </video>

This is some strange behavior. Does anyone know whats going on?

Thanks.

1 Like