该案例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. ClientAbortException: java.io.IOException: 您的主机中的软件中止了一个已建立的连接。，进不了Debug，访问不到方法

    开发项目的时候运行报错,Debug进不去方法,猜想是js中ajax的url 路径的问题,后来找公司的斌哥解决了问题,感谢! 异常: 解决过程: 清理缓存,修改js代码,通过浏览器的F12查看,发现修改 ...

  2. angular 自定义服务封装自定义http请求

    在angular中将http请求,放置在一起封装成服务,可减少代码重复,方便使用 var ngpohttprest = angular.module('ngpohttprest', []); ngpo ...

  3. Day11 - J - Brave Game HDU - 1846

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻.今天,大家选择上 ...

  4. Android开发_*.R文件无法自动生成

    问题描述:             今天是我决定专注Android开发的第一天,我在网上下载了一个数独游戏的源码,准备开始着手学习.在导入之后出现Java文件中import *.R文件报错,在gen目 ...

  5. PaperReading20200226

    CanChen ggchen@mail.ustc.edu.cn   To share or not share Motivation: With the publiaction of NAS101, ...

  6. 【剑指Offer面试编程题】题目1368：二叉树中和为某一值的路径--九度OJ

    题目描述: 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. 输入: 每个测试案例包括n+1行: 第一行为2 ...

  7. 三、多线程基础-自旋_AQS_多线程上下文

    1. 自旋理解    很多synchronized里面的代码只是一些很简单的代码,执行时间非常快,此时等待的线程都加锁可能是一种不太值得的操作,因为线程阻塞涉及到用户态和内核态切换的问题.既然sync ...

  8. ExpandableListActivity的基本使用方法 ，SimpleExpandableListAdapter的基本使用方法

    activity_main.xml: <ExpandableListView android:id="@id/android:list" android:layout_wid ...

  9. Flask与Django哪个更好更实用呢？砖家是这么认为的

        这一周我打算做一个 Flask 教程.本文先把 Flask 和 Django 做一个比对,因为我对这两个 Python Web 框架都有实际的开发经验.希望我可以帮助您选择学习哪个框架,因为学 ...

  10. GitHub fork 合作开发 - 快速实现版

    目录 一 预备条件 二 fork项目 三 将项目clone到本地 四 push代码到自己的仓库 五 通过pull request提交代码 六 通过本地配置upstream来同步更新主repo的内容 七 ...