视频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)
相关推荐
唐叔在学习1 小时前
pip安装太慢?一键切换国内镜像源,速度飞起!
后端·python
Gz、1 小时前
Spring Boot 常用注解详解
spring boot·后端·python
起风了___2 小时前
Python 自动化下载夸克网盘分享文件:基于 Playwright 的完整实现(含登录态持久化与提取码处理)
后端·python
我是华为OD~HR~栗栗呀2 小时前
测试转C++开发面经(华为OD)
java·c++·后端·python·华为od·华为·面试
mldong2 小时前
保姆级教程!手把手教你搭建FastAPI + Vue3前后端分离项目
vue.js·python·全栈
Q_Q5110082853 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
妄小闲3 小时前
html网站源码 html网页模板下载
前端·html
小关会打代码3 小时前
关于Pycharm中在运行出现语法错误:Non-UTF-8 code starting with
ide·python·pycharm
用户3721574261353 小时前
Python 高效将 PDF 转换为 HTML 的实用指南
python
深栈3 小时前
机器学习:编码方式
人工智能·python·机器学习·编码