layer配合video.js播放视频并实现自适应

我爱模板网在做一个论坛时，这个论坛的云课堂需要实现在线播放视频，并且要能自适应页面，做到PC、手机播放都没问题。遇到了一些问题，例如layer的尺寸以及video的尺寸等，不过都一一解决了。这里把代码简单的列出来：

先看下PC和手机下的效果：


具体代码如下：
1、这段css是解决在pc下，播放时间换行的问题，以及在PC下，layer显示白色边框，样式更好看的效果：

    .vjs-mouse-display, .vjs-play-progress.vjs-slider-bar{white-space: nowrap;}
    @media (min-width: 768px) {
        #playerpopup{border: 5px solid #fff;}
    }

2、视频列表图片，点击可以弹出layer

<a href="javascript:;" class="play" onclick="playVideo('http://vjs.zencdn.net/v/oceans.mp4', 'https://wdp-api.51aes.com/profile/upload/2021/05/07/c0b5cfca-7ea9-4051-a65a-23825ba1e157.jpg')">
    <img src="./images/play.svg">
</a>

3、弹窗代码：

<!--视频播放器弹窗-->
<div class="row" id="playerpopup" style="display:none;">
    <div class="player-layer">
        <video id="myVideo" class="video-js" controls poster="" style="width:100%; height:100%">
            <source id="playerSocurce" src="" type="video/mp4">
            <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
        </video>
    </div>
</div>

4、引入css和js

<script type="text/javascript" src="./js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="./js/layer/layer.js"></script>
<link href="./js/video-js/video-js.min.css" rel="stylesheet">
<script src="./js/video-js/video.min.js"></script>
<script src="./js/video-js/zh-CN.js"></script>

5、播放代码：

function playVideo(src,poster){
    // 为视频赋值封面图和播放地址
    document.querySelector('#playerSocurce').setAttribute('src', src)
    document.querySelector('#myVideo').setAttribute('poster', poster)
    // 计算layer和视频的宽高
    let width = $(window).width();
    let area = [900,400];
    if(width < 768){
        area = [(width-30)+'px', (width-30)/2.25+'px']
    }
    $('.player-layer').width(area[0]);
    $('.player-layer').height(area[1]);
    var story_sources = [{
        type:"video/mp4",
        src:src
    }];
    var story_player = videojs('myVideo');
    // 每次调用videojs，都要重新load
    story_player.ready(function () {
        var obj  = this;
        obj.src(story_sources);
        obj.load();
    });
    layer.open({
        // 这里+50，是layer的title的高度
        area: [area[0], area[1]+50],
        type: 1,
        title: '【入门】第01课_初步了解开发者计划',
        content: $('#playerpopup'),
        end : function() {
            story_player.pause()
        }
    });
}