该案例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. eslint检测规则中，括弧和函数名之间去掉空格的配置

    在.eslintrc.js中配置: // add your custom rules here rules: { // no space before function name "spac ...

  2. java中内部类的实例化

  3. LeetCode刷题--21.合并两个有序链表（简单）

    题目描述 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1 -> 2 -> 4 ,1 -> 3 -> 4 输出:1 ...

  4. scrapy 中没有 crawl 命令

    确保两点: 1.把爬虫.py 复制到 spider 文件夹里 如 执行 scrapy crawl demo.py (spiders 中就要有 demo.py 文件) 2.在项目文件夹内执行命令 在 s ...

  5. python之对象基础

    目录 面向对象 1. 面向过程编程的优缺点 2. 面向对象编程的优缺点 3. 类 类和函数的区别 什么是类 现实世界中先有对象,后有类 python中先有类,再有对象 对象 如何实例化一个对象 对象属 ...

  6. 以及Hibernate和Mybatis区别

    ORM框架? Object Relational Mapping,对象-关系映射. 项目中的业务实体有两种表现形式:对象和关系数据,即在内存中表现为对象,在数据库中表现为关系数据. 为什么需要ORM框 ...

  7. 【剑指Offer面试编程题】题目1389：变态跳台阶--九度OJ

    题目描述: 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 输入: 输入可能包含多个测试样例,对于每个测试案例, 输入包括一个整数n(1 ...

  8. python join 和setDaemon 简介

    Python多线程编程时,经常会用到join()和setDaemon()方法 1.join ()方法:主线程A中,创建了子线程B,并且在主线程A中调用了B.join(),那么,主线程A会在调用的地方等 ...

  9. os期末复习

    登记之后会发生两个变化:读者数增加(v操作).座位数减少(p操作) 注销之后会发生的变化:读者数减少(p操作).座位数增加(v操作) 必须要清楚释放的是甚麽,以及申请的是甚麽资源(在具体的题目当中) ...

  10. Day9 - D - Piggy-Bank POJ - 1384

    Before ACM can do anything, a budget must be prepared and the necessary financial support obtained. ...