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 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/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()
