M3U8地址在谷歌浏览器中播放

该案例git码云地址:https://gitee.com/kawhileonardfans/hls-player-example

1、下载插件

　　插件地址:https://files.cnblogs.com/files/kawhileonardfans/HLSPlayer.rar

　　也可以直接点击下载 : HLSPlayer.rar

2、整理插件

　　上面这张图，是我从上面下载插件地址下载下来的文件解压之后的目录结构。

　　我这边更换了如下几个文件：

　　　　1、images/start.jpg我换了一个图片，名称是start.png，换不换都可以哈。

　　　　2、HLSPlayer.swf我这边修改过，你不修改也一样；如果不修改在播放器的右下角有一个灰鲸的标识，我这里把这个标识去掉了；如果你也不想要灰鲸的标识，你在我最上面提供的该案例git码云地址中可以找到修改之后的文件。

　　　　3、demoHLS.html我修改过，内容如下：

<!doctype html>

<html>

<head>

<meta name="viewport"

    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />

<meta charset="utf-8">

<title>纯HLS(m3u8)</title>

</head>

<body>

    <!--HLSPlayer代码开始-->

    <div class="video" id="HLSPlayer">

        <SCRIPT LANGUAGE=JavaScript>

            /*

             * HLSPlayer参数应用=========================<br>

             * @Contact QQ:261532593

             * @param {Object} vID        ID

             * @param {Object} vWidth     播放器宽度设置

             * @param {Object} vHeight    播放器宽度设置

             * @param {Object} vPlayer    播放器文件

             * @param {Object} vHLSset    HLS配置

             * @param {Object} vPic       视频缩略图

             * @param {Object} vCssurl    移动端CSS应用文件

             * @param {Object} vHLSurl    HLS(m3u8)地址

             * ==========================================

             */

            var vID = "";

            var vWidth = "100%"; //播放器宽度设置

            var vHeight = 400; //播放器宽度设置

            var vPlayer = "HLSPlayer.swf?v=1.5"; //播放器文件

            var vHLSset = "HLS.swf"; //HLS配置

            var vPic = "images/start.png"; //视频缩略图

            var vCssurl = ""; //移动端CSS应用文件

            //HLS(m3u8)地址

            //http://video.fjhps.com/20171227/czJgar4S/index.m3u8

            var vHLSurl = "这是你们的M3U8地址，没有的自己去网上找一个也可以，如果你找不到，可以用上面注释的这个地址，这个地址在2019年6月19号还可以用，以后能不能用我这边不能确定。";

        </SCRIPT>

        <script type="text/javascript" src="js/hls.min.js?rand=20141217"></script>

    </div>

</body>

</html>

3、启动项目

　　我这边是放在Tomcat里面的(该案例必须放在web容器中才可以使用)，启动好的地址为:http://localhost:8080/HLSPlayer/demoHLS.html，使用的谷歌浏览器访问，下面图片是我这边的预览效果,点击播放就可以正常播放了。

M3U8地址在谷歌浏览器中播放的更多相关文章

FLASH轮播广告在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）
在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...
asp.net 网页中播放 flash 和flv
需求:在网页中播放powerpoint保存的pps文件和mp4文件经过查阅:发现网页上直接播放pps文件比较麻烦(office web apps server),所以通过工具,将pps文件转换为sw ...
手机浏览器，微信中播放amr录音
由于微信公众号开发中,临时素材只有三天的有效期,但是客户要求所有录音永久保存,永久素材数量又有限制,故只能把录音保存到服务器上.但是存到服务器上有一个问题,手机微信中无法直接播放amr录音.无意中发现 ...
【JsonView工具】谷歌浏览器中安装JsonView扩展程序
接口测试过程中,有时候要查看接口返回的数据(比如Get接口),为了更方便的查看,发现这个插件挺好用的. 实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的j ...
谷歌浏览器中安装JsonView扩展程序
实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的json数据能否按照json格式展现出来. 比如,在谷歌浏览器中访问:http://jsonview.co ...
如何在HTML中播放flash
随着html的风靡,改变了之前前端的许多条条框框,而video的出现使flash仿佛都要退出历史的舞台了,但是h5也会出现以下局限性,比如说,在一些不支持h5的浏览器上,此处省略一万只草泥马..... ...
原生js设置audio在谷歌浏览器自动播放
https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...
根据M3U8地址下载视频
下面展示的是通过M3U8地址,把这个地址转为一个视频文件:只是一个基本案例,当然,有些下载的M3U8文件里面格式是不一样的,还有的是加过密的,道理都是一个道理. import java.io.Buf ...
Windows Phone 如何在程序中播放提示声音？
在Windows Phone 中播放提示音可以使用 Microsoft.Xna.Framework.Audio 命名空间下的 SoundEffect 类.具体使用方法如下: 1. 根据声音文件路径创建 ...

随机推荐

RIFF
RIFF全称为资源互换文件格式(Resources Interchange File Format),是Windows下大部分多媒体文件遵循的一种文件结构. RIFF文件所包含的数据类型由该文件的扩展 ...
Day1-A-POJ-3295
由题意知,有5种操作,5个未知数,可0可1,一串操作问是否恒为1,最多100个字符,直接栈模拟所有情况即可代码如下: int p, q, r, s, t; bool calculate(string ...
redis集群在线迁移
地址规划主机名 ip地端口 redis01 10.0.0.10 6379.6380 redis02 10.0.0.60 6379.6380 redis03 10.0.0.61 6379.6380 ...
redis集群配置文件
bind xxx.xxx.xxx.xxx 绑定redis服务器网卡IP,默认为127.,即本地回环地址.这样的话,访问redis服务只能通过本机的客户端连接,而无法通过远程连接.如果bind选项为空的 ...
【剑指Offer面试编程题】题目1505：两个链表的第一个公共结点--九度OJ
题目描述: 输入两个链表,找出它们的第一个公共结点. 输入: 输入可能包含多个测试样例. 对于每个测试案例,输入的第一行为两个整数m和n(1<=m,n<=1000):代表将要输入的两个链表 ...
学习进度-16 python爬虫
爬虫是一个程序,这个程序的目的就是为了抓取万维网信息资源,比如你日常使用的谷歌等搜索引擎,搜索结果就全都依赖爬虫来定时获取从百度可以看出来爬虫与python关系很紧密, 爬虫的目标对象也很丰富,不 ...
IDEA配置数据库连接失败的问题
今天采用IDEA连接数据库失败了,有几个问题需要注意首先笔者采用的数据库版本为8.0.17而IDEA自带版本是5.2.26大概,于是首先出现的问题是驱动不匹配,那么就需要换成我自己的版本,配置如下 ...
hibernate中简单的增删改查
项目的整体结构如下 1.配置文件 hibernate.cfg.xml <!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hi ...
oracle随机生成时间
Julian Date定义 Julian Date:有效的日期范围是从公元前4713年1月1日到公元9999年12月31日.儒略日(julian date)是自公元前4713年1月1日中午12时起经过 ...
通过开源项目免费申请 IntelliJ IDEA license（激活码）
通过github开源项目免费申请 IntelliJ IDEA license(激活码) 我用来申请的github开源项目:https://github.com/Linliquan/springboot ...