当前位置： 首页 > news >正文

uni-app app端.m3u8类型流的播放

news 2026/2/10 19:13:34

1.开发环境：HBuilderX3.8.7、uni-app、vue2.0、view2.0、uni-ui
2.实现通过web-view 嵌入H5页面，进行视频流自动播放。
注意事项：
如果只是在android端可以直接使用.flv格式的视频流；
如果App需要支持ios就可以考虑一下播放.m3u8格式的视频流，本文主要写的是播放.m3u8格式的视频流；
如果直接在.vue文件通过flv.js的方式实现，由于uni-app封装问题，可能会遇到原生dom元素获取问题；
3.为什么使用web-view嵌入H5页面的方式呢？
H5中获取原生dom方便，通过flv.js实现在android端播放.flv格式的视频流
video标签可以直接播放.m3u8格式的视频流，经测试发现.m3u8格式的视频流android和ios都支持
4.具体实现
在.vue页面引入web-view⚠️如果是本地资源必须放在uni-app 项目根目录->hybrid->html文件夹下，或者static目录下，主要代码

<web-view src="/hybrid/html/video.html" :fullscreen="false"></web-view>

video.html文件

<video id="video-container" controls autoplay="autoplay" style="height: 500px;width: 100%;" src = "视频流的地址"></video>

完成上述内容，已经可以自动播放视频流
在ios端可能会出现弹出一个新的框播放视频流，可以通过给video 添加 x5-video-player-fullscreen=“true” x5-playsinline playsinline 属性，如果还不行，那就去上网搜搜吧，我的是通过这三个属性已经解决了问题

相关文章：

uni-app app端.m3u8类型流的播放

1.开发环境&#xff1a;HBuilderX3.8.7、uni-app、vue2.0、view2.0、uni-ui 2.实现通过web-view 嵌入H5页面&#xff0c;进行视频流自动播放。 注意事项&#xff1a; 如果只是在android端可以直接使用.flv格式的视频流&#xff1b; 如果App需要支持ios就可以考虑一下播放.m3u8格…...

编程日记 2023/9/3 16:18:38

使用proxy_pool来为爬虫程序自动更换代理IP | 开源IP代理

1. 前言 之前做爬虫的时候，经常会遇到对于一个网页，使用同一个IP多次会被禁掉IP的问题，我们可以自己手动更换代理IP再继续这个问题但多少会有点麻烦，我对于一个懒人来说，手动更换IP太麻烦，而且也不符合程序员懒惰的美德，于是便有了下面的故事。proxy_pool 是一个开源的代…...

编程日记 2023/9/3 16:17:37

【易售小程序项目】修改“我的”界面前端实现；查看、重新编辑、下架自己发布的商品【后端基于若依管理系统开发】

文章目录 “我的”界面修改效果界面实现界面整体代码 查看已发布商品界面效果商品数据表后端上架、下架商品ControllerMapper 界面整体代码back方法 编辑商品、商品发布、保存草稿后端商品校验方法Controller 页面整体代码 “我的”界面修改 效果 界面实现 界面的实现使用了一…...

编程日记 2023/9/3 16:16:36

Centos7 + Apache Ranger 2.4.0 部署

一、Ranger简介 Apache Ranger提供一个集中式安全管理框架, 并解决授权和审计。它可以对Hadoop生态的组件如HDFS、Yarn、Hive、Hbase等进行细粒度的数据访问控制。通过操作Ranger控制台,管理员可以轻松的通过配置策略来控制用户访问权限。 1、组件列表 # Service Name Liste…...

编程日记 2023/9/3 16:15:35

硬件SPI口扩展

在工控板设计中&#xff0c;经常会遇到扩展IO。具有相同的功能电路板接口相同&#xff0c;所以很容易采用排线方式连接到CPU主控板上&#xff0c;这种排线连接&#xff0c;我称之为总线。 现在的CPU引脚多&#xff0c;不扩展IO&#xff0c;使用模拟SPI&#xff0c;也可以实现&…...

编程日记 2023/9/3 16:14:33

【jsthree.js】全景vr看房进阶版

three小结&#xff1a; Scene场景 指包含了所有要渲染和呈现的三维对象、光源、相机以及其他相关元素的环境&#xff1b;场景可以被渲染引擎或图形库加载和处理&#xff0c;以生成最终的图像或动画 常见属性&#xff1a; scene.background new THREE.Color(0x000000); // …...

编程日记 2023/9/3 16:13:32

实战：基于卷积的MNIST手写体分类

前面实现了基于多层感知机的MNIST手写体识别&#xff0c;本章将实现以卷积神经网络完成的MNIST手写体识别。 1. 数据的准备 在本例中&#xff0c;依旧使用MNIST数据集&#xff0c;对这个数据集的数据和标签介绍&#xff0c;前面的章节已详细说明过了&#xff0c;相对于前面章…...

编程日记 2023/9/3 16:12:30

Ubuntu开启生成Core Dump的方法

C 文章目录 C1. 首先ulimit通过查看2. 执行下面的命令 Ubuntu下无法生成Core Dump解决方法 1. 首先ulimit通过查看 ulimit -a查看是core file size是否为0&#xff0c;若为0&#xff0c;通过以下方式设置size ulimit -c 1024或者 ulimit -c unlimited //size没有限制2. 执行…...

编程日记 2023/9/3 16:11:29

git视频教程Jenkins持续集成视频教程Git Gitlab Sonar教程

[TOC这里写自定义目录标题) https://edu.51cto.com/lesson/290903.html 欢迎使用Markdown编辑器 你好&#xff01; 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章&#xff0c;了解一下Markdown的基本语法知识。…...

编程日记 2023/9/3 16:10:26

机器学习：Xgboost

Xgboost XGBoost&#xff08;eXtreme Gradient Boosting&#xff09;是一种机器学习算法&#xff0c;是梯度提升决策树&#xff08;Gradient Boosting Decision Trees&#xff09;的一种优化实现。它是由陈天奇在2014年开发并推出的。XGBoost是一种强大而高效的算法&#xff0…...

编程日记 2023/9/3 16:09:26

《Kubernetes部署篇：Ubuntu20.04基于二进制安装安装cri-containerd-cni》

一、背景 由于客户网络处于专网环境下&#xff0c; 使用kubeadm工具安装K8S集群&#xff0c;由于无法连通互联网&#xff0c;所有无法使用apt工具安装kubeadm、kubelet、kubectl&#xff0c;当然你也可以使用apt-get工具在一台能够连通互联网环境的服务器上下载cri-tools、cont…...

编程日记 2023/9/3 16:08:25

[CISCN 2019初赛]Love Math

文章目录 前言考点解题过程 前言 感慨自己实力不够&#xff0c;心浮气躁根本做不来难题。难得这题对我还很有吸引力&#xff0c;也涉及很多知识。只能说我是受益匪浅&#xff0c;总的来说加油吧ctfer。 考点 利用php动态函数的特性利用php中的数学函数实现命令执行利用php7的特…...

编程日记 2023/9/3 16:07:24

运行命令出现错误 /bin/bash^M: bad interpreter: No such file or directory

在系统上运行一个 Linux 的命令的时候出现下面的错误信息&#xff1a; -bash: ./build.sh: /bin/bash^M: bad interpreter: No such file or directory 这个是在 Windows 作为 WSL 的时候出的错误。 原因和解决 出现问题的原因在于脚本在 Windows 中使用的回车换行和 Linux …...

编程日记 2023/9/3 16:06:23

码农重装系统后需要安装的软件

文章目录 前言1 编程软件1.1 IntelliJ IDEA1.2 Eclipse1.3 VSCode 2 Java 开发环境3 测试运维工具3.1 Docker3.2 VirtualBox3.2.1 windows3.2.2 centos 7 83.2.3 Alma Linux3.2.4 Rocky Linux3.2.5 ubuntu server3.2.6 统信 UOS 服务器操作系统V20&#xff08;免费使用授权&…...

编程日记 2023/9/3 16:05:22

Kotlin return 和 loop jump

再聊 return 在上一篇文章《Kotlin inline、noinline、crossinline 深入解析》 我们介绍到，在 lambda 中不能使用 return，除非该函数是 inline 的。如果该高阶函数是 inline ，调用该函数时，在传入的 lambda 中使用 return，则 return 的是离它最近的 enclosing function，…...

编程日记 2023/9/3 16:04:21

计算一组数据中的低中位数即如果一组数据中有两个中位数则较小的那个为低中位数statistics.median_low()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算一组数据中的低中位数 即如果一组数据中有两个中位数 则较小的那个为低中位数 statistics.median_low() 选择题 以下程序的运行结果是? import statistics data_1[1,2,3,4,5] data_2[1,2,…...

编程日记 2023/9/3 16:03:20

ChatGPT是否能够协助人们提高公共服务和社区建设能力？

ChatGPT可以协助人们提高公共服务和社区建设能力。公共服务是一个广泛的领域&#xff0c;包括教育、医疗、城市规划、紧急救援、环境保护等多个方面。ChatGPT作为一种人工智能工具&#xff0c;具有巨大的潜力&#xff0c;可以在各个领域提供支持和增强决策制定、信息获取、沟通…...

编程日记 2023/9/3 16:02:19

机器人中的数值优化（七）——修正阻尼牛顿法

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…...

编程日记 2023/9/3 16:01:19

程序员自由创业周记#3：No1.作品

作息 如果不是热爱&#xff0c;很难解释为什么能早上6点自然醒后坐在电脑前除了吃饭一直敲代码到23点这个现象&#xff0c;而且还乐此不疲。 之前上班的时候生活就很规律&#xff0c;没想到失业后的生活比之前还要规律&#xff1b;记得还在上班的时候&#xff0c;每天7点半懒洋…...

编程日记 2023/9/3 16:00:17

固定资产制度怎么完善管理？

固定资产管理制度的完善管理可以从以下几个方面入手&#xff1a;　　建立完善的资产管理制度&#xff0c;可以及时掌握企业资产的信息状况&#xff0c;使资产管理更加明确&#xff0c;防止资产流失。　　加大固定资产监管力度&#xff0c;从配置资产、使用资产到处置资产进行全…...

编程日记 2023/9/3 15:59:16

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

编程新知 2025/10/16 13:22:06

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2026/1/29 3:00:56

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

编程新知 2026/1/24 14:15:44

云原生安全实战：API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

编程新知 2026/2/1 6:24:16

毫米波雷达基础理论（3D+4D）

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

编程新知 2026/1/31 14:20:10