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

时间：2024-02-22 10:02:37

该案例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播放器预览

相关文章