将图像和视频数据 uri 转换为 base 64

Question

我试图通过转换为 base 64 编码值来加密图像和视频 src。我参考了 https://www.iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri

以下是我的 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 显示为编码值，但网页上没有显示图像和视频。

有什么建议吗？

Answer 1

这样不行。您必须对文件的实际内容进行 base64 编码，而不是文件的路径。您使用的 link 实际上在示例中显示了这一点：

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

目前发生的情况是浏览器正在尝试使用解码值（这是一个 URI）作为实际图像或视频数据，当然失败了。

将图像和视频数据 uri 转换为 base 64

converting image and video data uri to base 64

html

html5-video