HTML视频代码无法正确显示视频

Question

我正在尝试使用Cordova Media Capture来播放视频，但它不起作用。

这是我的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);
  }
};

我尝试过FullPath和localURL。我在这里使用localURL是因为此视频是从用户的手机中获取的，我从浏览器中收到错误消息。它是沙箱，所以我不能使用来自外部设备的localURL。设备以mp4格式返回视频。

以下是我在$ state.go＆＃39;

的下一个屏幕上显示它时的样子

控件显得很好但是当你播放视频时没有任何反应。它只是一个白色的屏幕。

视频完成播放后，它就会消失：

这是我的HTML：

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

这是一些奇怪的行为。有谁知道发生了什么？

感谢。

编辑： 控制台显示：

这是我使用＆＃39; fullPath＆＃39;时出现的错误。因此，我决定使用localURL，但我没有得到错误。此外，似乎白屏错误并不是一个真正的错误。如果我点击它控件出现但它仍然停留在播放（第一个截图）。

Answer 1

在onSucess方法中，将媒体网址存储为

$scope.videoSrc = mediaFiles[0].fullPath;
$state.go('submitMoment', {picture: $scope.videoSrc);

在新页面中将图片作为$ stateParams接收。

$scope.videoUrl = $stateParams.picture;

在您的HTML中

<source src="{{videoUrl}}" type='video/mp4' />

在你的控制器中注入$ stateParams依赖项。 希望这会对你有所帮助。