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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/517510.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

还在使用 RESTful API ?试一试 GraphQL

前言 GraphQL 和 RESTful API 是两种不同的网络通信接口设计理念&#xff0c;它们都可以用于客户端和服务器之间的数据交换&#xff0c;但是有着不同的工作方式和特点。 各自的特点以及优缺点 GraphQL&#xff1a; 特点&#xff1a; 查询语言: GraphQL 是一个查询语言&…

喜讯丨宏电股份入选“深圳知名品牌(湾区知名品牌)”

3月5日&#xff0c;深圳知名品牌评价委员会公布第二十一届“深圳知名品牌”评审结果&#xff0c;宏电股份以在品牌知名度、市场占有率、诚信度等方面的优异成绩&#xff0c;成功入选“深圳知名品牌&#xff08;湾区知名品牌&#xff09;”。 深圳知名品牌&#xff08;湾区知名品…

Nginx启动服务

Nginx启动服务 一、启动前置 下载地址 如已安装Docker&#xff0c;下一步拉取Nginx最新的Docker镜像&#xff1a; docker pull nginx:latest查看拉取下来的镜像&#xff1a; docker images二、启动服务 创建Docker容器&#xff1a; docker run --name {projectname} -p 80…

校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序

项目描述&#xff1a; 校园小情书微信小程序源码 | 社区小程序前后端开源 | 校园表白墙交友小程序 功能介绍&#xff1a; 表白墙 卖舍友 步数旅行 步数排行榜 情侣脸 漫画脸 个人主页 私信 站内消息 今日话题 评论点赞收藏 服务器环境要求&#xff1a;PHP7.0 MySQL5.7 效果…

Java8 CompletableFuture异步编程-入门篇

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 前言 1、Future vs CompletableFuture 1.1 准备工作 1.2 Future 的局限性 …

vue ui Starting GUI 图形化配置web新项目

前言&#xff1a;在vue框架里面&#xff0c; 以往大家都是习惯用命令行 vue create 、vue init webpack创建新前端项目&#xff0c;而vue ui是一个可视化的图形界面&#xff0c;对于新手来说更加友好了&#xff0c;不但可以创建、管理、还可以更新vue项目&#xff0c;也可以下载…

学习Java的第三天

如何使用IDEA工具编写Java语言 上一节课已经讲过了&#xff0c;如何使用文本文档写出代码并在管理员控制台打印出来 接下来给大家分享的是使用IntelliJ IDEA工具 一、如何将IntelliJ IDEA设置成中文 1、点击右上角的图标&#xff0c;有人的图标会不一样&#xff0c;但位置是…

java SSM流浪宠物救助与领养myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM流浪宠物救助与领养管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系…

本地知识库搭建成功后,企业效率真的翻倍了

在如今这个快节奏的信息时代&#xff0c;对企业来说&#xff0c;拥有一套高效的知识管理系统早已不再是选项&#xff0c;而是必要。而本地知识库&#xff0c;它这个集信息存储、管理和查询于一体的平台&#xff0c;不仅改变了公司信息资源共享的方式&#xff0c;还帮助进一步提…

福派斯三文鱼猫粮的性价比怎么样?

亲爱的猫友们&#xff0c;你们是否也曾为挑选一款性价比高、适合自家猫咪的猫粮而犯愁呢&#xff1f;今天&#xff0c;就让我来给大家分享一下福派斯三文鱼猫粮的性价比如何吧&#xff01;&#x1f43e; 1️⃣ 首先&#xff0c;让我们从原料成分开始说起。福派斯三文鱼猫粮选用…

搭建拓扑图发送ARP及ICMP数据报文

文章目录 搭建拓扑图设备说明通过PC1 ping PC2小结&#xff1a;当arp表缓存过期&#xff0c;而mac学习表未过期当arp表缓存未过期&#xff0c;而mac学习表过期使用VLAN分割广播域 搭建拓扑图 设备说明 两台PC电脑 同理另外一台电脑也是同理配置 IP地址&#xff1a;192.168.1.…

html css 导航栏 2

鼠标划过会向上移动改变颜色 html文件 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>导航栏</title><link rel"stylesheet" href"css/dhl1.css" /></head><body><div …