javascript - XHR加载视频

标签 javascript html video xmlhttprequest

在不详细说明我为什么使用 XHR 的情况下,谁能告诉我如何让下面的代码正常工作?我的目标是首先加载视频数据,然后将其放入视频标签的源中。

http://jsfiddle.net/u2vhG/

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
    var elem = document.getElementById("myVideo");
    var req = new XMLHttpRequest();
    req.onload = function () {
        var blob_uri = URL.createObjectURL(this.response);
        elem.appendChild(document.createElement("source"))
            .src = blob_uri;
    };
    req.responseType = "blob";
    req.open('GET', 'http://www.latentmotion.com/player/h264/clips/16154_2832659676_170_180.mp4', false);
    req.send(null);
};
</script>
</head>
<body>
<video id="myVideo" width="600" height="334" controls></video>
</body>
</html>

最佳答案

Refer to this workaround for Google Chrome until responseType = "blob" is implemented.

Me, responding to your same question.

如果您阅读了我的全部回答和链接,您会发现 Google Chrome 浏览器实际上还不支持 responseType = "blob"。我为您提供了一个假设的实现,并使用 responseType = "arraybuffer" 将您链接到解决方法。

关于javascript - XHR加载视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5997839/

相关文章:

即使在修改设置或使用 js 后,Android webview 也无法自动播放 youtube 视频

javascript - 在 IE11 中,当我使用每个元素数组时,Symbol.Iterator 给出错误?

javascript - 如何根据值修改图表上点的大小和颜色?酒窝.js

php - 有没有办法从 PHP 代码加载的文件中解析 PHP?

Jquery:在页面上找到一个 1 并将一个类附加到一行中的现有类

c# - 如何在特定位置的 div 中添加用户控件?

android - 如何在android中开发视频剪辑?

javascript - 在 React 中,为什么子组件的渲染函数会被调用两次?

java - 如何使用JSP动态编辑表?

ios - 使用带有来自设备的 avfoundation 的 swift 将 Capture session 保存在文档目录中