基于 Bootstrap 与 Video.js 开发Web视频播放页面

一、知识点概述：

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

官方网址：https://www.bootcss.com/

Video.js 是一款Web视频播放器，支持HTML5和FLASH两种播放方式，更有自定义皮肤，插件，组件，语言还有丰富的选项配置。

官方网址：https://videojs.com/

二、产品效果展示：

1、视频播放前

2、视频播放中

三、核心代码概述：

1、网页UI展示部分代码

<div class="container">
    <div class="panel panel-success">
        <div class="panel-heading text-center">
            <strong class="panel-title">视频播放展示区</strong>
        </div>
        <div class="panel-body">

            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading text-center">
                            <h3 class="panel-title">苹果视频</h3>
                        </div>
                        <div class="panel-body">
                            <video id="ios-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="200"
                                   poster="image/m.jpg" data-setup="{}" style="width: 100%">
                                <source src="xxx.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="panel-footer">
                            <div class="panel-time-ios samll"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading text-center">
                            <h3 class="panel-title">平板视频</h3>
                        </div>
                        <div class="panel-body">
                            <video id="ipad-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" height="200"
                                   poster="image/m.jpg" data-setup="{}" style="width: 100%">
                                <source src="xxx.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="panel-footer">
                            <div class="panel-time-ipad samll"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading text-center">
                            <h3 class="panel-title">安卓视频</h3>
                        </div>
                        <div class="panel-body">
                            <video id="android-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="320" height="200"
                                   poster="image/m.jpg" data-setup="{}" style="width: 100%">
                                <source src="xxx.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="panel-footer">
                            <div class="panel-time-android samll"></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

</div>

2、引入必要样式

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<link href="https://vjs.zencdn.net/7.5.4/video-js.css" rel="stylesheet">-->

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/video-js.min.css" rel="stylesheet">

    <title>视频播放页面</title>

</head>

3、引入三方JavaScript库

<!-- 引入外部JS -->
<!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
<!--<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!--<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>-->


<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/video.min.js"></script>

4、业务逻辑处理部分代码

<!-- 业务处理 -->
<script type="text/javascript">


    var BaseURL = "http://localhost:8080/MobileProject/";

    //加载资源
    $(function () {
        loadData();
    })

    // 苹果
    var iosPlayer = videojs('ios-video');
    iosPlayer.ready(function(){
        var iosPlayer = this;
        // this.play();

        window.setInterval(function () {
            console.log("currentTime-iosPlayer", iosPlayer.currentTime());

            $(".panel-time-ios").text("当前进度：" + iosPlayer.currentTime());

            var currentTime = iosPlayer.currentTime();
            var vid =  $("#ios-video").attr("vId");

            if (currentTime > 0) {
                updateVideoProgress(vid,currentTime);
            }

        }, 500);
    });

    iosPlayer.on('ended',function(){
        var iosPlayer = this;
        this.play();

        console.log("duration-iosPlayer", iosPlayer.duration());

        var duration = iosPlayer.duration();
        var vid =  $("#ios-video").attr("vId");

        updateVideoLength(vid,duration);
    })


    // 平板
    var ipadPlayer = videojs('ipad-video');
    ipadPlayer.ready(function(){
        var ipadPlayer = this;
        // this.play();

        window.setInterval(function () {
            console.log("currentTime-ipadPlayer", ipadPlayer.currentTime());

            $(".panel-time-ipad").text("当前进度：" + ipadPlayer.currentTime());

            var currentTime = ipadPlayer.currentTime();
            var vid =  $("#ipad-video").attr("vId");

            if (currentTime > 0) {
                updateVideoProgress(vid,currentTime);
            }

        }, 500);
    });

    ipadPlayer.on('ended',function(){
        var ipadPlayer = this;
        this.play();

        console.log("duration-iosPlayer", ipadPlayer.duration());

        var duration = ipadPlayer.duration();
        var vid =  $("#ipad-video").attr("vId");

        updateVideoLength(vid,duration);
    })


    //安卓
    var androidPlayer = videojs('android-video');
    androidPlayer.ready(function(){
        var androidPlayer = this;
        // this.play();

        window.setInterval(function () {
            console.log("currentTime-androidPlayer", androidPlayer.currentTime());

            $(".panel-time-android").text("当前进度：" + androidPlayer.currentTime());

            var currentTime = androidPlayer.currentTime();
            var vid =  $("#android-video").attr("vId");

            if (currentTime > 0) {
                updateVideoProgress(vid,currentTime);
            }

        }, 500);
    });

    androidPlayer.on('ended',function(){
        var androidPlayer = this;
        this.play();

        console.log("duration-androidPlayer", androidPlayer.duration());

        var duration = androidPlayer.duration();
        var vid =  $("#android-video").attr("vId");

        updateVideoLength(vid,duration);
    })



    //加载资源
    function loadData() {
        $.ajax({
            type: "GET",
            url: BaseURL + "video/getVideoUrlApi",
            dataType: 'JSON',
            success: function (result) {

                console.log("data:" + result.iOS);

                videojs("ios-video").src(result.iOS);
                videojs("ipad-video").src(result.iPad);
                videojs("android-video").src(result.android);


                $("#ios-video").attr("vId", result.iOSid);
                $("#ipad-video").attr("vId", result.iPadid);
                $("#android-video").attr("vId", result.androidid);

            }
        });
    }


    //更新进度
    function updateVideoProgress(id,progress) {
        $.ajax({
            type: "PUT",
            url: BaseURL + "video/updateVideoOnlyProgressApi",
            dataType: 'JSON',
            data:{"id":id,"progress":progress},
            success: function (result) {
                console.log("进度:"+result.message);
            }
        });
    }


    //更新长度
    function updateVideoLength(id,length) {
        $.ajax({
            type: "PUT",
            url: BaseURL + "video/updateVideoOnlyLengthApi",
            dataType: 'JSON',
            data:{"id":id,"length":length},
            success: function (result) {
                console.log("长度:"+result.message);
            }
        });
    }

至此，完整代码全部展示，该产品页面功能主要是先获取后台服务器返回的三个视频，然后循环播放，同时把各自的播放进度每隔500毫秒更新到后台数据表对应字段，当前端App获取相应进度后就可以同步播放视频，达到参考进度的作用，也就初步实现了伪直播的效果。

备注：该产品已上线，版权归群鸿科技所有，此文仅供参考，如需合作，请留言即可。

mapboo

发布了71 篇原创文章 · 获赞 51 · 访问量 26万+

私信关注

基于 Bootstrap 与 Video.js 开发Web视频播放页面

猜你喜欢