用video.js和H5实现一个漂亮的收看M3U8直播的网站

2022年10月2日 346点热度 0人点赞 0条评论

本期教大家制作一个能播放M3U8直播源的在线电视台网站，

既能学到知识技术，又可以方便在家看看电视节目，直播节目，何乐而不为

以下是实现的效果图：

这个小demo完成时间快两年了，所以里面有一些m3u8直播地址用不了

而且直播源的地址经常崩，所以会出现视频播放不了的情况

有需要直接百度搜 m3u8电视直播

具体实现

m3u8 以及 video.js介绍

为什么要介绍这两个东西呢？

因为我们大部分的电视直播在网络上都是m3u8格式的

m3u8准确来说是一种索引文件，使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址，从而实现在线播放。

我不喜欢太过于术语的解释。

简单来讲，我们看到的直播都是服务器把视频切片，然后一段一段给你发过来，客户端自己处理，整成视频给我们看

这就是 m3u8

但是浏览器并不支持video直接播放m3u8格式的视频

所以我们需要video.js来帮助我们，把这些切片的音视频给整成可以看的东西

Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库

Video.js 可以自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器

咋解决这个问题呢，很简单，在html导入我们的video.js就可以了

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引用video.js -->
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
复制代码

引入之后呢，咋用？

在html标签上写上我们的元素,然后在js里面获取我们的播放器，

之后就可以自由用代码控制播放地址源，还有控制播放暂停等等功能

<video id="my-player" class="video-js" controls style="width: 800px;height: 500px;">
               <source src="http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8" type="application/x-mpegURL">
               <p class="vjs-no-js">not support</p>
           </video>  
复制代码

// video.js
    var player = videojs('my-player', {
        
        });

function play_show(TV_m3u8){
        // alert("正在播放:"+TV_m3u8);
        document.getElementById("my_vedio_fixed").style.display="block";
    
        player.src([{
                type: "application/x-mpegURL",
                src: TV_m3u8
            }])
            player.play()
    }
复制代码

具体学习video.js可以去 GitHub上去看

传送门：GitHub - 视频.js：视频.js - 开源HTML5视频播放器)

看不懂英文，右键翻译成中文就可以

以上的代码，我只是粗略的从我写的小demo中抓取出来，完整代码在下方。

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引用video.js -->
    <link href="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video-js.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/video.js/5.18.4/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></script>
    <title>kk电视直播</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        }
        /* 简单css实现瀑布流 */
        .masonry{
            column-count: 4;
            column-gap: 0;
        }
        .item{
            /* padding: 5px;  padding会撑开盒子，改margin*/
            margin: 5px;
            position: relative;
            float: left;
        }
        .item img{
            display: block;
            width: 100%;
            height: auto;
           border-radius: 20px;    
        }
        /* 遮罩 */
        .test{
            position: absolute;
            height: 100%;
            width: 100%;
            border-radius: 20px; 
            background: rgba(0, 0, 0,0.3) url(./img/play.png) no-repeat center;
            display: none;
        }
        .item:hover .test{
           display: block;
           cursor: pointer;
        }

/* 字体引入 */
        @font-face {
  font-family: 'icomoon';
  src:  url('./icomoon/fonts/icomoon.eot?iog1hg');
  src:  url('./icomoon/fonts/icomoon.eot?iog1hg#iefix') format('embedded-opentype'),
    url('./icomoon/fonts/icomoon.ttf?iog1hg') format('truetype'),
    url('./icomoon/fonts/icomoon.woff?iog1hg') format('woff'),
    url('./icomoon/fonts/icomoon.svg?iog1hg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* 电视台信息 */
.imformation{
    width: 100%;
    height: 35px;
    position: absolute;
    bottom: 0;
    background-color: rgba(61, 60, 60, 0.425);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.tv_name{
    line-height: 35px;
    font-size: medium;
    color: rgb(255, 255, 255);
    font-family: KaiTi;
    font-weight: 700;
    float: left;
    margin-left: 20px;
    text-shadow: 3px 3px 3px #9a9b62;
}
.free_style{
     line-height: 35px;
     float: right;
     margin-right: 20px;
     font-family: 'icomoon';
     font-size: medium;
     color: rgb(252, 214, 46) ;
}


/* 子绝父相改版----子绝父固 */
.my_vedio_fixed{
    display: none;
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: rgba(129, 213, 224, 0.466) ;
    
}
.my_vedio_absolute{
    position: absolute;
    width: 100%;
    height: 100%; 
    top: 50%;
    left: 50%;
    margin-top: -230px;
    margin-left: -400px
}

.my_btn_hidden{
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: rgb(15, 15, 19);
    color: seashell;
    border-radius: 25px;
    left: 50%;
    margin-left: -25px;
    margin-top: 17px;
    font-family: 'icomoon';
    font-size: larger;
    
}

    </style>
</head>
<body>

    <div class="masonry" id="masonry">

          <div class="item" onclick="JavaScript:play_show()">
              <div class="test"></div>
              <img src="./img/9.png" alt="今天天气真不错">
              <div class="imformation">
                 <span class="tv_name">电视台</span>
                 <span class="free_style">    </span>
            </div>
          </div>


          <div class="item">
            <img src="./img/10.png" alt="">
        </div>
        <div class="item">
            <img src="./img/11.png" alt="">
        </div>
        <div class="item">
            <img src="./img/12.png" alt="">
        </div>
        <div class="item">
            <img src="./img/13.png" alt="">
        </div>
        <div class="item">
            <img src="./img/14.png" alt="">
        </div>
        <div class="item">
            <img src="./img/15.png" alt="">
        </div>
        <div class="item">
            <img src="./img/16.png" alt="">
        </div>

    </div>

    <div class="my_vedio_fixed" id="my_vedio_fixed">
        <button class="my_btn_hidden" onclick="JavaScript:vj_hiden()"></button>
        <div class="my_vedio_absolute" id="my_vedio_absolute" >
               <video id="my-player" class="video-js" controls style="width: 800px;height: 500px;">
               <source src="http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8" type="application/x-mpegURL">
               <p class="vjs-no-js">not support</p>
           </video>  
   </div>
   </div>

    <div style="display: none;" id="TV_Source">
        凤凰卫视资讯台敩http://112.17.40.140/PLTV/88888888/224/3221226491/index.m3u8敩韩国阿里郎敩http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8敩TVB明珠敩 http://116.199.5.52:8114/00000000/index.m3u8?&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Pcontent_id=&amp;Provider_id=&amp;Fsv_chan_hls_se_idx=12敩香港卫视敩http://zhibo.hkstv.tv/livestream/mutfysrq.flv敩阳光卫视敩http://121.31.30.90:8085/ysten-business/live/yangguangstv/yst.m3u8敩
        翡翠明珠敩http://116.199.5.52:8114/00000000/index.m3u8?敩翡翠综合敩http://116.199.5.52:8114/00000000/index.m3u8&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Fsv_filetype=1&amp;Fsv_ctype=LIVES&amp;Fsv_cid=0&amp;Fsv_chan_hls_se_idx=188&amp;Fsv_rate_id=0&amp;Fsv_SV_PARAM1=0&amp;Fsv_ShiftEnable=0&amp;Fsv_ShiftTsp=0&amp;Provider_id=&amp;Pcontent_id=&amp;Fsv&amp;_res_tag_=video敩耀才财经敩http://202.69.67.66:443/webcast/bshdlive-mobile/playlist.m3u8敩亚旅卫视敩
        http://hls.jingchangkan.tv/jingchangkan/156722438_0HaM/index.m3u8敩日本Japan News敩http://www.news24.jp/livestream/index.m3u8敩CGTN 国际频道敩http://live.cgtn.com/1000/prog_index.m3u8敩法国24台 (英语)敩http://f24hls-i.akamaihd.net/hls/live/221193-b/F24_EN_LO_HLS/master_900.m3u8敩
        西班牙中国环球敩http://livees.cgtn.com/1000e/prog_index.m3u8敩当红MTV敩http://unilivemtveu-lh.akamaihd.net/i/mtvno_1@346424/index_3500_av-b.m3u8敩WSVI-TV敩http://dcunilive30-lh.akamaihd.net/i/dclive_1@534251/master.m3u8?fluxustv.m3u8敩凤凰卫视资讯台敩 http://112.17.40.140/PLTV/88888888/224/3221226491/index.m3u8
        敩凤凰卫视资讯台敩 http://117.169.124.37:6610/ysten-businessmobile/live/fhzixun/1.m3u8 敩凤凰卫视中文台敩 http://117.169.124.37:6610/ysten-businessmobile/live/fhchinese/1.m3u8 敩凤凰卫视中文台敩 http://117.169.120.138:8080/live/fhchinese/index.m3u8 敩日本NHK华语敩 https://nhkw-zh-hlscomp.akamaized.net/8thz5iufork8wjip/playlist.m3u8
        敩日本天気预报敩 http://movie.mcas.jp/mcas/wn1_2/master.m3u8 敩俄罗斯RU音乐敩 http://rutv.gcdn.co/streams/1410_1272/720n/index.m3u8 敩韩国阿里郎_48敩 http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8 敩美国之音_49敩 https://voa-lh.akamaihd.net/i/voa_mpls_tvmc6@320298/index_0540_av-p.m3u8
        敩小品轮播_50敩 http://aldirect.rtmp.huya.com/huyalive/29106097-2689281338-11550375396453122048-2777038134-10057-A-0-1.m3u8 敩大愛1台_51敩 http://tv1.wanfudaluye.com/live/live.m3u8 敩大愛1台_52敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=001 敩大愛2台_53敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=002
        敩有线新闻_54敩 http://hk.tv0668.com/dl/hk520.php?id=31 敩无线新闻_55敩 http://hk.tv0668.com/dl/hk520.php?id=9 敩无线新闻_56敩 http://www.liveviptv.xyz/tv/tvb.php 敩无线新闻_57敩 http://www.liveviptv.xyz/tv/tvb.php?vid=wxxw 敩无线新闻_58敩 http://cczylive.chuangwanghulian.cn/live/zy_1531983996445.flv?auth_key=1593500458-57590819-0-3bc1f0bf55895038da448c64a71d09f1
        敩TVB翡翠_59敩 http://hk.tv0668.com/dl/hk520.php?id=1 敩TVB明珠_60敩 http://116.199.5.52:8114/00000000/index.m3u8?&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Pcontent_id=&amp;Provider_id=&amp;Fsv_chan_hls_se_idx=12 敩TVB明珠_61敩
        http://hk.tv0668.com/dl/hk520.php?id=13 敩TVB明珠_62敩 http://hk.tv0668.com/dl/hk520.php?id=12 敩TVB星河_63敩 http://tvbilive14-i.akamaihd.net/hls/live/496347/CXHMovie/CXHMovie-01.m3u8 敩凤凰香港_64敩 http://qlive.fengshows.cn/live720p/PHK.flv?txSecret=daefe6664bbeadcfb4ee2338a48d041c&amp;txTime=16f1ea41738
        敩香港卫视_65敩 http://zhibo.hkstv.tv/livestream/mutfysrq.flv 敩阳光卫视_66敩 http://121.31.30.90:8085/ysten-business/live/yangguangstv/yst.m3u8 敩翡翠明珠_67敩 http://116.199.5.52:8114/00000000/index.m3u8?&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Fsv_filetype=1&amp;Fsv_ctype=LIVES&amp;Fsv_cid=0&amp;Fsv_chan_hls_se_idx=12&amp;Fsv_rate_id=0&amp;Fsv_SV_PARAM1=0&amp;Fsv_ShiftEnable=0&amp;Fsv_ShiftTsp=0&amp;Provider_id=&amp;Pcontent_id=&amp;Fsv_CMSID=&amp;Fsv_otype=1
        敩翡翠综合_68敩 http://116.199.5.52:8114/00000000/index.m3u8?&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Fsv_filetype=1&amp;Fsv_ctype=LIVES&amp;Fsv_cid=0&amp;Fsv_chan_hls_se_idx=188&amp;Fsv_rate_id=0&amp;Fsv_SV_PARAM1=0&amp;Fsv_ShiftEnable=0&amp;Fsv_ShiftTsp=0&amp;Provider_id=&amp;Pcontent_id=&amp;Fsv&amp;_res_tag_=video
        敩耀才财经_69敩 http://202.69.67.66:443/webcast/bshdlive-mobile/playlist.m3u8 敩亚旅卫视_70敩 http://hls.jingchangkan.tv/jingchangkan/156722438_0HaM/index.m3u8 敩赛马频道_71敩 http://tvbilive11-i.akamaihd.net/hls/live/494672/CH88/CH88-01.m3u8 敩東森新聞_72敩 http://192.154.103.75:8080/ZZ_dongsenxinwen/ZZ_dongsenxinwen.m3u8
        敩東森新聞_73敩 http://104.250.154.42:8080/ZZ_dongsenxinwen/ZZ_dongsenxinwen.m3u8 敩東森新聞_74敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=003 敩中天新闻_78敩 http://104.250.154.42:8080/ZZ_zhongtiannews/ZZ_zhongtiannews.m3u8 敩中天新闻_79敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=004
        敩中天综合_80敩 http://104.250.154.42:8080/ZZ_zhongtianzonghe/ZZ_zhongtianzonghe.m3u8 敩中天综合_81敩 http://192.154.103.75:8080//ZZ_zhongtianzonghe/ZZ_zhongtianzonghe.m3u8 敩中天综合_82敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=005 敩中天娱乐_83敩 http://iptv.52qdg.com/iptv.php?id=tw&amp;pamid=006
        敩中天娱乐_84敩 http://192.154.103.75:8080//ZZ_zhongtianyule/ZZ_zhongtianyule.m3u8 敩中天娱乐_85敩 http://104.250.154.42:8080/ZZ_zhongtianyule/ZZ_zhongtianyule.m3u8 敩中視综合_86敩 http://192.154.103.75:8080//ZZ_zhongshi/ZZ_zhongshi.m3u8 敩中視综合_87敩 http://104.250.154.42:8080/ZZ_zhongshi/ZZ_zhongshi.m3u8
        敩华视综合_88敩 http://104.250.154.42:8080/ZZ_huashi/ZZ_huashi.m3u8 敩华视综合_89敩 http://192.154.103.75:8080//ZZ_huashi/ZZ_huashi.m3u8 敩年代新聞_90敩 http://192.154.103.75:8080/ZZ_niandaixinwen/ZZ_niandianxinwen.m3u8 敩年代新聞_91敩 http://104.250.154.42:8080/ZZ_niandaixinwen/ZZ_niandianxinwen.m3u8
        敩八大綜合_92敩 http://192.154.103.75:8080//ZZ_zhongtianyazhou/ZZ_zhongtianyazhou.m3u8 敩八大綜合_93敩 http://104.250.154.42:8080/ZZ_zhongtianyazhou/ZZ_zhongtianyazhou.m3u8 敩世纪综合_94敩 http://61.58.60.230:9319/live/49.m3u8 敩信吉電視_95敩 http://220.130.241.203:1935/sjtv/livestream/chunklist_w1048671923.m3u8
        敩信吉電視_96敩 http://220.130.241.203:1935/sjtv/livestream_360p/playlist.m3u8 敩人間衛視_97敩 http://54.64.23.79:1935/live/vod/playlist.m3u8 敩唯心衛視_98敩 http://mobile.ccdntech.com/transcoder/_definst_/vod164_Live/live/chunklist_w1177047531.m3u8 敩卫视卡视_99敩 http://iliketot.dyndns.tv/c8233976dbba4a06a101780907447375.m3u8?&amp;wmsAuthSign=c2VydmVyX3RpbWU9MTAvMjIvMjAxNyAxOjM2OjExIEFNJmhhc2hfdmFsdWU9T1lvZDZ5TjFaWk53M3J4OWZOTWtFUT09JnZhbGlkbWludXRlcz0yJmlkPW1jZ2x5bWFyfDc2MXxpcHR2aGVyb3wxNTA4NjM2MTcxfDIyMy4yMDUuMTIyLjE2Nw
        敩国家地理_100敩 http://104.250.154.42:8080/ZZ_hbo/ZZ_hbo.m3u8 敩百事通台_101敩 http://112.17.40.145/PLTV/88888888/224/3221226596/index.m3u8 敩MTV音乐_102敩 http://116.199.5.52:8114/00000000/index.m3u8?&amp;Fsv_ctype=LIVES&amp;Fsv_otype=1&amp;FvSeid=5abd1660af1babb4&amp;Fsv_filetype=1&amp;Fsv_ctype=LIVES&amp;Fsv_cid=0&amp;Fsv_chan_hls_se_idx=202&amp;Fsv_rate_id=0&amp;Fsv_SV_PARAM1=0&amp;Fsv_ShiftEnable=0&amp;Fsv_ShiftTsp=0&amp;Provider_id=&amp;Pcontent_id=&amp;Fsv_CMSID=&amp;Fsv_otype=1
        敩MTV音乐_103敩 http://unilivemtveu-lh.akamaihd.net/i/mtvno_1@346424/index_3500_av-b.m3u8 敩HBO2台_104敩 http://161.0.157.5/PLTV/88888888/224/3221227026/03.m3u8？fluxustv.m3u8 敩靖天歡樂_105敩 http://61.58.60.230:9319/live/201.m3u8 敩靖天咨询_106敩 http://61.58.60.230:9319/live/202.m3u8
        敩靖天娱乐_107敩 http://61.58.60.230:9319/live/204.m3u8 敩靖洋戏剧_108敩 http://61.58.60.230:9319/live/203.m3u8 敩靖天国际_109敩 http://61.58.60.230:9319/live/205.m3u8 敩靖洋卡通_110敩 http://61.58.60.230:9319/live/206.m3u8 敩靖洋卡通_111敩 http://61.58.60.230:9319/live/207.m3u8
        敩靖天映画_112敩 http://61.58.60.230:9319/live/244.m3u8 敩点掌财经_113敩 http://cclive2.aniu.tv/live/anzb.m3u8 敩宝贝第一_114敩 http://ms003.happytv.com.tw/live/F9YMztT5DcwWEr1f/index.m3u8 敩澳门卫视_115敩 http://hk.tv0668.com/dl/hk520.php?id=23 敩澳门卫视_116敩 http://stream.mastvnet.com/MSTV/SD/live.m3u8
        敩莲花卫视_117敩 http://live-rtmp.lotustv.duolaibo.cn/lotustv/5562e9e4d409d24c9600075c.m3u8 敩澳亚卫视_118敩 http://hk.tv0668.com/dl/hk520.php?id=24 敩澳亚卫视_119敩 http://stream.mastvnet.com/MASTV/sd/live.m3u8 敩澳亚卫视_120敩 http://stream.mastvnet.com/MSTV/playlist.m3u8
        敩日本NHK华语_121敩 https://nhkw-zh-hlscomp.akamaized.net/ixxemlzk1vqvy44o/playlist.m3u8 敩日本NHK英语_122敩 https://nhkwlive-ojp.akamaized.net/hls/live/2003459/nhkwlive-ojp/index_1M.m3u8 敩日本TBS NEWS_123敩 http://tbs1.media.ylive.jp/d6d710ed2c204b4cb9ffea55a16a5f40/ap-northeast-1/5690807595001/profile_0/chunklist.m3u8
        敩日本WOWO电影_124敩 http://192.240.127.34:1935/live/cs27.stream/media_1254.m3u8 敩日本Japan News 24_125敩 http://www.news24.jp/livestream/index.m3u8 敩日本WOWOW MOVIES (JPN|ENG)_126敩 http://192.240.127.34:1935/live/cs27.stream/playlist.m3u8 敩日本历史频道HD_127敩
        http://192.240.127.34:1935/live/cs14.stream/playlist.m3u8 敩日本历史频道HD_128敩 http://192.240.127.34:1935/live/cs14.stream/media_1254.m3u8 敩日本Family Gekijoファミリー劇場_129敩 http://192.240.127.34:1935/live/cs11.stream/playlist.m3u8 敩日本Family Gekijoファミリー劇場_130敩
        http://192.240.127.34:1935/live/cs11.stream/media_1254.m3u8 敩日本卫星剧场_131敩 http://192.240.127.34:1935/live/cs18.stream/playlist.m3u8 敩日本映画_132敩 http://192.240.127.34:1935/live/cs19.stream/playlist.m3u8 敩日本CINEMA 洋片_133敩 http://192.240.127.34:1935/live/cs27.stream/media_1254.m3u8
        敩日本JapanetChannelDX_134敩 http://bcsecurelivehls-i.akamaihd.net/hls/live/265320/5043843989001/140130JTDX/index_1200.m3u8 敩日本QVC_135敩 http://cdn-live1.qvc.jp/iPhone/800/800.m3u8 敩日本NHK_136敩 https://nhkworld.webcdn.stream.ne.jp/www11/nhkworld-tv/sycc-live/zh/domestic/playlist.m3u8
        敩日本NHK_137敩 https://nhkworld.webcdn.stream.ne.jp/www11/nhkworld-tv/global/263941/live_wa_s.m3u8 敩日本NHK_138敩 https://nhkworld.webcdn.stream.ne.jp/www11/nhkworld-tv/global/263941/live_wi_s.m3u8 敩日本QVC_139敩 http://cdn-live1.qvc.jp/iPhone/800/800.m3u8
        敩韩国EBS 第一频道_140敩 http://ebsonairios.ebs.co.kr/groundwavetablet500k/tablet500k/playlist.m3u8 敩韩国EBS 少儿频道_141敩 http://ebsonairios.ebs.co.kr/ebsutablet500k/tablet500k/playlist.m3u8 敩韩国KCTV_142敩 http://119.77.96.184:1935/chn21/chn21/chunklist_w252131137.m3u8
        敩韩国UBC SBS_143敩 http://59.25.202.81:1935/live/UBCstream/chunklist_w1495115977.m3u8 敩朝鲜中央台_144敩 http://119.77.96.184:1935/chn05/chn05/chunklist_w644291506.m3u8 敩韩国KOREA YTN_145敩 http://slive.sciencetv.kr:1935/science/yslive_20140419_1/playlist.m3u8
        敩韩国KTV 韩国电视_146敩 http://218.38.152.31:1935/klive/klive.stream/playlist.m3u8 敩韩国EBS 儿童频道_147敩 http://ebsonairios.ebs.co.kr/ebsutablet500k/_definst_/tablet500k/chunklist_w1965791004.m3u8 敩韩国YTN 联合新闻_148敩 http://ytnmmd.mmdlive.lldns.net/ytnmmd/9484b70302db4786886ae40308bf45a1/chunklist_b2592000.m3u8
        敩韩国阿里郎_149敩 http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch.smil/playlist.m3u8 敩韩国阿里郎_150敩 http://amdlive.ctnd.com.edgesuite.net/arirang_1ch/smil:arirang_1ch/master.m3u8 敩韩国EBS-E_151敩 http://58.229.187.11/plus3familypc/_definst_/familypc1m/chunklist_w426400414.m3u8
        敩韩国MBC MAX_152敩 http://63.237.48.3/ios/MBC_MAX/MBC_MAX.m3u8 敩BS 衛星劇場_153敩 http://192.240.127.34:1935/live/cs11.stream/play.m3u8 敩Family Gekijo_154敩 http://192.240.127.34:1935/live/cs11.stream/playlist.m3u8?wowzasessionid=2132394220 敩History_155敩
        http://192.240.127.34:1935/live/cs14.stream/playlist.m3u8?wowzasessionid=1203854395 敩Miao Mi TV_156敩 https://d3kw4vhbdpgtqk.cloudfront.net/hls/miaomipcweb/04.m3u8 敩TBS News Bird_157敩 http://tbs1.media.ylive.jp/d6d710ed2c204b4cb9ffea55a16a5f40/ap-northeast-1/5690807595001/profile_0/chunklist.m3u8
        敩KOREA YTN Science_158敩 http://slive.sciencetv.kr:1935/science/yslive_20140419_1/playlist.m3u8 敩Luxury World_159敩 http://nano.teleservice.su:8080/hls/luxury.m3u8 敩韩国BBS佛教广播_160敩 http://bbstv.clouducs.com:1935/bbstv-live/livestream/chunklist_w1403706733.m3u8
        敩CPAC_161敩 http://bcoveliveios-i.akamaihd.net/hls/live/248519/1242843915001_1/master.m3u8 敩BabyFirst_162敩 http://ms003.happytv.com.tw/live/F9YMztT5DcwWEr1f/index.m3u8 敩CGTN 国际频道_163敩 http://live.cgtn.com/1000/prog_index.m3u8 敩CGTN 记录频道_164敩 http://live.cgtn.com/1000d/prog_index.m3u8
        敩CGTN 法语频道_165敩 http://live.cgtn.com/1000f/prog_index.m3u8 敩中国环球_166敩 http://live.cgtn.com/1000/prog_index.m3u8 敩狗狗宠物_167敩 http://video.blivenyc.com/broadcast/prod/2061/22/file-3192k.m3u8 敩红牛运动_168敩 http://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_1660.m3u8
        敩法国时尚_169敩 http://lb.streaming.sk/fashiontv/stream/chunklist_w1702070444.m3u8 敩FOX 体育新闻_170敩 https://austchannel-live.akamaized.net/hls/live/2002736/austchannel-sport/master1280x720.m3u8 敩亚洲新闻_171敩 http://d2e1asnsl7br7b.cloudfront.net/7782e205e72f43aeb4a48ec97f66ebbe/index_4.m3u8
        敩亚洲新闻_172敩 https://d2e1asnsl7br7b.cloudfront.net/7782e205e72f43aeb4a48ec97f66ebbe/index_3.m3u8 敩朝阳频道_173敩 http://d11h6a6nhl9kj9.cloudfront.net/hls/suriactv/master02.m3u8 敩越南人民报_174敩 http://27.118.16.98:1935/live/truyenhinhnhandan720/chunklist_w2006762604.m3u8
        敩越南人民报_175敩 https://5952e4052a2e8.streamlock.net/live/smil:thienviet.smil/chunklist_w1106175008_b1544100_sleng.m3u8 敩印度音乐电视_176敩 http://104.237.60.234/live/gabruutv.m3u8?dsjtv.m3u8 敩法国中国环球_177敩 http://live.cgtn.com/1000f/prog_index.m3u8 敩法国第五世界台_178敩
        http://v3plusinfo247hls-i.akamaihd.net/hls/live/218877-b/v3plusinfo247hls/v3plusinfo247hls_1_1.m3u8 敩法国24台 (英语)_179敩 http://f24hls-i.akamaihd.net/hls/live/221193-b/F24_EN_LO_HLS/master_900.m3u8 敩法国24台 (法语)_180敩 http://f24hls-i.akamaihd.net/hls/live/221192/F24_FR_LO_HLS/master_900.m3u8
        敩阿拉伯中国环球_181敩 http://live.cgtn.com/1000a/prog_index.m3u8 敩俄罗斯军事频道_182敩 http://serv25.vintera.tv:8081/parad/patriot/playlist.m3u8 敩俄罗斯中国环球_183敩 http://live.cgtn.com/1000r/prog_index.m3u8 敩俄罗斯俄罗斯一台_184敩 http://a787201928-s26881.cdn.ngenix.net/hls/russia_hd/playlist_3.m3u8
        敩俄罗斯HD时尚频道_185敩 http://95.67.47.115/hls/hdfashion_ua_hi/index.m3u8 敩乌克兰M2 音乐频道_186敩 http://live.m2.tv/hls3/stream.m3u8 敩西班牙皇马足球_187敩 http://rmtv24hweblive-lh.akamaihd.net/i/rmtv24hwebes_1@300661/index_3_av-p.m3u8 敩西班牙中国环球_188敩 http://livees.cgtn.com/1000e/prog_index.m3u8
        敩西班牙盛兴电视台_189敩 https://mdslivehls-i.akamaihd.net/hls/live/571648/divinity/bitrate_4.m3u8 敩西班牙活力电视台_190敩 https://mdslivehlsb-i.akamaihd.net/hls/live/623617/energy/bitrate_3.m3u8 敩西班牙啵嘤卡通台_191敩 https://mdslivehlsb-i.akamaihd.net/hls/live/623616/boing/bitrate_3.m3u8
        敩意大利Rai高清_192敩 http://b2everyrai-lh.akamaihd.net/i/raigulp_1@66350/master.m3u8 敩意大利Rai少儿_193敩 http://b2everyrai-lh.akamaihd.net/i/raiyoyo_1@191405/master.m3u8 敩意大利Rai电影_194敩 http://b2everyrai-lh.akamaihd.net/i/raimovie_1@67348/master.m3u8 敩意大利电台_195敩
        http://radioitaliatv-lh.akamaihd.net/i/radioitaliatv_1@329645/index_720x480_av-p.m3u8 敩意大利V2 音乐频道_196敩 http://de1se01.v2beat.live/playlist.m3u8 敩墨西哥电视_197敩 http://bcoveliveios-i.akamaihd.net/hls/live/201661/57828478001/[email protected]
        敩音乐20TV_198敩 http://m2otv-lh.akamaihd.net/i/m2oTv_1@186074/index_600_av-p.m3u8 敩当红MTV_199敩 http://unilivemtveu-lh.akamaihd.net/i/mtvno_1@346424/index_3500_av-b.m3u8 敩WSVI-TV_200敩 http://dcunilive30-lh.akamaihd.net/i/dclive_1@534251/master.m3u8?fluxustv.m3u8
        敩红牛电视_201敩 http://rbmn-live.akamaized.net/hls/live/590964/BoRB-AT/master_1660.m3u8 敩NBC电视_202敩 http://161.0.157.51/PLTV/88888888/224/3221227040/index.m3u8?fluxustv.m3u8 敩Jewelry电视_203敩 http://wowzaprod134-i.akamaihd.net/hls/live/577814/ccddaf02/playlist.m3u8
        敩Free电视_204敩 https://edge.free-speech-tv-live.top.comcast.net/out/u/fstv.m3u8 敩Darcizzle电视_205敩 http://30a-tv.com/darcizzle.m3u8 敩Docurama电视_206敩 https://cinedigm.vo.llnwd.net/conssui/amagi_hls_data_xumo1234A-docuramaA/CDN/master.m3u8 敩Music电视_207敩
        https://cmctv.ios.internapcdn.net/cmctv_vitalstream_com/live_1/CMC-TV/master.m3u8?fluxustv.m3u8 敩CBS新闻_208敩 http://cbsnewshd-lh.akamaihd.net/i/CBSNHD_7@199302/master.m3u8 敩CON电视_209敩 https://cinedigm.vo.llnwd.net/conssui/amagi_hls_data_xumo123-contv/CDN/master.m3u8
        敩Dance电视_210敩 https://vcndstv.teleosmedia.com/stream/dstv/dstv/seglist_720p.m3u8
    </div>
</body>
<script>

    // video.js
    var player = videojs('my-player', {
        
        });

    // <div class="masonry" id="masonry">
    //      <div class="item" onclick="JavaScript:play_show()">
    //              <div class="test"></div>
    //              <img src="./img/9.png" alt="今天天气真不错">
    //              <div class="imformation">
    //              <span class="tv_name">电视台</span>
    //              <span class="free_style">    </span>
    //         </div>
    //       </div>
    // </div>
    // 目标：1、随机数生成图片路径。2、每个item有电视台名，点击后 显示播放器 切换电视台路径 播放。
    



    // 页面加载完成 1、通过js制作标签灌到masonry标签  
    window.onload=function(){
       var masonry = document.getElementById("masonry");
       var TV_Source=document.getElementById("TV_Source").innerText;
       //    console.log(TV_Source);
       var temp="";
       var arrTV=new Array();
       arrTV=TV_Source.split("敩");
    //    console.log("数组长度：" + arrTV.length);
       for(var i=0;i<arrTV.length;i=i+2){
            var rd= getRandom();
           temp+=`
           <div class="item" onclick="JavaScript:play_show('${arrTV[i+1]}')">
              <div class="test"></div>
              <img src="./img/${rd}.png" alt="今天天气真不错">
              <div class="imformation">
                 <span class="tv_name">${arrTV[i]}</span>
                 <span class="free_style">    </span>
            </div>
          </div>
           `;
       }
       masonry.innerHTML=temp;

    }



    // 随机数，用于随机生成图片路径
        function getRandom(){
        return Math.floor(Math.random()*(16-1+1)+1)
    }

    //item 的点击事件：点击后 显示播放器 切换电视台路径 播放。
    function play_show(TV_m3u8){
        // alert("正在播放:"+TV_m3u8);

        document.getElementById("my_vedio_fixed").style.display="block";
    
        
        player.src([{
                type: "application/x-mpegURL",
                src: TV_m3u8
            }])
            player.play()
    }
    //关闭视频---隐藏
    function vj_hiden() {
        document.getElementById("my_vedio_fixed").style.display="none";
    }
</script>
</html>
复制代码