HTML5播放 M3U8的hls流地址

news2024/11/26 22:23:08

在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.coloradmin.cn/o/1092646.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring6注解管理Bean

文章目录 过程搭建子模块spring6-ioc-annotation使用注解定义 BeanAutowired注入①场景一&#xff1a;属性注入②场景二&#xff1a;set注入③场景三&#xff1a;构造方法注入④场景四&#xff1a;形参上注入⑤场景五&#xff1a;只有一个构造函数&#xff0c;无注解⑥场景六 A…

Vue3 + Quasar系列-代码配置以及报错汇总记录(不断更新中)

1. Vue3 Quasar系列-代码配置打包去掉hash后缀 去掉hash https://quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa 2. Vue3 Quasar改变主题背景 quasar的样式和其他的框架修改不太一样&#xff0c;需要我们使用动态的方式来进行变更&#xff0c;一般来说有两…

计算机毕业设计 高校实习信息发布网站的设计与实现 Javaweb项目 Java实战项目 前后端分离 文档报告 代码讲解 安装调试

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…

宝塔使用腾讯COS存储实现自动备份服务器网站数据图文教程

一、进入宝塔安装腾讯COS 点击设置打开后需要配置以下cos参数 二、腾讯云创建COS存储桶 选择私有读写&#xff0c;其他默认就行 三、创建访问密钥 四、配置宝塔中腾讯COS相关设置 很多人是配置错误导致无法正常链接cos region为cos存储桶所属地域 Bucker为存储桶名称 五、…

力扣-461.汉明距离

Method 1 直接比较x&#xff0c;y二进制中的每一位&#xff0c;如果不同则cnt加一&#xff0c;并且x&#xff0c;y每次右移一位 class Solution { public:int hammingDistance(int x, int y) {int cnt 0;while(x > 0 && y > 0) {if((x & 1) ! (y & 1)…

MySQL 2023 MySQL Summit 大会感受,我们距离MySQL 新技术越来越远

开头还是介绍一下群&#xff0c;如果感兴趣PolarDB ,MongoDB ,MySQL ,PostgreSQL ,Redis, Oceanbase, Sql Server等有问题&#xff0c;有需求都可以加群&#xff0c;群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;…

2023.10.14 培训总结

培训内容 数字模型联合仿真及集成测试技术 MBSE(Model-Based-System-Engiaeering&#xff09; 参数化建模参数化仿真 产生的疑问 支持面向对象支持CAE CFD工具优化工具 飞机的业务功能 开发分布式架构 新技术 WSDL协议DDS 发布/订阅SAOPCORBA 明显开发者 Chris Garrett 美…

c# xml 参数配置表的使用

使用简介 实际使用界面 配置表管理界面 进入 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;…

挖机技术哪家强

挖机技术哪家强&#xff0c;中国山东找蓝翔&#xff0c;开挖机是我曾经的梦想&#xff0c;每个男人心中都有一台自己的挖机&#xff0c;近半年做的项目就是关于挖机销售CRM&ERP系统&#xff0c; 今天我们聊聊关于挖机的基本知识。 注&#xff1a;此文并非广告&#xff0c;…

Lua 协程

一、协程 Lua 中使用半协程的方式进行组织代码。 和线程的最大区别在于&#xff0c;一个多线程程序可以并行运行多个线程&#xff0c;而协程却需要彼此协作运行&#xff0c;即任意指定时刻只能一个协程运行&#xff0c;且只有当正在运行的协程显式地要求被挂起时&#xff0c;…

Net6 用imagesharp 实现跨平台图片处理并存入oss

项目要求&#xff1a;生成电子证书 一、模板文件在OSS中&#xff0c;直接加载 二、向模板文件添加二维码 三、向模板文件添加多行文字 四、生成二维码&#xff0c;存入本地&#xff0c; 五、向模板文件添加二维码 代码实现步骤 一、建立.net 6 API项目&#xff0c;安装N…

SpringBoot-黑马程序员-学习笔记(五)

74.自定义bean属性绑定以及第三方bean属性绑定 自定义bean属性绑定 1.自定义一个bean Data Component public class ServerConfig {private String ipAddress;private int port;private long timeout; } 2.在yml配置文件中中定义一组值 3.在bean中进行属性绑定 加上这个注…

【Linux】:Linux环境与版本

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

【从零开始学习Redis | 第二篇】Redis中的数据类型和相关命令

前言&#xff1a; Redis是一种快速、高效的开源内存数据库&#xff0c;被广泛用于构建各种类型的应用程序。其被设计成支持多种数据类型&#xff0c;这使得Redis在处理各种场景的数据存储和操作中非常灵活。Redis的数据类型提供了对不同数据结构的直接支持&#xff0c;包括字符…

并查集维护集合 ac240食物链

题目&#xff1a; 代码&#xff1a; #include<iostream> using namespace std; const int N50010; int p[N],d[N]; int n,m;int find(int x){if(p[x]!x){ int ufind(p[x]);d[x] d[p[x]];p[x]u;}return p[x]; }int main(){scanf("%d%d",&n,&m);fo…

Java设计模式之六大设计原则

为什么要学习设计模式&#xff1f; 要知道设计模式就是软件工程的方法经验的总结&#xff0c;也是可以认为是过去一段时间软件工程的一个最佳实践&#xff0c;要理解&#xff0c;不要死记硬背。掌握这些方法后&#xff0c;可以让你的程序获得以下好处&#xff1a; 代码重用性…

SpringCloud-Hystrix

一、介绍 &#xff08;1&#xff09;避免单个服务出现故障导致整个应用崩溃。 &#xff08;2&#xff09;服务降级&#xff1a;服务超时、服务异常、服务宕机时&#xff0c;执行定义好的方法。&#xff08;做别的&#xff09; &#xff08;3&#xff09;服务熔断&#xff1a;达…

学习记忆——题型篇——写作——记忆宫殿法

1&#xff0e;什么是数字记忆法? 答&#xff1a; 数字记忆就是把每一个数字转换成图片编码后再进行联想速记。 2&#xff0e;数字记忆法的用途有哪些&#xff1f; 答&#xff1a; 可以记忆学科知识&#xff0c;如地理、历史等所有学科或考试中的数据信息&#xff1b;可以速记生…

给ChuanhuChatGPT 配上讯飞星火spark大模型V2.0(一)

ChuanhuChatGPT 拥有多端、比较好看的Gradio界面&#xff0c;开发比较完整&#xff1b; 刚好讯飞星火非常大气&#xff0c;免费可以领取大概20w&#xff08;&#xff01;&#xff01;&#xff01;&#xff09;的token&#xff0c;这波必须不亏&#xff0c;整上。 重要参考&am…

中断机制-中断协商机制、中断方法

4.1 线程中断机制 4.1.1 从阿里蚂蚁金服面试题讲起 Java.lang.Thread下的三个方法: 4.1.2 什么是中断机制 首先&#xff0c;一个线程不应该由其他线程来强制中断或停止&#xff0c;而是应该由线程自己自行停止&#xff0c;自己来决定自己的命运&#xff0c;所以&#xff0c;…