先看下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() } }); }