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

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

 1、下载插件

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

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

2、整理插件

     HLSPlayer文件夹结构图

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

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

    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,使用的谷歌浏览器访问,下面图片是我这边的预览效果,点击播放就可以正常播放了。

HLSPlayer播放器预览

posted @ 2019-06-03 09:53  不出特产不出矿  阅读(2177)  评论(2编辑  收藏