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