HTML5播放 M3U8的hls流地址

在HTML5页面上播放M3U8的hls流地址

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
    <video id="video" style="border: 1px solid red;" width="640" height="480" controls autoplay></video>

    <script>
        if (Hls.isSupported()) {
            var videoElement = document.getElementById('video');
            var hls = new Hls();
            hls.loadSource('http://220.161.87.62:8800/hls/0/index.m3u8'); // M3U8地址,根据实际情况修改
            hls.attachMedia(videoElement);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                videoElement.play();
            });
        }
    </script>
</body>
</html>

实现效果

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

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

相关文章

pdf格式的简历中的照片太小,如何修改图片的大小

问题描述&#xff1a;在使用一些在线版生成软件制作简历时&#xff0c;比如使用超级简历制作的简历存在着一个照片的尺寸比较小。如何去修改pdf中的证件照大小。 解决办法&#xff1a;使用一些在线编辑pdf的软件&#xff0c;比如我随便找了一个&#xff08;在线编辑pdf&#x…

云开发校园宿舍/企业/部门/物业故障报修小程序源码

微信小程序云开发校园宿舍企业单位部门物业报修小程序源码&#xff0c;这是一款云开发校园宿舍报修助手工具系统微信小程序源码&#xff0c;适用于学校机房、公司设备、物业管理以及其他团队后勤部&#xff0c;系统为简单云开发&#xff0c;不需要服务器域名即可部署&#xff0…

CentOS 挂载新磁盘以及磁盘扩容操作教程

1.搭载新加磁盘 # 查看磁盘 fdisk -l #新盘&#xff08;/dev/sdb&#xff09;创建分区 #虚拟机 fdisk /dev/sdb #阿里云 fdisk /dev/vdb #创建/dev/sdb1为新的PV&#xff08;物理卷&#xff09; 【创建物理卷命令】 #虚拟机 pvcreate /dev/sdb1 #阿里云 pvcreate /dev/vdb1 查…

竞赛选题 深度学习YOLOv5车辆颜色识别检测 - python opencv

文章目录 1 前言2 实现效果3 CNN卷积神经网络4 Yolov56 数据集处理及模型训练5 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习YOLOv5车辆颜色识别检测 ** 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0…

【Power BI】Power BI 入门指南:版本、下载和报表创建的步骤

文章目录 一、前言二、了解 Power BI 版本三、下载 Power BI Desktop四、如何开始使用 Power BI Desktop五、在 Power BI Desktop 中创建报表六、文末总结 一、前言 Power BI 是微软于 2013 年推出的产品&#xff0c;为一款商业智能与数据可视化工具。它通过引人注目的视觉效果…

如何开始使用 Kubernetes RBAC

基于角色的访问控制 (RBAC) 是一种用于定义用户帐户可以在 Kubernetes 集群中执行的操作的机制。启用 RBAC 可以降低与凭证盗窃和帐户接管相关的风险。向每个用户授予他们所需的最低权限集可以防止帐户拥有过多的特权。 大多数流行的 Kubernetes 发行版都从单个用户帐户开始,…

【每日一题】只出现一次的数字 II

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;位运算 写在最后 Tag 【位运算】【数组】【2023-10-15】 题目来源 137. 只出现一次的数字 II 题目解读 找出数组中仅出现一次的数字&#xff0c;其余数字仅出现三次。要求线性时间复杂度求解。 解题思路 本题的朴素…

C#之常见图形文件格式及其特点

部分内容来源于Microsoft相关文档&#xff01; 日常生活中和软件开发中&#xff0c;经常会用到图形文件格式&#xff1a; BMP BMP 是 Windows 用来存储与设备无关的图像和与应用程序无关的图像的标准格式。 给定 BMP 文件的每像素位数&#xff08;1、4、8、15、24、32 或 64…

NCV7724DQBR2G车规级半桥电机驱动芯片-专为汽车,工业自动化应用提供完美解决方案

车规级半桥电机驱动芯片是一种用于驱动直流电机的芯片&#xff0c;常用于电动汽车、电动自行车等领域。它可以控制电机的转速和方向&#xff0c;并且具有过流保护、过温保护等功能&#xff0c;可以保证电机的安全运行。 NCV7724DQBR2G是一款车规级八通道半桥驱动器&#xff0c;…

论文浅尝 | 深度神经网络的模型压缩

笔记整理&#xff1a;闵德海&#xff0c;东南大学硕士&#xff0c;研究方向为知识图谱 链接&#xff1a;https://arxiv.org/abs/1412.6550 动机 提高神经网络的深度通常可以提高网络性能&#xff0c;但它也使基于梯度的训练更加困难&#xff0c;因为更深的网络往往更加强的非线…

C# 图解教程 第5版 —— 第3章 C# 编程概述

文章目录 3.1 一个简单的 C# 程序&#xff08;*&#xff09;3.2 标识符3.3 关键字3.4 Main&#xff1a;程序的起始点&#xff08;*&#xff09;3.5 空白3.6 语句&#xff08;*&#xff09;3.7 从程序中输出文本3.7.1 Write&#xff08;*&#xff09;3.7.2 WriteLine&#xff08…

【Linux】:Linux环境与版本

以下哪个命令输出Linux内核的版本信息 A.uname -r B.vmstat C.sar D.stat uname -r 查看linux内核版本信息 vmstat 报告关于内核线程、虚拟内存、磁盘、陷阱和 CPU 活动的统计信息 sar 主要帮助我们掌握系统资源的使用情况&#xff0c;特别是内存和CPU的使用情况 stat 用于显示…

表单规定输入域的选项列表(html5新元素)

datalist datalist 元素规定输入域的选项列表。 datalist属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时&#xff0c;浏览器应该在该域中显示填写的选项&#xff1a; 使用 input元素的列表属性与datalist元素绑定. 还有一定的搜索能力&…

vue2+elementUI,vue3+elementPlus解决form中的下拉列表回写显示id,不显示label

三个问题&#xff1a; 问题1&#xff1a;vue2elementui中form下的下拉列表回写&#xff0c;赋值之后会出现更改不了值的情况 问题2&#xff1a;表单中绑定的值是v-model‘form.father.son’ 这种多级响应不了&#xff0c;把这种多级改成单级 v-model‘form.son’ 就不会出现值…

机器人制作开源方案 | 棘轮小车

1. 运动功能说明 棘轮小车&#xff08;Ratchet Car&#xff09;是一种基于棘轮原理设计的小型车辆&#xff0c;它结合了棘轮机制和移动装置&#xff0c;用于特定的应用场景&#xff0c;这种设计使得小车能够实现单向移动或防止逆向移动。棘轮小车的主要特点包括&#xff1a; …

微信小程序 ——入门介绍及简单的小程序编写

14天阅读挑战赛自己决定的事情&#xff0c;就要不动声色的一往直前&#xff01; 目录 一、小程序入门 1.1 什么是小程序 1.2 小程序的优点 1.3 小程序注册 1.4 安装开发工具 1.5 创建第一个小程序 二、小程序目录结构及入门案例 2.1 目录结构 2.2 入门案例 2.2.1 创建…

Vue封装组件并发布到npm仓库

1. 环境准备 因为我们此次封装的是Vue组件&#xff0c;所以我们直接在Vue脚手架项目里面进行封装即可。 &#xff08;1&#xff09;初始化Vue项目 vue create lin-vue &#xff08;2&#xff09;运行项目 npm run serve 2. 组件封装 新建src/components文件夹 因为我们可…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件&#xff0c;旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能&#xff1a; PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题&#xff0c;如缺失字体、图像分辨率低、颜色空…

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性&#xff0c;可以使用各种各样的这些工具来协助完成任务&#xff0c;从任务跟踪和调度&#xff0c;到项目报告&#xff0c;到版本控制和协作。 项目经理对软件项目的整体成…

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名&#xff0c;首先&#xff0c;我们看一下什么是数字签名&#xff01; 数字签名 数字签名是公钥密码学中的一种技术&#xff0c;用于验证信息的完整性和发送者的身份。简而言之&#xff0c;数字签名是一种确认信息来源和信息完整性的手段。它通…