M3U8地址在谷歌瀏覽器中播放

本文轉載自查看原文 2019-06-03 09:53 2162 網絡串流播放/ M3U8/ 網絡串流/ 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播放器預覽

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 在瀏覽器上播放m3u8視頻谷歌瀏覽器視頻播放倍數谷歌瀏覽器RTSP 流在線播放 HTML中的Flash播放器播放M3U8格式的視頻 winform中打開谷歌瀏覽器谷歌瀏覽器中安裝JsonView擴展程序播放語音，支持谷歌瀏覽器自動播放 Video標簽播放視頻？谷歌瀏覽器？safari?? 谷歌瀏覽器播放不了mp4格式的視頻的原因【谷歌瀏覽器】【谷歌地球】【Adobe 軟件】離線安裝包的下載地址谷歌瀏覽器安裝jsonview