blob用法实例:http地址的原理及生成方法

酷播云倍速播放功能_播放效果

 

服务端 index.php

<?php
// 返回二进制流数据
$file_path = __DIR__ . '/video.mp4';
$file_size = filesize($file_path);
$oct_data = fread(fopen($file_path, "r"), $filesize);

header("Content-type: video/mpeg4;charset=UTF-8");
header("Content-Length: " . $filesize);
echo $oct_data;

前端 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blob Url</title>
</head>
<body>
    <video id="video" width="400" controls="controls"></video>
    <script type="text/javascript">
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', '/index.php', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) {//请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                document.getElementById("video").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    </script>
</body>
</html>

我的视频应用类原创文章

版权声明：本文为ffffffff8原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。