用flask做一个简单的视频浏览网站

最新推荐文章于 2025-11-01 18:36:03 发布

原创

最新推荐文章于 2025-11-01 18:36:03 发布 · 1.1w 阅读

102 ·

CC 4.0 BY-SA版权

文章标签：

#flask #python #javascript #html #xml

本文详细介绍使用Flask框架搭建视频网站的过程，包括环境搭建、视频播放、模板使用、数据存储等核心功能，并实现按播放次数排序。

ide：pycharm community 2019.3.1
python版本：3.7.6

先新建一个项目，取名flask_demo1

如果没有使用虚拟环境，可以忽略venv目录在这里插入图片描述

安装flask

pip install flask

第一个程序文件

新建一个py文件，比如叫main.py，代码如下

from flask import Flask
web = Flask(__name__)

@web.route('/')
def hello_world():
    return 'Hello, World!'

web.run(debug=True)

在pycharm里已经可以运行（Shift+F10）了
在这里插入图片描述
看到网站运行在5000端口，打开浏览器，输入http://127.0.0.1:5000 已经看到了页面

我们在main.py添加一个movieList路由，代码变成

from flask import Flask
web = Flask(__name__)

@web.route('/')
def hello_world():
    return 'Hello, World!'

@web.route('/movieList')
def movie_list():
    return 'show movie list'

web.run(debug=True)

一般情况下在pycharm里ctrl+s保存这个main.py文件后，服务会自动重启，如果没有的话就执行Ctrl+F5或点下面的重启按钮进行服务重启
在这里插入图片描述
这时候去浏览器访问http://127.0.0.1:5000/movieList 可以看到这个新路由是可以使用的

我们修改下函数movie_list，让它返回一个html

from flask import Flask
web = Flask(__name__)

@web.route('/')
def hello_world():
    return 'Hello, World!'

@web.route('/movieList')
def movie_list():
    return '''
    <!DOCTYPE html>
<html>
<body>
<video width="400" height="300" controls="controls">
  <source src="my_movie.mp4" type="video/mp4" />
</video>
</body>
</html>
    '''

web.run(debug=True)

保存代码让服务重启后，我们去浏览器刷新下页面，可以看到一个视频播放器了
在这里插入图片描述
当然，因为现在我们的项目里没有视频文件，所以目前也是无法播放的。

在项目下建一个static目录，在static里再建一个movies目录，在里面放一个mp4文件，我这里放了一个tetris.mp4，同时movie_list里也要做对应的修改，指明使用的视频文件static/movie/tetris.mp4
几个示例的mp4文件已经上传百度网盘，如需可自行下载（链接: https://pan.baidu.com/s/1VxKtHN_24gzx7DcwKMPg_A 提取码: tbiu）
在这里插入图片描述
保存及服务重启后再去浏览器看，视频文件已经成功加载，点击播放已经可以播放了

模板的使用

通过上面的程序，我们已经实现了对服务器本地视频的播放，但是如果页面都是以这种

@web.route('/movieList')
def movie_list():
    return '''
    <!DOCTYPE html>
<html>
<body>
<video width="400" height="300" controls="controls">
  <source src="my_movie.mp4" type="video/mp4" />
</video>
</body>
</html>
    '''

全部字符串的形式返回，那么html的开发效率实在太低，所以我们现在用模板去实现。
首先在项目目录新建一个templates目录，在templates目录里新建一个movie_list.html文件
在这里插入图片描述
文件内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频展示</title>
</head>
<body>
<video width="400" height="300" controls="controls">
  <source src="static/movies/tetris.mp4" type="video/mp4" />
</video>
</body>
</html>

然后在main.py里导入render_template

from flask import render_template

将movie_list的代码修改如下

@web.route('/movieList')
def movie_list():
    return render_template('movie_list.html')

在这里插入图片描述
修改后重启服务，页面可以正常使用。

下面我们四个视频文件都放到static/movies/目录下，我们尝试用循环去渲染模板。
movie_list函数的代码修改如下，将movies以数组的形式传到渲染引擎进行渲染。

@web.route('/movieList')
def movie_list():
    movies = ['tetris.mp4','guess.mp4','bfcontrol1.mp4','bfcontrol2.mp4']
    return render_template('movie_list.html', movies=movies)

templates/movie_list.html模板里的代码改成如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频展示</title>
</head>
<body>
{
   
   % for movie in movies %}
    <video width="400" height="300" controls="controls">
      <source src="static/movies/{
   
   {movie}}" type="video/mp4" />
    </video>
{
   
   % endfor %}
</body>
</html>

重启刷新后可以看到，四个视频都已经加载出来了
在这里插入图片描述
下一步我们再给视频增加一个标题，我们对movie数组的结构稍作修改，movie_list函数的代码修改如下

@web.route('/movieList')
def movie_list():
    movies = [{
   
   'file':'tetris.mp4','title':'俄罗斯方块'},
              {
   
   'file':'guess.mp4','title':'诗词填空'},
              {
   
   'file':'bfcontrol1.mp4','title':'pygame控件1'},
              {
   
   'file':'bfcontrol2.mp4','title':'pygame控件2'}]
    return render_template('movie_list.html', movies=movies)