html HTML视频播放文件blob对象url

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HTML视频播放文件blob对象url相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<video></video>
<br/>
    <input type="file" name="file" id="fileItem" onchange="onChange()" >
    <input type="submit" value="Play">
</form>
<script type="text/javascript">
var URL = window.URL || window.webkitURL;
var video = document.getElementsByTagName('video')[0];
function onChange() {
    var fileItem = document.getElementById('fileItem');
    var files = fileItem.files;
    var file = files[0];
    var url = URL.createObjectURL(file);
    video.src = url;
    video.load();
    video.onloadeddata = function() {
        video.play();
    }
}
</script>
</body>
</html>

以上是关于html HTML视频播放文件blob对象url的主要内容，如果未能解决你的问题，请参考以下文章

html网站video标签blob视频如何下载

如何以角度播放 blob 视频

HTML5 视频：使用 Blob URL 的流式视频

Javascript 视频 Blob URL 和 MPEG-Dash

URLs对象 blob URL

Safari：无法从 blob url 动态加载视频