Sanic 实现 HTTP Range,解决前端视频无法拖动问题

我们知道有HTTP Range规范,这里mozilla对此规范做了详细的解释。

前端的<video>标签会自动在请求头部分添加Range: bytes=0-或者其他的范围。
IOS浏览器内核默认也会在请求头部分添加Range,如果视频后端不支持HTTP Range规范则无法正常播放,IOS浏览器无法播放视频可在这个问题上排查。

我们需要根据这个规范在后端解析Range请求头,并返回请求头对应的文件分片,且服务器响应状态码为206。

下面是Sanic实现的完整代码,并写了注释,用Java等其他语言实现的话,逻辑是一样的。

(有一个疑问的就是Sanic里面的源码应该是实现了HTTP Range规范的,不知道为什么直接调用会出错,有大佬交流下吗)

from sanic import Sanic, response
from sanic.response import json
from sanic.response.types import HTTPResponse, JSONResponse, ResponseStream
from mimetypes import guess_type
from sanic.compat import Header, open_async, stat_async
from sanic.response import file_stream
from urllib.parse import quote, unquote
import os


app = Sanic("private-web")

def parse_range_header(range_header, file_size):
    # 解析Range参数
    start, end = range_header.split('=')[1].split('-')
    start = int(start)
    end = int(end) if end else file_size - 1

    # 确保范围在文件大小范围内
    start = min(max(start, 0), file_size - 1)
    end = min(end, file_size - 1)

    return start, end

@app.route('/video/<vid:str>')
async def videoRange(request, vid):
    # 网址中文转码
    vid = unquote(vid)
    # 视频路径
    file_path = f"{vid}.mp4"
    # 获取文件大小
    file_size = os.path.getsize(file_path)
    # 获取请求头Range参数
    range_header = request.headers.get("Range")
    headers = {}

    if range_header:
        # 解析Range参数
        start, end = parse_range_header(range_header, file_size)
        status = 206
        headers["Content-Range"] = f"bytes {start}-{end}/{file_size}"
        headers['Content-Length'] = str(end - start + 1)
        chunk_size: int = 4096
        mime_type = None
        mime_type = mime_type or guess_type(file_path)[0] or "text/plain"
        # 这段代码就是拿 file_stream 里的源码改的,直接使用file_stream总是报错,有大佬帮忙解释并实现下吗
        async def _streaming_fn(response):
            async with await open_async(file_path, mode="rb") as f:
                await f.seek(start)
                to_send = end - start + 1
                while to_send > 0:
                    content = await f.read(min((to_send, chunk_size)))
                    if len(content) < 1:
                        break
                    to_send -= len(content)
                    await response.write(content)

        return ResponseStream(
            streaming_fn=_streaming_fn,
            status=status,
            headers=headers,
            content_type=mime_type,
        )
    else:
        return await file_stream(file_path, headers=headers)

if __name__ == '__main__':
    app.run(host='0.0.0.0')
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 前端的uinapp是一种跨平台的移动应用开发框架,可以用于实现iOS视频剪辑功能。 要使用uinapp实现iOS视频剪辑,可以采用以下步骤: 1. 首先,需要使用uinapp框架的相关组件来构建界面,包括按钮、文本框、进度条等。可以使用调试工具将这些组件放置在合适的位置,并为它们添加相应的事件处理函数。 2. 接下来,需要在界面上添加视频选择的功能。可以使用组件或者原生API来实现。用户可以通过点击按钮或者拖拽方式选择视频文件。 3. 一旦选择了视频文件,需要先将视频文件上传到服务器进行处理。可以使用HTTP请求将视频文件发送到服务器,并在前端界面上显示上传的进度。 4. 上传完成后,服务器会返回一个视频处理的任务ID。前端需要通过定时轮询或者WebSocket等方式向服务器查询任务的状态。可以在界面上显示任务的进度,并提供取消任务的功能。 5. 当视频处理任务完成时,服务器会将处理后的视频文件发送回前端前端可以将视频文件保存到本地,并在界面上显示视频的封面和时长信息。 6. 最后,需要添加视频剪辑的功能。可以使用组件或者原生API来实现。用户可以通过拖拽方式选择需要剪辑的区域,并通过界面上的按钮来确认和保存剪辑结果。 综上所述,使用前端的uinapp框架可以实现iOS视频剪辑功能。通过界面的构建、视频选择、上传和处理、任务查询、视频剪辑等步骤,可以完成视频剪辑的操作,并在前端界面上显示相关信息和进度。 ### 回答2: 前端uinapp是一种开发工具,可用于实现iOS视频剪辑功能。iOS视频剪辑的主要目标是允许用户在手机上编辑和修改视频内容,包括裁剪、旋转、添加滤镜和转场效果、调整音频等操作。 在前端uinapp中实现iOS视频剪辑可以按照以下步骤进行: 1. 创建界面:使用前端uinapp的界面组件,设计一个用户友好的界面,包括视频预览窗口、时间轴、编辑工具栏等。 2. 导入视频:提供用户导入视频的功能,可以通过调用iOS原生接口,让用户选择要编辑的视频文件,并将其导入前端uinapp中。 3. 裁剪视频:允许用户在时间轴上选择起始和结束时间点,然后对视频进行裁剪。可以使用前端uinapp的视频处理组件,调整视频的播放范围,剔除不需要的部分。 4. 添加滤镜和转场效果:提供一系列滤镜和转场效果供用户选择,并应用到视频中。这可以通过调用您选择的滤镜和效果的API来实现。 5. 调整音频:允许用户对视频的音频进行调整,包括音量、混音等参数的调整。可以使用前端uinapp的音频处理组件,使用户能够更改视频的音频部分。 6. 预览和导出:在界面中提供预览功能,用户可以预览编辑后的视频,确保满足预期效果。一旦满意,用户可以选择导出编辑后的视频,可以使用iOS原生接口导出视频文件。 总结起来,前端uinapp可以通过界面设计、视频导入、裁剪、滤镜和效果应用、音频调整、预览和导出等功能,实现iOS视频剪辑的要求。通过这些步骤,用户可以自由地编辑和修改自己的视频内容,制作出满意的剪辑作品。 ### 回答3: 前端 UINAPP 是一种用于移动应用开发的前端框架,可以用于实现 iOS 视频剪辑功能。 首先,在 iOS 系统中,可以使用 AVFoundation 框架来处理视频和音频。我们可以通过 UINAPP 的前端界面来获取用户选择的视频文件,并将其传递给后端进行处理。 在 UINAPP 中,可以使用 HTML5 的 video 元素来显示视频内容,并通过 JavaScript 控制视频播放。用户可以通过点击界面上的剪辑按钮选择视频的起始和结束时间,并通过 JavaScript 将剪辑的时间参数传递给后端。 接下来,后端可以使用 AVFoundation 框架来剪辑视频。通过 AVAsset 和 AVAssetExportSession 类,我们可以实现视频的剪辑和导出功能。根据前端传递的剪辑时间参数,可以使用 AVAsset 类的 timeRange 属性对视频进行裁剪,然后使用 AVAssetExportSession 类将裁剪后的视频导出为新的文件。 最后,后端可以将处理好的剪辑视频文件返回给前端前端通过 UINAPP 的界面将剪辑后的视频显示给用户。 总结起来,前端 UINAPP 可以实现 iOS 视频剪辑功能的具体步骤如下: 1. 在前端界面中显示视频,并通过 JavaScript 控制视频播放。 2. 用户通过界面按钮选择视频的起始和结束时间。 3. 前端将选择的时间参数传递给后端。 4. 后端使用 AVFoundation 框架对视频进行剪辑。 5. 后端将剪辑后的视频返回给前端。 6. 前端通过 UINAPP 的界面将剪辑后的视频显示给用户。 通过这样的步骤,可以实现前端 UINAPP 中实现 iOS 视频剪辑的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值