1. 首页
  2. 黑科技教程

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

不少站长都希望搭建一个自己的黑科技视频网站,尤其是关于视频直播的,但是网上很少有比较全面的教程。小编今天带你只需要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的文档。大家可以去自行尝试哈。

属性描述
autoplayautoplay如果出现该属性,则视频在就绪后马上播放。
controlscontrols如果出现该属性,则向用户显示控件,比如播放按钮。
heightpixels设置视频播放器的高度。
looploop如果出现该属性,则当媒介文件完成播放后再次开始播放。
mutedmuted规定视频的音频输出应该被静音。
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
srcurl要播放的视频的 URL。
widthpixels设置视频播放器的宽度。

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

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

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

在线视频直播项目效果图
在线视频直播项目效果图

首先来看看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了,还是不错的。

VIP视频免费看项目启动主界面

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

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

原创文章,作者:高热度网,如若转载,请注明出处:https://www.gaoredu.com/jiaocheng/how-to-build-a-live-video-website.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

QQ群:78925824

在线咨询:点击这里给我发消息

电子邮件:admin@gaoredu.com

QR code