开篇寄语
伯衡君曾经介绍过如何通过一个GitHub项目，再结合一些相关的软件，就能收看到近万个全球电视台，具体可以参看下方的前情提要，伯衡君觉得不过瘾，不如自己做一个网页版的，轻松实现观看这些电视台，也就不用软件了，短短几行代码就能实现哦，虽然很简陋，但是能收看的节目和软件收看没差，分享给大家。
重大更新
伯衡君后来将该网站进行了优化，更加人性化，还有了明显的分类，也就是该项目的正式版本，具体可以参看这篇文章：
前情提要
演示地址
提供最原始的形态，有兴趣的朋友可以自行魔改哦。
设计思路
- 使用iptv-org的项目直播源，用正则表达式将m3u8的直播地址找出来
- 使用eyevinn这款js相关h5视频插件，支持m3u8的路径播放
- 之后将网页呈现出来就行了
源码内容
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="https://player.eyevinn.technology/v0.4.2/build/eyevinn-html-player.css">
</link>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<style>
body,
html {
background: #111111;
overflow-x:hidden;
}
#top-bar {
width: 100%;
height: 40px;
background: #111222;
}
#top-bar h2 {
color: #fff;
margin: 0 auto;
text-align: center;
top: 5px;
position: relative;
}
#player-wrapper {
margin-top: 10px;
}
#container li {
cursor: pointer;
color: #fff;
}
#container li:hover {
color: blueviolet;
}
</style>
<body>
<!-- Top Bar -->
<div id="top-bar">
<h2>Easy Web Tv</h2>
</div>
<!-- The element where the player will be placed -->
<div id="player-wrapper"></div>
<!-- The element where the channel list -->
<div id="lists">
<ul id="container"></ul>
</div>
<!-- Eyevinn HTML Player Javascript -->
<script src="https://player.eyevinn.technology/v0.4.2/build/eyevinn-html-player.js" type="text/javascript"></script>
<script>
$.ajax({
type: "GET",
url: ' https://iptv-org.github.io/iptv/index.country.m3u',
success: function (message, text, response) {
let str = message
let array = str.split(" ")
let links = array.filter(x => /[^h]+.m3u8/.test(x)).map(x => x.split("\n")).flat().filter(x => /[^h]+.m3u8/.test(x))
for (let i of links) {
$("#container").append("<li>" + i + "</li>")
}
}
})
//Initiate the player and when click channel to play it
document.addEventListener('DOMContentLoaded', function (event) {
setupEyevinnPlayer('player-wrapper', "https://5940924978228.streamlock.net/8157/8157/.m3u8").then(function (player) {
var muteOnStart = false;
player.play(muteOnStart);
});
$("#container").on('click', 'li', function () {
$("#player-wrapper").empty()
setupEyevinnPlayer('player-wrapper', $(this).text()).then(function (player) {
var muteOnStart = false;
player.play(muteOnStart);
});
});
});
</script>
</body>
</html>
以上源码似乎在移动端有瑕疵，伯衡君则换了一个插件，播放更加流畅，使用了videojs这个插件，源码如下：
<html lang="en">
<head>
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<style>
body,
html {
background: #111111;
overflow-x: hidden;
}
#top-bar {
width: 100%;
height: 40px;
background: #111222;
}
#top-bar h2 {
color: #fff;
margin: 0 auto;
text-align: center;
top: 5px;
position: relative;
}
#player-wrapper {
margin-top: 10px;
}
#my-video {
width: 90vw;
height: 600px;
margin: 0 auto;
margin-top: 10;
}
.video-js .vjs-big-play-button {
top: 50%;
left: 50%;
}
#container li {
cursor: pointer;
color: #fff;
}
#container li:hover {
color: blueviolet;
}
</style>
<body>
<!-- Top Bar -->
<div id="top-bar">
<h2>Easy Web Tv</h2>
</div>
<!-- The element where the player will be placed -->
<div id="player">
<video id="my-video" class="video-js" controls preload="auto" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="https://y5w8j4a9.ssl.hwcdn.net/andflixhd/tracks-v1a1/index.m3u8" type="application/x-mpegURL" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</div>
<!-- The element where the channel list -->
<div id="lists">
<ul id="container"></ul>
</div>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script>
$.ajax({
type: "GET",
url: ' https://iptv-org.github.io/iptv/index.country.m3u',
success: function(message, text, response) {
let str = message
let array = str.split(" ")
let links = array.filter(x => /[^h]+.m3u8/.test(x)).map(x => x.split("\n")).flat().filter(x => /[^h]+.m3u8/.test(x))
for (let i of links) {
$("#container").append("<li>" + i + "</li>")
}
}
})
//Click channel to play it
$("#container").on('click', 'li', function() {
var player = videojs(document.querySelector('.video-js'));
player.src({
src: $(this).text(),
type: 'application/x-mpegURL' /*video type*/
});
player.play();
});
</script>
</body>
</html>
- 我的微信
- 微信扫一扫加好友
-
- 我的微信公众号
- 扫描关注公众号
-
