青岛鲁icp 网站制作 牛商网,鲁谷网站建设,wordpress实例教程,老k频道网站入口streamlit学习-如何播放HLS视频 一.效果二.直播环境搭建(仅供演示)1.生成m3u82.搭建http服务器(支持跨域)3.验证hls(VLC播放 http://localhost:8000/playlist.m3u8) 三.streamlit demo 本文演示了streamlit如何实现hls直播[streamlit中嵌入html] 一.效果 二.直播环境搭建(仅供演… streamlit学习-如何播放HLS视频 一.效果二.直播环境搭建(仅供演示)1.生成m3u82.搭建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.m3u82.搭建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
srvserver(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(layoutcentered,page_titleHLS播放,page_icon:shark:)st.write(演示HLS播放)html_content
html
headmeta charsetutf-8style.video-js {width: 100%;height: 100%;}/stylescript srchttps://unpkg.com/hls.js0.14.17/dist/hls.js/scriptbodyvideo idvideoPlayer controls classvideo-js/video/bodyscriptvar 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
/htmlcomponents.html(html_content,height400)st.button(按钮)
if __name__ __main__:main()