该案例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. 靠谱的Pycharm安装详细教程

    如何在本机上下载和安装Pycharm,具体的教程如下: 1.首先去Pycharm官网,或者直接输入网址:http://www.jetbrains.com/pycharm/download/#secti ...

  2. 从零开始编写IntelliJ IDEA插件

    写Java代码的时候,经常会涉及到重复性的操作,这个时候就会想要是有这样一个插件就好了,如果是大家都会遇到的场景,IDE或许已经提供了,再不然也有可能有人编写了相关的插件.要是这个操作是你们的编码环境 ...

  3. 学习redis

    https://blog.csdn.net/xiaoyiyz/article/details/60613165 https://bbs.csdn.net/topics/392277304 https: ...

  4. 2020.2.19 restful的学习

    restful Api 设计要素 3-8 如何设计Restful Api 资源路径(url),HTTP动词,过滤信息(做分页),状态码,错误处理,返回结果    3-9    初始化运行参数 3-10 ...

  5. HBase查询速度慢原因排查

    问题:通过HBase访问服务在HBase中查询 ASSET_NORMAL 表速度很慢 如下,查询一条数据需要2.970s时间: 如下,统计总条数需要14.675s时间: HBase访问服务部署了3个节 ...

  6. VirtualBox安装Debian

    1.下载Debian的dvd1,按照http://www.jb51.net/os/85858.html网上教程安装Debian 1.1.我创建了20G的虚拟磁盘,分区的时候我分了3个区,2G交换空间, ...

  7. 【MAVEN】maven项目下载更新pom jar包速度慢 解决方案

    1·下载安装 最新版本的maven https://maven.apache.org/download.cgi 2·速度慢的主要原因是因为默认setting.xml里配置的国外的 maven 数据源 ...

  8. 「Luogu1901」发射站

    传送门 Luogu 解题思路 单调栈裸题,扫两遍处理出每个点左边第一个比他高的和右边第一个比他高的,然后模拟题意即可. 细节注意事项 咕咕咕. 参考代码 #include <algorithm& ...

  9. Python Download Image (python + requests + BeautifulSoup)

    环境准备 1 python + requests + BeautifulSoup 页面准备 主页面: http://www.netbian.com/dongman/ 图片伪地址: http://www ...

  10. C语言表结构（1）

    1.顺序表初始化实战: #include<stdio.h> #include<stdlib.h> #define OK 1 #define OVERFLOW 0 #define ...