轻松自制一个收看6000多个电视台的网页，就是这么简单

2021-03-2422:40:58 发表评论

摘要

伯衡君曾经介绍过如何通过一个GitHub项目，再结合一些相关的软件，就能收看到近万个全球电视台，具体可以参看下方的前情提要，伯衡君觉得不过瘾，不如自己做一个网页版的，轻松实现观看这些电视台，也就不用软件了，短短几行代码就能实现哦，虽然很简陋，但是能收看的节目和软件收看没差，分享给大家……

分享至：

开篇寄语

伯衡君曾经介绍过如何通过一个GitHub项目，再结合一些相关的软件，就能收看到近万个全球电视台，具体可以参看下方的前情提要，伯衡君觉得不过瘾，不如自己做一个网页版的，轻松实现观看这些电视台，也就不用软件了，短短几行代码就能实现哦，虽然很简陋，但是能收看的节目和软件收看没差，分享给大家。

重大更新

伯衡君后来将该网站进行了优化，更加人性化，还有了明显的分类，也就是该项目的正式版本，具体可以参看这篇文章：

《上次制作的Easy Web TV的Beta版正式发布喽，快来尝鲜体验》

前情提要

演示地址

Demo

提供最原始的形态，有兴趣的朋友可以自行魔改哦。

设计思路

使用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>