使用Python Flask和JS更改视频流源

Question

我有以下流的服务器端路由代码

movies_list = ['./mov1.mp4', './mov2.mp4', './mov3.mp4',]

@app.route("/video", methods=["GET"])
def video():
    headers = request.headers
    if not "range" in headers:
        return current_app.response_class(status=400)

    video_path = os.path.abspath(os.path.join("media", movies_list[0]))
    size = os.stat(video_path)
    size = size.st_size

    chunk_size = (10 ** 6) * 3 #1000kb makes 1mb * 3 = 3mb (this is based on your choice)
    start = int(re.sub("\D", "", headers["range"]))
    end = min(start + chunk_size, size - 1)

    content_lenght = end - start + 1

    def get_chunk(video_path, start, chunk_size):
        with open(video_path, "rb") as f:
            f.seek(start)
            chunk = f.read(chunk_size)
        return chunk

    headers = {
        "Content-Range": f"bytes {start}-{end}/{size}",
        "Accept-Ranges": "bytes",
        "Content-Length": content_lenght,
        "Content-Type": "video/mp4",
    }

    return current_app.response_class(get_chunk(video_path, start,chunk_size), 206, headers)

还有客户端 html 页面

<video width="720" controls>
  <source src="/video" type="video/mp4">
</video>

如何从客户端向服务器发送请求，以便它更改源并开始播放？

Answer 1

如果您使用 url

/video/<int:index>

来选择文件

@app.route("/video/<int:index>", methods=["GET"])
def video(index):

    # ... code...
    video_path = os.path.abspath(os.path.join("media", movies_list[index])) # <-- index

然后你可以使用 JavaScript 将

src=

中的

<source>

替换为不同的索引，浏览器将加载不同的流。

<video width="720" controls>
  <source src="/video/0" type="video/mp4">
</video>    

<div onclick="change_stream(0)">VIDEO #1</div>
<div onclick="change_stream(1)">VIDEO #2</div>
<div onclick="change_stream(2)">VIDEO #3</div>

<script>
video  = document.querySelector('video');
source = document.querySelector('video source');

function change_stream(index) {
    console.log(`source: ${source.src} -> /video/${index}`);
    source.src = `/video/${index}`;
    //video.currentTime = 0;
    video.load();    
    video.play();
}       
</script>