A simple online television.在线解析和观看m3u直播源列表,也可以播放m3u8等格式的在线视频,简单易用,功能不断完善。
参数名 | 参数类型 | 默认值 | 参数说明 |
---|---|---|---|
url | string | 空 | 直播源列表文件的链接(m3u格式) |
playUrl | string | 空 | 在线视频的链接(m3u8、mp4等) |
//1、使用默认的直播源列表
https://tv.stackblog.cf
//2、使用自定义直播源列表
https://tv.stackblog.cf/?url=https://iptv-org.github.io/iptv/index.m3u
//3、直接播放在线视频
https://tv.stackblog.cf/?playUrl=http://dbiptv.sn.chinamobile.com/PLTV/88888888/224/3221226011/1.m3u8
注: 如果两个参数同时设置,只有playUrl有效
参数名 | 参数类型 | 默认值 | 参数说明 |
---|---|---|---|
selector | string | body | StackTV的选择器,需要设置宽高 |
autoPlay | boolean | true | 自动播放 |
autoPlayFirst | boolean | true | 自动播放节目列表的第一个节目(视频) |
default_url | string | - | 默认的播放链接 |
default_logo | string | - | 默认的节目(视频)封面 |
fetchTimeOut | int | 30000 | 请求远程节目列表文件超时,单位ms(毫秒) |
lazyLoadSize | int | 100 | 节目(视频)列表懒加载(防止远程节目列表过大导致页面渲染卡死) |
maxLog | int | 6 | 视频log的最大显示数目 |
showLog | boolean | true | 显示视频log |
showAbout | boolean | true | 显示StackTV介绍 |
controls | - | - | 视频控制按钮,详见下表 |
autoTheaterMode | boolean | true | 移动端自动影院模式 |
contorls参数 | 参数类型 | 默认值 | 参数说明 |
---|---|---|---|
playToggle | boolean | true | 播放/暂停 |
playPrev | boolean | true | 播放上一个 |
playNext | boolean | true | 播放下一个 |
volumePanel | boolean | true | 调节声音 |
theaterMode | boolean | true | 影院模式 |
fullScreen | boolean | true | 全屏 |
pictureInPicture | boolean | true | 画中画(小窗模式) |
- |
<link rel="stylesheet" href="./css/stacktv.css">
<style>
.container {
width: 100%;
height: calc(100vh - 6rem);
}
</style>
// $ASTV === AwesomeStackTV
const STACKTV = $ASTV({
selector: ".container",
autoPlay: true,
autoPlayFirst: true,
default_url: "https://vmcdn.stackblog.ml/video/simplestacktv_1.m3u8",
default_logo: "https://tv.stackblog.cf/img/logo.png",
fetchTimeOut: 30000,
lazyLoadSize: 20,
maxLog: 4,
showLog: true,
showAbout: false,
autoTheaterMode: true,
controls: {
playToggle: true,
playPrev: true,
playNext: true,
volumePanel: true,
fullScreen: true,
pictureInPicture: true,
timeProgress: true,
currentTime: true,
playRate: [0.5, 1, 1.5, 2],
audioTrack: true,
theaterMode: true
}
});
//使用1:解析和播放远程直播源列表文件
STACKTV.fetchM3U("https://iptv-org.github.io/iptv/index.m3u");
//使用2:直接播放视频链接
STACKTV.loadUrl("https://vmcdn.stackblog.ml/video/simplestacktv_1.m3u8");
<script src="js/hls.min.js"></script>
//hls.min.js是为了防止部分浏览器无法播放m3u8
<script src="js/stacktv.js"></script>
使用到的测试源: