將圖像和視頻數據uri轉換爲base 64

我試圖通過轉換爲base 64編碼值來加密圖像和視頻src。我從https://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri 將圖像和視頻數據uri轉換爲base 64

以下是我的html代碼所取出的參考：

<!DOCTYPE html> 
<html> 
<body> 

<video style="width: 640px; height: 360px;" onloadstart="" id="mediaplayer" oncontextmenu="return false;" controls preload src="" poster=""/> 

</body> 
<script src="https://code.jquery.com/jquery-3.1.1.js"></script> 
<script> 
    // To access player after its creation through jQuery use: 
    var videoSrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4'; 
    var imageSrc = 'http://www.w3schools.com/images/w3html5.gif'; 
    var playerObj = $('#mediaplayer')[0]; 
    var encodedSrc = btoa(playerObj.src); 
    var decodedSrc = atob(encodedSrc); 
    var playerObjPoster = playerObj.poster; 
    console.log(decodedSrc); 
    playerObj.src = "data:video/mp4;base64,"+btoa(videoSrc); 
    //playerObj.src = videoSrc; 
    playerObj.poster = 'data:image/gif;base64,'+btoa(imageSrc); 
    //playerObj.poster = imageSrc; 
</script> 


</html>

在運行時的圖像和視頻SRC被顯示爲編碼值，但既沒有圖像和視頻沒有顯示在網頁上。

任何建議？

來源

2016-09-27 Ankit

它不這樣工作。您必須base64編碼文件的實際內容，而不是文件的路徑。你實際使用的鏈接顯示用這個例子：

function getEncodedVideoString($type, $file) { 
    return 'data:video/' . $type . ';base64,' .  base64_encode(file_get_contents($file)); 
}

目前正在發生的事情是，瀏覽器嘗試使用解碼值（WHIS是一個URI）爲實際的圖像或視頻數據，當然這失敗。

來源

2016-09-27 06:56:56

那麼，在我的情況下，將沒有目的通過javascript btoa函數實現？ – Ankit

@antik - 如果您可以提供實際圖像內容（例如，通過執行Ajax調用並將響應傳遞給該函數），那麼它會:) –

將圖像和視頻數據uri轉換爲base 64

回答

相關問題