将图像和视频数据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

回答

相关问题