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視頻標籤無法正確顯示視頻

回答

相關問題