欢迎大家加入高热度网，网站开发、小程序、技术支持和商务合作可联系： 站长邮箱：admin@gaoredu.com 站长微信：red_tea_v2(备注来意)

新手如何10分钟快速搭建一个在线视频直播网站（附完整代码）？

143次阅读
没有评论

共计 9115 个字符，预计需要花费 23 分钟才能阅读完成。

不少站长都希望搭建一个自己的黑科技视频网站，尤其是关于视频直播的，但是网上很少有比较全面的教程。小编今天带你只需要 10 分钟就可以搭建起来一个可以观看视频直播的网站，附完整源码下载。

如何快速搭建一个在线视频直播网站？

首先呢，假设大家都是小白哈，最好能有点编程基础就更好了，当然 高手就不用向下看了，下面开始今天的教程。

如何在浏览器页面上播放视频？

目前运行浏览器上的基本上就是前端 HTML、CSS、JavaScript 这三大件的集成体，如果只需要播放视频的话，我们直接使用 HTML5 的 video 标签就可以实现一个简单的播放器。

一个简单的视频播放案例

上面的这个很小的视频播放器就只需要下面这部分代码就可以实现了。你只需要吧下面的这个代码全部复制粘贴到一个全新的 HTML 页面就可以了。

<!DOCTYPE HTML>
<html>
<body>

<video src="https://www.w3school.com.cn/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

</body>
</html>

是不是很简单呢？是的。但是大小目前的这个界面可能并不是特别的好看，当然也是完全支持我们自定义属性的，具体的定制大家可以参考下 W3C 的文档。大家可以去自行尝试哈。

属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

当然，为了提升我们的开发效率，现在已经有一些开源的封装的很好的插件供我们使用了，比如说 video.js 这个。

如何在短时间开发一个视频直播网站呢？

其实也是很简单，从左到右包括播放暂停，音量、直播以及右边的视频直播频道切换功能哈。下面来看看实现的代码和最终的实现效果。这个其实是可以借鉴一个论坛的线上地址：http://vip.52tech.tech/live.php

新手如何 10 分钟快速搭建一个在线视频直播网站（附完整代码）？
在线视频直播项目效果图

首先来看看 HTML 代码，这块就是页面布局的常见元素哈。

<div id="container">
        <div class="left" id="dplayer">
        </div>
        <a href="#" class="btn-right" id="btn-right">
            <img src="./images/right.png" alt="">
        </a>
        <a href="#" class="btn-left" id="btn-left">
            <img src="./images/left.png" alt="">
        </a>
        <div class="right" id=right>
            <ul id="list">
                <li class="list-item active"><span>CCTV1</span></li>
                <li class="list-item"><span>CCTV2</span></li>
                <li class="list-item"><span>CCTV3 高清 </span></li>
                <li class="list-item"><span>CCTV4 高清 </span></li>
                <li class="list-item"><span>CCTV5+ 高清 </span></li>
                <li class="list-item"><span>CCTV6 高清 </span></li>
                <li class="list-item"><span>CCTV7 高清 </span></li>
                <li class="list-item"><span>CCTV- 8 高清 </span></li>
                <li class="list-item"><span>CCTV- 9 高清 </span></li>
                <li class="list-item"><span>CCTV-10 高清 </span></li>
                <li class="list-item"><span>CCTV-11 高清 </span></li>
                <li class="list-item"><span>CCTV-12 高清 </span></li>
                <li class="list-item"><span>CCTV-13 高清 </span></li>
                <li class="list-item"><span>CCTV-14 高清 </span></li>
                <li class="list-item"><span>CCTV-15 高清 </span></li>
                <li class="list-item"><span>CHC 高清电影 </span></li>
                <li class="list-item"><span>北京卫视高清 </span></li>
                <li class="list-item"><span>北京文艺高清 </span></li>
                <li class="list-item"><span>湖南卫视高清 </span></li>
                <li class="list-item"><span>浙江卫视高清 </span></li>
                <li class="list-item"><span>江苏卫视高清 </span></li>
                <li class="list-item"><span>东方卫视高清 </span></li>
                <li class="list-item"><span>安徽卫视高清 </span></li>
                <li class="list-item"><span>黑龙江卫视高清 </span></li>
                <li class="list-item"><span>辽宁卫视高清 </span></li>
                <li class="list-item"><span>深圳卫视高清 </span></li>
                <li class="list-item"><span>广东卫视高清 </span></li>
                <li class="list-item"><span>天津卫视高清 </span></li>
                <li class="list-item"><span>湖北卫视高清 </span></li>
                <li class="list-item"><span>东南卫视高清 </span></li>
                <li class="list-item"><span>北京纪实高清 </span></li>
                <li class="list-item"><span>民视新闻台 </span></li>
            </ul>
        </div>
    </div>

接着来看看视频直播的 CSS 代码，也就是外表，我们最终看到的效果就是这块实现的哈。

<style>
        #container {
            width: 1000px;
            margin: 0 auto;
            overflow: hidden;
            background-image: url(http://p4.img.cctvpic.com/photoAlbum/templet/common/DEPA1533715906572415/zhibo_out_bg_20190823.jpg);
            display: flex;
            justify-content: center;
            position: relative;
        }

        #container .left {
            float: left;
            width: 800px;
            height: 450px;
            /* background-color: turquoise; */
        }

        #container .right {
            float: right;
            width: 200px;
            height: 450px;
            position: relative;
            overflow-y: scroll;
            overflow-x: hidden;
            transition: cubic-bezier(0.47, 0, 0.745, 0.715);
        }

        #container .btn-right {
            display: inline-block;
            width: 10px;
            height: 28px;
            text-align: center;
            position: absolute;
            z-index: 10;
            transform: translate(-9px, -14px);
            top: 50%;
            right: 190px;
        }

        #container .btn-left {
            display: none;
            width: 10px;
            height: 28px;
            text-align: center;
            position: absolute;
            z-index: 10;
            transform: translate(-9px, -14px);
            top: 50%;
            right: 90px;
        }

        #list {float: left;}

        #list .list-item {
            text-align: center;
            width: 120px;
            list-style: none;
            color: #bbbbbb;
            font-size: 16px;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
        }

        #list .list-item:hover {color: #FF6400;}

        /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
        #container .right::-webkit-scrollbar {
            width: 4px;
            height: 16px;
            background-color: #F5F5F5;
        }

        /* 定义滚动条轨道 内阴影 + 圆角 */
        #container .right::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            background-color: #F5F5F5;
        }

        /* 定义滑块 内阴影 + 圆角 */
        #container .right::-webkit-scrollbar-thumb {
            border-radius: 2px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #383838;
        }

        .active {color: #FF6400 !important;}
    </style>

最后来看看 JavaScript 代码，这块的代码比较核心哈，基本上最终能不能正常播放就看这块的代码了。

<script>
        (function () {const Player = function (list) {this._sourceList = list;};

            Player.prototype = {
                constructor: Player,
                _player: null,
                _sourceContainer: null,

                start() {console.log('start')
                    this._init();},
                _init() {
                    // 初始化播放器参数
                    this._initDPlayer();

                    // 初始化播放列表
                    this._initPlayerList();

                    // 绑定事件相关
                    this._bindEvents();

                    // 开始播放
                    this._player && this._player.play();},
                _initDPlayer() {
                    this._player = new DPlayer({container: document.getElementById('dplayer'),
                        live: true,
                        danmaku: false,
                        autoplay: true,
                        apiBackend: {read: function (endpoint, callback) {console.log('Pretend to connect WebSocket');
                                callback();},
                            send: function (endpoint, danmakuData, callback) {console.log('Pretend to send danamku via WebSocket', danmakuData);
                                callback();},
                        },
                        video: {url: this._sourceList[0].src,
                            type: 'hls',
                        },
                    });
                },
                _initPlayerList() {let ul = document.getElementById('list');
                    let html = '';
                    this._sourceList.forEach((element, index) => {element.name = element.name.toUpperCase();
                        if (index === 0) {html += `<li class='list-item active'><span>${element.name}</span></li>`;
                        }
                        else {html += `<li class='list-item'><span>${element.name}</span></li>`;
                        }
                    });
                    ul.innerHTML = html;
                },
                _bindEvents() {
                    // 电视列表点击事件的绑定
                    this._bindListitemEvent();
                    // 切换按钮的点击事件绑定
                    this._bindToggleButtonEvent();},
                _bindListitemEvent() {let list = document.getElementById("list");
                    let self = this;
                    list.addEventListener('click', function (e) {
                        let nodeName = e.target.nodeName || "";
                        if (nodeName.toLowerCase() === 'span') {
                            // 点击之后，当前的项高亮显示
                            let listItems = document.getElementsByClassName('list-item');
                            for (let i = 0, len = listItems.length; i < len; i++) {if (listItems[i].classList.contains('active')) {listItems[i].classList.remove('active');
                                }
                            }
                            let text = e.target.innerText || "";
                            e.target.parentNode.classList.add('active');
                            let name = text.trim().toLowerCase();
                            let tv = self._sourceList.filter(function (item) {return item.name.trim().toUpperCase() === name.trim().toUpperCase();});

                            // 开始更新播放列表的数据
                            tv.length && self._playLive(tv[0]);
                        }
                    }, false);
                },
                _bindToggleButtonEvent() {let btnRight = document.getElementById('btn-right');
                    let btnLeft = document.getElementById('btn-left');
                    let list = document.getElementById("list");
                    let right = document.getElementById('right');
                    btnRight.addEventListener('click', function () {
                        right.style.display = 'none';
                        btnRight.style.display = 'none';
                        btnLeft.style.display = 'block';
                    });

                    btnLeft.addEventListener('click', function () {
                        right.style.display = 'block';
                        btnRight.style.display = 'block';
                        btnLeft.style.display = 'none';
                    });
                },
                _playLive(tv) {
                    this._player.switchVideo(
                        {
                            type: 'hls',
                            url: tv.src
                        }
                    );
                }
            }

            const sourceList = [
                {name: 'cctv1', src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'},
                {name: 'cctv2', src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8'},
                {name: 'CCTV3 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8'},
                {name: 'CCTV4 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv4.m3u8'},
                {name: 'CCTV5+ 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8'},
                {name: 'CCTV6 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8'},
                {name: 'CCTV7 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv7.m3u8'},
                {name: 'CCTV- 8 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8'},
                {name: 'CCTV- 9 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv9.m3u8'},
                {name: 'CCTV-10 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv10.m3u8'},
                {name: 'CCTV-11 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv11.m3u8'},
                {name: 'CCTV-12 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv12.m3u8'},
                {name: 'CCTV-13 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv13.m3u8'},
                {name: 'CCTV-14 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv14.m3u8'},
                {name: 'CCTV-15 高清', src: 'http://ivi.bupt.edu.cn/hls/cctv15.m3u8'},
                {name: 'CHC 高清电影', src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8'},
                {name: '北京卫视高清', src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8'},
                {name: '北京文艺高清', src: 'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8'},
                {name: '湖南卫视高清', src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8'},
                {name: '浙江卫视高清', src: 'http://ivi.bupt.edu.cn/hls/zjhd.m3u8'},
                {name: '江苏卫视高清', src: 'http://ivi.bupt.edu.cn/hls/jshd.m3u8'},
                {name: '东方卫视高清', src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8'},
                {name: '安徽卫视高清', src: 'http://ivi.bupt.edu.cn/hls/ahhd.m3u8'},
                {name: '黑龙江卫视高清', src: 'http://ivi.bupt.edu.cn/hls/hljhd.m3u8'},
                {name: '辽宁卫视高清', src: 'http://ivi.bupt.edu.cn/hls/lnhd.m3u8'},
                {name: '深圳卫视高清', src: 'http://ivi.bupt.edu.cn/hls/szhd.m3u8'},
                {name: '广东卫视高清', src: 'http://ivi.bupt.edu.cn/hls/gdhd.m3u8'},
                {name: '天津卫视高清', src: 'http://ivi.bupt.edu.cn/hls/tjhd.m3u8'},
                {name: '湖北卫视高清', src: 'http://ivi.bupt.edu.cn/hls/hbhd.m3u8'},
                {name: '东南卫视高清', src: 'http://ivi.bupt.edu.cn/hls/sdhd.m3u8'},
                {name: '北京纪实高清', src: 'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8'},
                {name: '民视新闻台', src: 'https://6.mms.vlog.xuite.net/hls/ftvtv/index.m3u8'},
            ];
            // const url = "http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8";
            new Player(sourceList).start();})();
    </script>

这样一来，这个视频播放器也就全部实现完成了，总共也就 320 行代码左右，而且支持视频直播列表的切换哈，感兴趣的朋友可以来试试看！

视频直播开源网站项目源码

最后，再分享一个 GitHub 上面比较完善的 VIP 视频开源项目，目前也已经有 300 多个 star 了，还是不错的。

新手如何 10 分钟快速搭建一个在线视频直播网站（附完整代码）？
VIP 视频免费看项目启动主界面

开源 VIP 视频免费看项目：https://github.com/xiugangzhang/video.github.io

以上就是高热度网提供给大家的这个 10 分钟快速搭建一个视频直播网站的教程哈，如果大家在使用的过程中有任何问题，也欢迎大家评论留言哈。

正文完
高热度网微信公众号
post-qrcode
GitHub 网页视频直播系统 视频直播网站 视频网站 高热度网 黑科技 黑科技教程 黑科技视频 黑科技视频教程
发表至： 黑科技教程
2020-02-11
 
高热度网
版权声明：本站原创文章，由 高热度网 2020-02-11发表，共计9115字。
转载说明：本站所有文章由高热度网全网首发，转载请注明出处。
【免费】2021年最火的WebGL前端视频教程_OpenGL实战视频教程免费下载
【新】2020最新Java视频教程（传智+韩顺平+慕课）集合免费下载
【新】idea激活码，jetbrains全系列最新2020激活码和激活教程（亲测可用）
黑科技教程：2020年最新支付宝集五福最强攻略，最快可一天集齐所有福
评论（没有评论）