HTML视频标签无法正确显示视频

我想用Cordova Media Capture播放视频，但它不起作用。HTML视频标签无法正确显示视频

这里是我的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，而不是和我没有得到错误。此外，它看起来像白屏错误并不是一个真正的错误。如果我点击它的控件显示，但它仍然停留在播放（第一个截图）。

来源

2017-07-18 MatTaNg

可以显示控制台中显示的内容吗？ – HGK

我编辑我的帖子 – MatTaNg

在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依赖。希望这可以帮助你。

来源

2017-07-20 10:53:12 HGK

fullPath不适合我。我编辑我的帖子，以显示我得到的错误。 – MatTaNg

HTML视频标签无法正确显示视频

回答

相关问题