视频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)
相关推荐
m0_4902406735 分钟前
软件自动化测试(1):python+selenium自动化测试环境搭建
开发语言·python·selenium
橘猫云计算机设计1 小时前
基于ssm的食物营养成分数据分析平台设计与实现(源码+lw+部署文档+讲解),源码可白嫖!
后端·python·信息可视化·数据挖掘·数据分析·django·毕业设计
liuhaoran___2 小时前
计算机求职面试中高频出现的经典题目分类整理
python
不辉放弃3 小时前
零基础讲解pandas
开发语言·python
databook3 小时前
线性判别分析(LDA):降维与分类的完美结合
python·机器学习·scikit-learn
慕丹3 小时前
虫洞数观系列三 | 数据分析全链路实践:Pandas清洗统计 + Navicat可视化呈现
python·mysql·数据挖掘·数据分析·pandas
ZHW_AI课题组3 小时前
调用阿里云API实现运营商实名认证
python·阿里云·云计算·api
闲人编程3 小时前
图像插值算法(最近邻/双线性/立方卷积)
python·opencv·图像识别
创新技术阁4 小时前
FastAPI 的两大核心组件:Starlette 和 Pydantic 详解
后端·python
关山月4 小时前
被低估的服务器发送事件(SSE)
python