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

这篇具有很好参考价值的文章主要介绍了Sanic 实现 HTTP Range,解决前端视频无法拖动问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

(有一个疑问的就是Sanic里面的源码应该是实现了HTTP Range规范的,不知道为什么直接调用会出错,有大佬交流下吗)文章来源地址https://www.toymoban.com/news/detail-654554.html

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')

到了这里,关于Sanic 实现 HTTP Range,解决前端视频无法拖动问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于 HTTP Range 实现文件分片并发下载!

    目录 前言 基础下载功能 进阶下载功能 单片下载 多片下载  浏览器发送预检(preflight)请求 express 不支持多段 range multipart/** 搭配 boundary=** 分片下载功能 “只读的” ArrayBuffer 对象 DataView 子类 Uint8Array 操作二进制数据 Blob + createObjectURL 创建 url 全部代码 通用的文件分片下载

    2024年02月10日
    浏览(58)
  • 前端学习之音视频及其谷歌浏览器无法自动播放的解决方法(3)

    目录 一、音视频的应用:  二、谷歌浏览器音视频无法播放的解决方法 方法1:在代码中敲入下图中的js代码 方法2:网站设置 在vscode中敲入  打开浏览器,音视频自动播放。 方法1:在代码中敲入下图中的js代码 给音频设置一个id,用方法实现自动播放:  点击一下页面音频

    2024年02月03日
    浏览(59)
  • 【网页上视频无法拖动进度条,如何进行加速播放操作以及网页失焦后如何可继续播放】

    遇到一 zhengzhi 刷题任务时 ,发现无法拖动进度条,也没有加速播放并且鼠标一失焦就会自动暂停时,让我乖乖看完是不可能,因此找了一个解决方案快速完成该任务 1、首先点击键盘F12键,进入开发者模式 发现标志, html5播放器,属于原生支持最方便实现加速的 顺带复习下

    2024年02月02日
    浏览(54)
  • 解决Unity中UI的中心锚点无法拖动修改问题(笔记)

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 记录一下UI中容易忘记的细节。

    2024年02月08日
    浏览(41)
  • flutter web项目中鼠标拖动无法实现滚动效果

    在完成web的flutter项目时,发现ListView列表使用鼠标拖动无法滚动,尝试发现使用触摸板可以实现滚动,但如果用户使用没有触摸板的电脑或列表为横向滚动时就无法实现项目需求了,在解决问题的过程中尝试了以下方法: 1.尝试使用点击事件模拟滑动手势 如果web项目中无法使

    2024年02月09日
    浏览(44)
  • labelImg无法保存classes文件的解决方法(IndexError: list index out of range)

    憨憨程序员,其实是有做读取旧classes保存到新classes功能的,但是看完代码发现就启动程序初始化的时候调用了一次,change save dir的时候根本没有调用。 我实力有限,只能靠比较愚蠢的方法解决了。 首先找到我们安装labelImg的地址,比如我就是放到conda环境里面,所以在这个

    2024年04月24日
    浏览(41)
  • Java-SpringBoot-Range请求头设置实现视频分段传输

    老实说,人太懒了,现在基本都不喜欢写笔记了,但是网上有关Range请求头的文章都太水了 下面是抄的一段StackOverflow的代码...自己大修改过的,写的注释挺全的,应该直接看得懂,就不解释了 写的不好...只是希望能给视频网站开发的新手一点点帮助吧. 业务场景:视频分段传

    2023年04月19日
    浏览(39)
  • sanic 使用websocket与前端vue通信,持续发送信息

    由于sanic使用较少,很难获取到有效信息,而且对websocket也是挺“一窍不通”的,因此写一下总结。在使用过程中,对sanic注册websocket,还是使用socketio不清。前端vue是使用io,还是WebSocket还是VueSocketIO。 API:sanic.add_websocket_route是Sanic框架自带的一个方法,用于添加WebSocket路由

    2024年02月11日
    浏览(68)
  • Windows上搭建Nginx-http-flv实现rtsp视频流推流到rtmp流媒体服务器并转换和前端拉取http-flv视频流

    Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流_霸道流氓气质的博客-CSDN博客 Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Vue中使用vue-vi

    2024年02月15日
    浏览(74)
  • 【OpenCV+Qt】实现简易视频播放器——支持进度条拖动

    OpenCV实现视频播放器,其思路大致就是在线程中使用OpenCV中的VideoCapture循环读取本地视频的每一帧Mat,然后发送到界面转换成QImage进行显示,而进度条拖动则用到了VideoCapture中的set函数,进度条则是使用Qslider;并且通过自定义新的进度条类实现点击跳转功能; 效果: 1.进行

    2023年04月08日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包