本文已参与[新人创作礼]活动， 一起开启掘金创作之路。
前言
国庆节快到了，在这里祝大家节日快乐
长假七天乐确实很爽，只是疫情不稳定，还是呆在家里安全些，
在这宅在家的七天里，何不找点有趣的小demo耍耍
本期教大家制作一个 能播放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?&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Pcontent_id=&Provider_id=&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&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Fsv_filetype=1&Fsv_ctype=LIVES&Fsv_cid=0&Fsv_chan_hls_se_idx=188&Fsv_rate_id=0&Fsv_SV_PARAM1=0&Fsv_ShiftEnable=0&Fsv_ShiftTsp=0&Provider_id=&Pcontent_id=&Fsv&_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&pamid=001 敩大愛2台_53敩 http://iptv.52qdg.com/iptv.php?id=tw&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?&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Pcontent_id=&Provider_id=&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&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?&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Fsv_filetype=1&Fsv_ctype=LIVES&Fsv_cid=0&Fsv_chan_hls_se_idx=12&Fsv_rate_id=0&Fsv_SV_PARAM1=0&Fsv_ShiftEnable=0&Fsv_ShiftTsp=0&Provider_id=&Pcontent_id=&Fsv_CMSID=&Fsv_otype=1
敩翡翠综合_68敩 http://116.199.5.52:8114/00000000/index.m3u8?&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Fsv_filetype=1&Fsv_ctype=LIVES&Fsv_cid=0&Fsv_chan_hls_se_idx=188&Fsv_rate_id=0&Fsv_SV_PARAM1=0&Fsv_ShiftEnable=0&Fsv_ShiftTsp=0&Provider_id=&Pcontent_id=&Fsv&_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&pamid=003 敩中天新闻_78敩 http://104.250.154.42:8080/ZZ_zhongtiannews/ZZ_zhongtiannews.m3u8 敩中天新闻_79敩 http://iptv.52qdg.com/iptv.php?id=tw&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&pamid=005 敩中天娱乐_83敩 http://iptv.52qdg.com/iptv.php?id=tw&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?&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?&Fsv_ctype=LIVES&Fsv_otype=1&FvSeid=5abd1660af1babb4&Fsv_filetype=1&Fsv_ctype=LIVES&Fsv_cid=0&Fsv_chan_hls_se_idx=202&Fsv_rate_id=0&Fsv_SV_PARAM1=0&Fsv_ShiftEnable=0&Fsv_ShiftTsp=0&Provider_id=&Pcontent_id=&Fsv_CMSID=&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/milenio_center_512k@51752.m3u8
敩音乐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>
是的，两年前的我甚至不会把数据保存到js中
傻傻的丢在div里面，傻傻的把div隐藏了起来
最后居然傻傻的去切割字符串成数组
沃德天，果然兴趣是最好的老师，野路子有够猛
然后小demo里面
用到了一些字体图标
还有一些图片
当然，这些素材没有都无伤大雅
