该案例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地址在谷歌浏览器中播放的更多相关文章

  1. FLASH轮播广告 在谷歌浏览器中不显示的解决办法（FLash轮播放广告在谷歌浏览器中无法显示处理方法）

    在用PHPWEB模板的时候,碰到首页有一个FLASH轮播广告,在IE浏览器下可以正常显示播放,在谷歌浏览器中却显示不了,解决办法如下: 欢迎转载:http://blog.csdn.net/aminfo ...

  2. asp.net 网页中播放 flash 和flv

    需求:在网页中播放powerpoint保存的pps文件和mp4文件 经过查阅:发现网页上直接播放pps文件比较麻烦(office web apps server),所以通过工具,将pps文件转换为sw ...

  3. 手机浏览器，微信中播放amr录音

    由于微信公众号开发中,临时素材只有三天的有效期,但是客户要求所有录音永久保存,永久素材数量又有限制,故只能把录音保存到服务器上.但是存到服务器上有一个问题,手机微信中无法直接播放amr录音.无意中发现 ...

  4. 【JsonView工具】谷歌浏览器中安装JsonView扩展程序

    接口测试过程中,有时候要查看接口返回的数据(比如Get接口),为了更方便的查看,发现这个插件挺好用的. 实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的j ...

  5. 谷歌浏览器中安装JsonView扩展程序

    实际开发工作中经常用到json数据,那么就会有这样一个需求:在谷歌浏览器中访问URL地址返回的json数据能否按照json格式展现出来. 比如,在谷歌浏览器中访问:http://jsonview.co ...

  6. 如何在HTML中播放flash

    随着html的风靡,改变了之前前端的许多条条框框,而video的出现使flash仿佛都要退出历史的舞台了,但是h5也会出现以下局限性,比如说,在一些不支持h5的浏览器上,此处省略一万只草泥马..... ...

  7. 原生js设置audio在谷歌浏览器自动播放

    https://www.cnblogs.com/sandraryan/ 谷歌浏览器更新后禁止了autoplay功能,但是有时候可能会需要自动播放. 研究了一段代码. <!DOCTYPE html ...

  8. 根据M3U8地址下载视频

     下面展示的是通过M3U8地址,把这个地址转为一个视频文件:只是一个基本案例,当然,有些下载的M3U8文件里面格式是不一样的,还有的是加过密的,道理都是一个道理. import java.io.Buf ...

  9. Windows Phone 如何在程序中播放提示声音？

    在Windows Phone 中播放提示音可以使用 Microsoft.Xna.Framework.Audio 命名空间下的 SoundEffect 类.具体使用方法如下: 1. 根据声音文件路径创建 ...

随机推荐

  1. Day11-G - Calendar Game HDU - 1079

    Adam and Eve enter this year’s ACM International Collegiate Programming Contest. Last night, they pl ...

  2. Python - ORM（数据库相关）

    1. 概念 目标:类/对象操作 -> SQL语句 -> DB API -> 再在数据库中执行.ORM做前两部,因为ORM本身无法操作数据库.参考:https://baike.baid ...

  3. ubuntu 14 双击会自动删除文本

    可能是ibus输入法引起,解决方法: Step1打开ibus首选项 $ibus-setup Step2 取消"Embed preedit text in application window ...

  4. 5.Nginx

    1.Nginx 安装 (1) 安装gcc (yum install gcc) 备注:可以输入gcc -v 查询版本信息,看系统是否自带安装 (2) 安装pcre (yum install pcre-d ...

  5. 嵊州普及Day6T3

    题意:n个点,对于q个询问,有t秒及一个矩形的范围.在此矩形内的数每秒加1,若等于c,则下一秒变为0. 思路:t可能很大,%c+1就可以了.然后一个一个加起来就可以了. 见代码: #include&l ...

  6. Python print（）函数

    #输出单个数据,会自动输出回车换行 print(1) print(2) #输出 1 2 #输出换行 print('\n') #防止换行 for x in range(0, 5): print(x, e ...

  7. Day1学习总结

    # 1.print()# 2.input()# 3.if:# elif# else#4.while循环#5.for i in range()#6.break.continue#7.import ran ...

  8. JAVA字符串与整形、浮点类型之间的相互转换总结

    1.字符串转化为整形.浮点类型 String s = "100"; //方法一 int a = Integer.parseInt(String s); Long.parseLong ...

  9. lambda表达式和for_each，find_if

    1 lambda表达式可以允许我传递任意可调用对象,必须要有捕获列表和函数体,标准形式是[捕获列表] (参数列表)->return tpye{函数体} 谓词:一元谓词指的是只能接受一个传入参数, ...

  10. Python集合语法

    a = {1,2,3,4,5,6,7,8,"aa","2"}    b = {2,3,4,5,6,7,8,9,99,7,6,6} v = a.intersect ...