streamlit学习-如何播放HLS视频(streamlit嵌入html)

streamlit学习-如何播放HLS视频

本文演示了streamlit如何实现hls直播[streamlit中嵌入html]

一.效果

二.直播环境搭建(仅供演示)

1.生成m3u8

bash 复制代码
ffmpeg.exe -i abc.mp4 -c:v libx264 -an -vbsf h264_mp4toannexb -f hls playlist.m3u8

2.搭建http服务器(支持跨域)

python 复制代码
import os
import sys
import http.server
import socketserver
class HTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Access-Control-Allow-Origin', '*')
        self.send_header('Access-Control-Allow-Methods', 'GET,POST')
        self.send_header('Access-Control-Allow-Headers', 'x-requested-with,content-type')
        http.server.SimpleHTTPRequestHandler.end_headers(self)
def server(port):
    httpd = socketserver.TCPServer(('', port), HTTPRequestHandler)
    return httpd
srv=server(8000)
srv.serve_forever()

3.验证hls(VLC播放 http://localhost:8000/playlist.m3u8)

三.streamlit demo

python 复制代码
import streamlit as st  #1.31.1
import os
import sys
import time
import streamlit.components.v1 as components

def main():
    # 设置标题,图标等
    st.set_page_config(layout="centered",page_title="HLS播放",page_icon=":shark:")
    
    st.write("演示HLS播放")
    html_content='''
<html> 
<head>
    <meta charset="utf-8">
    <style>
        .video-js {
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://unpkg.com/[email protected]/dist/hls.js"></script>
    <body>
        <video id="videoPlayer" controls class="video-js"></video>
    </body>
    <script>
    var video = document.getElementById('videoPlayer');
    var hls = new Hls();
    if (Hls.isSupported()) {
      hls.loadSource('http://localhost:8000/playlist.m3u8');
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    }
    </script>
</html>
    '''
    components.html(html_content,height=400)
    st.button("按钮")
if __name__ == "__main__":
    main()
相关推荐
绵绵细雨中的乡音15 分钟前
Linux进程学习【基本认知】
linux·运维·学习
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
我爱吃朱肉1 小时前
纯HTMLCSS静态网站——元神
css·html
我的golang之路果然有问题2 小时前
快速了解redis,个人笔记
数据库·经验分享·redis·笔记·学习·缓存·内存
前端大白话3 小时前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
Angindem3 小时前
SpringClound 微服务分布式Nacos学习笔记
分布式·学习·微服务
热水养鲨鱼4 小时前
Java实现HTML转PDF(deepSeekAi->html->pdf)
人工智能·pdf·html
灏瀚星空4 小时前
Python在AI虚拟教学视频开发中的核心技术与前景展望
人工智能·python·音视频
虾球xz4 小时前
游戏引擎学习第244天: 完成异步纹理下载
c++·学习·游戏引擎
BOB-wangbaohai4 小时前
Flowable7.x学习笔记(十四)查看部署流程Bpmn2.0-xml
xml·笔记·学习