视频m3u8形式播放 -- python and html

hls

hls官网地址

创建项目

ts为视频片段

m3u8文件内容

html

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
  </head>
  <body>
    hello
    <video id="video" controls></video>
    <script>
      if (Hls.isSupported()) {
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          console.log('video and hls.js are now bound together !');
        });
        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
          console.log(
            'manifest loaded, found ' + data.levels.length + ' quality level',
          );
        });
        hls.loadSource('/static/00001.m3u8');
        // bind them together
        hls.attachMedia(video);
      }
    </script>
  </body>
</html>

app.py

py 复制代码
from flask import Flask,render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(debug=True,port=5000)
相关推荐
愚公搬代码6 分钟前
【愚公系列】《Python网络爬虫从入门到精通》055-Scrapy_Redis分布式爬虫(安装Redis数据库)
数据库·爬虫·python
浅浅28028 分钟前
numpy、pandas内存优化操作整理
数据结构·经验分享·python·学习·性能优化·numpy·pandas
拓端研究室TRL1 小时前
Python+AI提示词比特币数据预测:Logistic逻辑回归、SVC及XGB特征工程优化实践
开发语言·人工智能·python·算法·逻辑回归
就叫飞六吧1 小时前
Python自动化selenium-一直卡着不打开浏览器怎么办?
python·selenium·自动化
亚林瓜子1 小时前
AWS Elastic Beanstalk的部署Python Flask后端服务(Hello,World)
python·flask·aws·eb
weixin_307779131 小时前
实现AWS Step Function安全地请求企业内部API返回数据
开发语言·python·云计算·aws
zhangjipinggom2 小时前
怎么安装python3.5-以及怎么在这个环境下安装包
开发语言·python
格子先生Lab2 小时前
Java反射机制深度解析与应用案例
java·开发语言·python·反射
利刃之灵2 小时前
03-HTML常见元素
前端·html
听风吹等浪起2 小时前
基于html实现的课题随机点名
前端·html