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

streamlit学习-如何播放HLS视频

一.效果
二.直播环境搭建(仅供演示)
- 1.生成m3u8
- 2.搭建http服务器(支持跨域)
- 3.验证hls(VLC播放 http://localhost:8000/playlist.m3u8)
三.streamlit demo

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

一.效果

在这里插入图片描述

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

1.生成m3u8

ffmpeg.exe -i abc.mp4 -c:v libx264 -an -vbsf h264_mp4toannexb -f hls playlist.m3u8

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

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

import streamlit as st  #1.31.1
import os
import sys
import time
import streamlit.components.v1 as componentsdef 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/hls.js@0.14.17/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()