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

百度已收录   阅读次数: 460
2021-03-2422:40:58 发表评论
摘要

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

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

开篇寄语

伯衡君曾经介绍过如何通过一个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>
分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: