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' 中的下一个屏幕上显示它时的样子

控件显示正常，但播放视频时没有任何反应。这只是一个白屏。

一旦视频播放完毕，它就会消失：

这是我的 HTML：

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

这是一些奇怪的行为。有谁知道怎么回事？

谢谢。

编辑： 控制台显示：

这是我在使用“fullPath”时遇到的错误，因此我决定改用 localURL，但我没有收到错误。此外，似乎白屏错误并不是真正的错误。如果我点击它，控件会显示，但它仍然卡在播放中（第一个屏幕截图）。

Answer 1

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

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

在您的新主页中以 $stateParams 的形式接收图片。

$scope.videoUrl = $stateParams.picture;

在您的 HTML 中

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

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