在浏览器中播放m3u8

2023-11-06

我自己做了个简单的demo地址:https://github.com/onyas/vip-url-resolve,欢迎star或fork

在浏览器上播放m3u8的视频地址有两种方式:

  1. html的video标签的方式,这种方式播放很简单:
<!DOCTYPE hmtl>
<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
    <source src="http://stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>

<html>
<head>
<title>the5fire m3u8 test</title>
</head>
<body>
<video controls autoplay >
    <source src="http://stream.gravlab.net/003119/sparse/v1d30/posts/2014/barcelona/barcelona.m3u8">
</video>
</body>
</html>

上面的代码,你直接贴到一个index.html中,用safari浏览器打开就可以直接播了。

但是, 目前只能只有Safari支持,通用性并不好。因此还得采用flash来播放,也就下面的第二种方法。

  1. 通过开源的swfobject.js以及两个flash组件:OSMF和HLSProvider来播放,上代码:
<!DOCTYPE html>
<html>
<head>
<title>the5fire m3u8 test</title>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/swfobject.js"></script>
</head>
<body>
<div id="player">
</div>
<script>
    var flashvars = {
        // M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)         // escaped it for urls with ampersands         src: escape("http://www.the5fire.com/static/demos/diaosi.m3u8"),
        // url to OSMF HLS Plugin         plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
    };
    var params = {
        // self-explained parameters         allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };
    var attrs = {
        name: "player"
    };

    swfobject.embedSWF(
        // url to SMP player         "http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
        // div id where player will be place         "player",
        // width, height         "800", "485",
        // minimum flash player version required         "10.2",
        // other parameters         null, flashvars, params, attrs
    );
</script>
</body>
</html>

<html>
<head>
<title>the5fire m3u8 test</title>
<script src="http://the5fireblog.b0.upaiyun.com/staticfile/swfobject.js"></script>
</head>
<body>
<div id="player">
</div>
<script>
    var flashvars = {
        // M3U8 url, or any other url which compatible with SMP player (flv, mp4, f4m)         // escaped it for urls with ampersands         src: escape("http://www.the5fire.com/static/demos/diaosi.m3u8"),
        // url to OSMF HLS Plugin         plugin_m3u8: "http://www.the5fire.com/static/demos/swf/HLSProviderOSMF.swf",
    };
    var params = {
        // self-explained parameters         allowFullScreen: true,
        allowScriptAccess: "always",
        bgcolor: "#000000"
    };
    var attrs = {
        name: "player"
    };

    swfobject.embedSWF(
        // url to SMP player         "http://www.the5fire.com/static/demos/swf/StrobeMediaPlayback.swf",
        // div id where player will be place         "player",
        // width, height         "800", "485",
        // minimum flash player version required         "10.2",
        // other parameters         null, flashvars, params, attrs
    );
</script>
</body>
</html>

通过这三个东西的配合就可以播m3u8了,结果很简单,但是对于我这个对flash外行的人来说还是搜索尝试了良久的。这个代码通过浏览器访问文件的方式是不能用的,你得起一个web服务比如:python -m SimpleHTTPServer。然后访问你存的index.html就能工作了。

结果是不是很简单?不过在搜索的时候也找不到有人提供这样的方案,反而找到很多基于OSMF而开发的收费的flash播放器。基于这三个组件,

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在浏览器中播放m3u8 的相关文章

  • J2EE02 list(集合框架)

    目录 一 思维导图 编辑 二 list 集合的打印方式 三 list集合的特点 1 有序 2 元素可以重复 四 list的删除 五 list集合的 装箱 拆箱 一 思维导图 二 list 集合的打印方式 1 下标遍历for循环 2 fore
  • PDFBOX和ASPOSE.PDF

    一 aspose pdf 文档 https docs aspose com pdf java 1 按段落分段 docx文本按段分段 public static void main String args int i 1 try 打开文件流
  • 单元测试方法总结

    1 引言 应用系统的实施代码构建完成之后 并不代表项目已经结束 至少还有系统测试 部署以及性能调优等工作需要完成 测试的目的是检验开发结果是否满足规定需求 测试时保证软件质量的重要手段 是软件开发不可缺少的组成部分 虽然测试是一件乏味的工作
  • 关于Java调用dll的方法

    Java语言本身具有跨平台性 如果通过Java调用DLL的技术方便易用 使用Java开发前台界面可以更快速 也能带来跨平台性 Java调用C C 写好的DLL库时 由于基本数据类型不同 使用字节序列可能有差异 所以在参数传递过程中容易出现问
  • 集合框架集-List

    1 UML 统一建模语言 例如 类图 用例图等等 2 Collection接口 1 1 集合框架的顶级接口 1 2 是Set和List的父接口 1 3 但不是Map的父接口 集合中只能添加引用类型数据 Collection接口 是集合框架的
  • Java文档注释用法+JavaDoc的使用详解

    Java文档注释 JavaDoc的使用详解 简介 文档注释负责描述类 接口 方法 构造器 成员属性 可以被JDK提供的工具 javadoc 所解析 自动生成一套以网页文件形式体现该程序说明文档的注释 注意 文档注释必须写在类 接口 方法 构
  • HttpClient4 Post XML到一个服务器上

    现在网上介绍的HttpClient基本上全是3 x版本的内容 HttpClient4的API变化相对3已经变化很大 对HttpClient4做了简单的研究后 完成了一个HttpClient4 Post XML功能 对于POST方式 最先想到
  • 记录Java代码的执行时间

    方式1 public void testMenu1 M1 第一种是以毫秒为单位计算的 long startTime System currentTimeMillis 获取开始时间 Role r new Role r setId Long v
  • 架构师进阶之路

    选择的范围太广 可以读的书太多 往往容易无所适从 我想就我自己读过的技术书籍中挑选出来一些 按照学习的先后顺序 推荐给大家 特别是那些想不断提高自己技术水平的Java程序员们 一 Java编程入门类 对于没有Java编程经验的程序员要入门
  • Cpu运作原理与机制,那么CPU如何跑的更快?

    前言 代码都是由 CPU 跑起来的 我们代码写的好与坏就决定了 CPU 的执行效率 特别是在编写计算密集型的程序 更要注重 CPU 的执行效率 否则将会大大影响系统性能 CPU 内部嵌入了 CPU Cache 高速缓存 它的存储容量很小 但
  • 三英战SQL:解析NoSQL的可靠性及扩展操作

    摘要 NoSQL的高性能 易扩展及可靠性一直深受数据工作者的喜爱 然而对比传统关系型数据库NoSQL的优势究竟又在何处 Esen Sagynov在DZone上发布了一篇文章 从运行方面分析Cassandra HBase以及MongoDB产品
  • J2ee集合框架

    一 Collection接口 首先如图所见 Collection是整个集合框架的顶级接口 是Set和List的父接口 但不是Map的父接口 Map也是一个顶级接口 二 List集合的特点 总的来说学习框架就是为了学习容器的数据结构 增删改查
  • 遍历一个HashMap

    可以通过2种方法遍历HashMap Map map new HashMap for Iterator iter map entrySet iterator iter hasNext Map Entry entry Map Entry ite
  • 通过Hyperic-hq产品的基础包sigar.jar来实现服务器状态数据的获取

    通过Hyperic hq产品的基础包sigar jar来实现服务器状态数据的获取 Sigar jar包是通过本地方法来调用操作系统API来获取系统相关数据 Windows操作系统下Sigar jar依赖sigar amd64 winnt d
  • Web应用下实现定时任务简便方法

    在WEB应用下实现定时任务的简便方法 在web方式下 如果我们要实现定期执行某些任务的话 除了用quartz等第三方开源工具外 我们可以使用Timer和TimeTask来完成指定的定时任务 第一步 创建一个任务管理类 实现ServletCo
  • SpringBoot+SSM+MySQL整合项目演示(不涉及前后端交互)

    文章目录 准备工作 创建项目 图1 图2 图3 图4 工程目录 代码编写 数据库 pom文件修改 完整项目目录 User类 创建一个来接收查询出来数据的对象 UserMapper接口 UserMapper xml文件配置 Service层
  • Struts2 commons-fileupload 在上传2M以上文件出现异常解决方法

    在上传2M以上文件出现异常如下 APPNAME ERROR http 80 3 MultiPartRequest parse 130 org apache commons fileupload FileUploadBase SizeLimi
  • 用java.util.Timer定时执行任务

    用java util Timer定时执行任务 如果要在程序中定时执行任务 可以使用java util Timer这个类实现 使用Timer类需要一个继承了java util TimerTask的类 TimerTask是一个虚类 需要实现它的
  • struts2配置commons-fileupload的问题

    这个问题主要出现在上传文件时parseRequest 的值为空 原因是struts2的Filter拦截了 ServletFileUpload sfu new ServletFileUpload factory List fileList s
  • serverTimezone

    今天第一次写springboot的时候遇到了这个问题 页面一直刷新不出来 显示url有问题 后来发现在url后面加上 serverTimezone GMT即可 spring datasource url jdbc mysql 127 0 0

随机推荐

  • 安川伺服电机采用位脉冲+符号控制方式的接线与设置

    首先进行接线 国内家用电源是单向AC 220V 此处采用220V接法 接线如下 小编的接线如下 电源接线 编码器与电机电源接线 接线后开机 将Pn00B设置为0101 至此完成接线 2 安装驱动与SigmaWin 用miniUSB接口将伺服
  • 负数的逻辑非

    逻辑非的结果非0即1 所以 如果a 0 则 a 1 如果 则a 1 示例代码如下
  • C++实用案例:杨辉三角形

    前言 今天我们要讲的是 C 实用案例 杨辉三角形 这是一个简单又典型的递推算法的题目 一 理清思路 杨辉三角形是一个简单的数学模型 其中 最左侧的数和最右侧的数都是1 剩余的数是上面两数之和 每一行都比上一行多一个数 一次往下 如图 于是
  • JAVA java学习(21)——————java变量的作用域:静态变量、全局变量和局部变量

    变量的作用域规定了变量所能使用的范围 只有在作用域范围内变量才能被使用 根据变量声明地点的不同 变量的作用域也不同 根据作用域的不同 一般将变量分为不同的类型 成员变量和局部变量 成员变量 Java 的成员变量有两种 分别是全局变量和静态变
  • Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

    转载请注明地址http blog csdn net xiaanming article details 11171581 最近自己想研究下地图 本来想研究google Map 但是申请API key比较坑爹 于是从百度地图入手 其实他们的用
  • 服务器学习教程大纲

    服务器学习教程大纲 第一章 服务器基础 1 1 服务器概述 服务器的定义和作用 服务器的分类和发展趋势 1 2 服务器硬件基础 服务器硬件的基本组成和工作原理 服务器硬件的选择和配置 1 3 服务器软件基础 服务器软件的基本概念和分类 服务
  • 语音识别的技术原理是什么?

    https www zhihu com question 20398418
  • STL——空间配置器剖析(一级空间配置器、二级空间配置器的本质及运用场合,是如何用内存池去管理的)

    一级空间配置器 二级空间配置器的本质及运用场合 是如何用内存池去管理的 研究了好久才写好的 主要是二级配置器 大标题小标题什么的可能没有安排好 先 写了原理上的内容 再剖析了各个函数源码 各个目录可以看csdn自带的目录 如何使用空间配置器
  • 关于 SELECTPAGE 方法的使用

    源码 根据 entity 条件 查询全部记录 并翻页 param page 分页查询条件 可以为 RowBounds DEFAULT param queryWrapper 实体对象封装操作类 可以为 null p gt P selectPa
  • bash: 无法执行二进制文件: 可执行文件格式错误

    今天客户送来一台笔记本 说是 银河麒麟电脑 让我在这台电脑上跑程序 在工作机上 银河麒麟V10 发布了可执行程序 将可执行程序拷贝到这台笔记本上 双击执行无反应 在终端执行 提示 bash xxxxx 无法执行二进制文件 可执行文件格式错误
  • maven managed dependencies找不到maven管理依赖的原因及解决方法

    图一 图二 选择图二maven managed dependencies之后在图一那里没显示 原因 工程不是maven工程 解决方法1 重新用ecplise建个maven工程 然后把你的代码导入新工程 运行ok 解决方法2 添加maven支
  • springboot+prometheus+grafana实现应用监控和报警 - windows版

    Prometheus官网 https prometheus io docs introduction first steps Grafana官网 https grafana com docs grafana latest SpringBoo
  • 递归的学习

    递归学习 递归三大要素 第一 明确函数要干什么 第二 寻找递归结束的条件 第三 找出函数等价的关系式 递归求和 方法一 ls 1 2 3 4 5 def fun ls n if n 0 return ls n else s fun ls n
  • Java从入门到实战总结-3.5、Java网络编程

    Java从入门到实战总结 3 5 Java网络编程 文章目录 Java从入门到实战总结 3 5 Java网络编程 1 网络简述 1 什么是计算机网络 2 什么是计算机的IP地址 3 什么是网络中网站的域名 4 什么是计算机的端口号 5 什么
  • 2种指定包的类代码扫描及爬坑(主要是Reflections的问题点)

    一 Reflections maven
  • 自动驾驶仿真工具之CARLA简介

    大家好 我已经把CSDN上的博客迁移到了知乎上 欢迎大家在知乎关注我的专栏慢慢悠悠小马车 https zhuanlan zhihu com duangduangduang 希望大家可以多多交流 互相学习 自动驾驶算法的调试和效果评测首先要在
  • C++中常用字符串相关的编程题

    索引 找出字符串中的数字 字母和符号 并分别存储 找出字符串中所有不重复的字符 并输出 统计字符串中每个字符的个数 并输出 编译环境 以下所用的开发环境是vs2010 创建的都为控制台输出程序 下面只贴出创建项目后修改了的cpp文件 即主要
  • python的魔法函数

    一 介绍 在Python中 魔法函数是以双下划线 开头和结尾的特殊函数 它们在类定义中用于实现特定的行为 例如运算符重载 属性访问 迭代等 以下是一些常见的Python魔法函数 init 这是一个特殊的构造函数 在创建类的实例时自动调用 用
  • COOC软件一款用于文献计量和知识图谱绘制的新软件

    以前论文写作中做一个共现矩阵 二模矩阵 聚类图谱 词云图 邻接表 相异矩阵 同义词批量合并 研究热点追踪等分析需要一小时 一天 对于小白甚至需要一周 一个月 但是利用COOC这款软件 你会体会到什么叫方法比努力更重要 好的工具会让你事半功倍
  • 在浏览器中播放m3u8

    我自己做了个简单的demo地址 https github com onyas vip url resolve 欢迎star或fork 在浏览器上播放m3u8的视频地址有两种方式 html的video标签的方式 这种方式播放很简单