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

streamlit学习-如何播放HLS视频

• 一.效果
• 二.直播环境搭建(仅供演示)
• • 1.生成m3u8
  • 2.搭建http服务器(支持跨域)
  • 3.验证hls(VLC播放 http://localhost:8000/playlist.m3u8)
  • 三.streamlit index.php/tags-41973.html" >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 osimport sysimport http.serverimport socketserverclass 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 httpdsrv=server(8000)srv.serve_forever()

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

    三.streamlit demo

    import streamlit as st  #1.31.1import osimport sysimport timeimport streamlit.components.v1 as componentsdef main():    # 设置标题,图标等    st.set_page_config(layout="centered",page_,page_icon=":shark:")        st.write("演示HLS播放")    html_content='''                 .video-js {            width: 100%;            height: 100%;        }                                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();      });    }        '''    components.html(html_content,height=400)    st.button("按钮")if __name__ == "__main__":    main()