Question

当前，我正在尝试使用Javascript将外部.mp4文件（URL）转换为blob对象。这是我的脚本：

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>
function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

function display(videoStream){
    var video = document.querySelector('_video');
    var videoUrl=createObjectURL(videoStream);
    video.src = videoUrl;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

但是我无法执行'createObjectURL' on 'URL': No function was found that matched the signature provided.

Jsfiddle：http://jsfiddle.net/xyzr67Lu/

我该怎么做才能解决此问题？你能帮助我吗？谢谢。

Answer 1

您无需创建Blob对象，可以直接使用url：

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>

function display(videoStream){
    var video = document.getElementById('_video');
    video.src = videoStream;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

如果您确实要创建Blob，则可以通过首先下载视频来实现，尽管用户体验会因此受到影响：

<!DOCTYPE html>
<html>
    <body>
        <video controls="" preload="auto" id="_video"></video>
    </body>
</html>

<script>
function createObjectURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object);
}

async function display(videoStream){
    var video = document.getElementById('_video');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl=createObjectURL(blob);
    video.src = videoUrl;
}

display('http://vjs.zencdn.net/v/oceans.mp4');
</script>

在Javscript中将.mp4链接转换为BLOB

1 个答案: