前言
长假七天乐确实很爽，只是疫情不稳定，还是呆在家里安全些，
在这宅在家的七天里，何不找点有趣的小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"><<img src="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>" style="margin: auto" />
引入之后呢，咋用？
在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.jsvar 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上去看
看不懂英文，右键翻译成中文就可以
以上的代码，我只是粗略的从我写的小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"><<img src="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;" style="margin: auto" />
/* 字体引入 */@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.jsvar 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里面
用到了一些字体图标
还有一些图片
当然，这些素材没有都无伤大雅
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
![[附源码]Python计算机毕业设计高铁乘坐舒适性在线调查及评价系统Django（程序+LW）](https://img-blog.csdnimg.cn/97c6222bbc104f9683a9a9b2e3d7f79d.png)
