简体   繁体   English

Flask 不会在 html 中播放视频

[英]Flask wont play a video in the html

I have a flask application that is supposed to play a video when the page is loaded but its just showing up in th top left corner and not changing from the first frame of the video我有一个 Flask 应用程序,它应该在页面加载时播放视频,但它只是显示在左上角,而不是从视频的第一帧开始改变

Ive already tried plugging it into the html code but it doesnt work我已经尝试将它插入到 html 代码中,但它不起作用

{% extends "base.html"  %}


{% block content %}

<video height="224" width="400" preload="auto" data-video-width="400"  src="../static/chugging.mp4" style="margin-right: auto; margin-left: auto; align-items: center"></video>

{% endblock %}

I would expect to see it play or at least see a play button somehwere but its just a small frame in the top left corner我希望看到它播放或至少看到某个播放按钮,但它只是左上角的一个小框架

Playing video in Flask template在 Flask 模板中播放视频

If you have video files in the static folder you can access them in templates using url_for as like other static files.如果static文件夹中有视频文件,则可以像其他静态文件一样使用url_for在模板中访问它们。 Documentation of serving static files can be found in this URL .可以在此 URL 中找到提供静态文件的文档。

Here I am showing an example of playing video file in template.这里我展示了一个在模板中播放视频文件的例子。

Directory structure:目录结构:

├── app.py
├── static
│   └── demo.mp4
└── templates
    └── index.html

app.py : app.py

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/')
def index():
    return render_template('index.html')

index.html : index.html

<!DOCTYPE html>
<html>
<head>
  <title>Video Example</title>
</head>
<body>
  <h2>Serving video files from Flask template</h2>
  <video width="320" height="240" controls>
    <source src={{ url_for('static', filename="demo.mp4") }} type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

Output:输出:

在 Flask 模板中播放的视频

if __name__=='__main__':
    app.run(debug=True)

After doing all that are given above simply Add these lines in the .py file at the end...It will do the task完成上面给出的所有操作后,只需在最后的 .py 文件中添加这些行...它将完成任务

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM