IVI直播聚合

前提

今天无聊修复了一下MVideo程序,改了自己的解析源,但是我发现没有直播功能,所以我决定撸一个直播页

环境

  • HTML+Javascript
  • 北邮直播系统
  • DPlayer
  • Bootstrap
  • Demo

原理

就是把北邮直播系统展示在一个html界面上通过点击按钮实现切换频道,前端使用Bootstrap 3.7编写。

遇到的问题

因为直播网站是HTTP,我的影视网环境是HTTPS,在HTTPS环境中调用HTTP资源时浏览器会产生Mixed Content错误,又因为直播网没有HTTPS所以我只能在一个新的界面搭建他,然后在影视网调用。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>直播</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@0.14.5/dist/hls.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
</head>
<style>
    #dplayer{
        width: 960px;
        height: 500px;
        margin: 0 auto;
    }
</style>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="https://tv.sgee.cc/">双Ge's Video</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="dropdown"><a href="https://tv.sgee.cc/list/1" class="dropdown-toggle" data-toggle="dropdown">电影 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://tv.sgee.cc/list/5">动作片</a></li>
                        <li><a href="https://tv.sgee.cc/list/6">喜剧片</a></li>
                        <li><a href="https://tv.sgee.cc/list/7">爱情片</a></li>
                        <li><a href="https://tv.sgee.cc/list/8">科幻片</a></li>
                        <li><a href="https://tv.sgee.cc/list/9">恐怖片</a></li>
                        <li><a href="https://tv.sgee.cc/list/10">剧情片</a></li>
                        <li><a href="https://tv.sgee.cc/list/11">战争片</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="https://tv.sgee.cc/list/2" class="dropdown-toggle" data-toggle="dropdown">电视剧 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="https://tv.sgee.cc/list/12">国产剧</a></li>
                        <li><a href="https://tv.sgee.cc/list/13">港台剧</a></li>
                        <li><a href="https://tv.sgee.cc/list/14">日韩剧</a></li>
                        <li><a href="https://tv.sgee.cc/list/15">欧美剧</a></li>
                    </ul>
                </li>
                <li><a href="https://tv.sgee.cc/list/3">综艺</a></li>
                <li><a href="https://tv.sgee.cc/list/4">动漫</a></li>
                <li><a href="http://live.sgee.cc">直播</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="dplayer"></div>
<script>
    function video(video_src) {
        var src = video_src;
        const dp = new DPlayer({
            container: document.getElementById('dplayer'),
            live: true,
            autoplay: true,
            video: {
                url: src,
                type: 'hls',
            },
        });
    }
</script>
<script>video('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')</script>
<br>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8')">CCTV-1</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv2hd.m3u8')">CCTV-2</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8')">CCTV-3</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv4hd.m3u8')">CCTV-4</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8')">CCTV-5</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8')">CCTV-6</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv7hd.m3u8')">CCTV-7</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8')">CCTV-8</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv9hd.m3u8')">CCTV-9</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv10hd.m3u8')">CCTV-10</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv11.m3u8')">CCTV-11</button>&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv12hd.m3u8')">CCTV-12</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv13.m3u8')">CCTV-13</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv14hd.m3u8')">CCTV-14</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv15.m3u8')">CCTV-15</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cctv17hd.m3u8')">CCTV-17</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cgtnhd.m3u8')">CGTN</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cgtndochd.m3u8')">CGTN DOC</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/chchd.m3u8')">CHC高清电影</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv1hd.m3u8')">北京卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv2hd.m3u8')">北京文艺</button>&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv4hd.m3u8')">北京影视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv9hd.m3u8')">北京新闻</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv10.m3u8')">卡酷少儿</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/btv11hd.m3u8')">北京冬奥纪实</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hunanhd.m3u8')">湖南卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/zjhd.m3u8')">浙江卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/jshd.m3u8')">江苏卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/dfhd.m3u8')">东方卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/sxtv.m3u8')">陕西卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/ahhd.m3u8')">安徽卫视</button>&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hljhd.m3u8')">黑龙江卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/lnhd.m3u8')">辽宁卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/szhd.m3u8')">深圳卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/gdhd.m3u8')">广东卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/tjhd.m3u8')">天津卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hunanhd.m3u8')">湖南卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hbhd.m3u8')">湖北卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/sdhd.m3u8')">山东卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cqhd.m3u8')">重庆卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/docuchina.m3u8')">上海纪实</button>&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/gedocu.m3u8')">金鹰纪实</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/dnhd.m3u8')">福建东南卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/schd.m3u8')">四川卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hebhd.m3u8')">河北卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/jxhd.m3u8')">江西卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/hnhd.m3u8')">河南卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/gxhd.m3u8')">广西卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/jlhd.m3u8')">吉林卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/cetv1hd.m3u8')">CETV-1</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/lyhd.m3u8')">海南卫视</button>&nbsp;&nbsp;&nbsp;
</p>
<p align="center">
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/gzhd.m3u8')">贵州卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/xztv.m3u8')">西藏卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/nmtv.m3u8')">内蒙古卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/qhtv.m3u8')">青海卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/sxrtv.m3u8')">山西卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/xmtv.m3u8')">厦门卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/xjtv.m3u8')">新疆卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/yntv.m3u8')">云南卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/nxtv.m3u8')">宁夏卫视</button>&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-default" onclick="video('http://ivi.bupt.edu.cn/hls/gstv.m3u8')">甘肃卫视</button>&nbsp;&nbsp;&nbsp;
</p>
</body>
</html>
Last modification:July 24th, 2020 at 09:50 pm
如果觉得我的文章对你有用,请随意赞赏