网站接入视频播放 支持列表页面直接播放 并支持全屏

昨晚在百度里面查询资料的时候发现一个网站里面的视频展示方式挺不错的；不仅可以直接在列表页面播放，还支持在当前页面有多个视频的时候，对指定某一个视频进行全屏加载播放；于是经过一会琢磨，也加入到了自己网站里面，现在在这里记录一下过程以便后用；

演示效果如下

效果演示地址：https://www.diebaoyun.com/baikeshipin/

效果执行过程

整个制作包括三部分，第一部分是前端HTML代码；第二部分是后端的样式；第三部分是调用动态数据；

第一部分、前端HTML代码

<div class="page_container_w w100 bgfff">
<div class="page_container mar1024">
<div class="caseList">
<ul class="clearfix">
<!--循环区域开始-->
<li>
<a>
<div class="img"><iframe frameborder="0" height="260" width="100%" src="https://v.qq.com/txp/iframe/player.html?vid=v3304efhgb3" allowfullscreen="true"></iframe></div>
<div class="bottom clearfix">
<div class="title fl ellipsis">第十二节、什么是词条摘要、基本信息栏</div>
<!-- <div class="more fr"><i class="iconfont icon-youjiantou"></i></div> -->
</div>
</a>
</li>
<!--循环区域结束-->
</ul>
</div>
<div class="pages"></div>
</div>
</div>

将以上代码添加到自己网站的对应页面相应位置；

第二部分是后端的样式

将以下样式添加到自己视频页面所调用的样式里面；

/*视频列表样式调用*/
.caseList ul {width: 102%;}
.caseList li {float: left; width: 31%; margin-right: 2%; margin-bottom: 25px; position: relative; box-shadow: 0 2px 5px #ccc; top: 0; transition: all 0.3s;}
.caseList img {width: 99%;}
.caseList .bottom {padding: 0 15px; line-height: 58px; background: #f5f5f5;}
.caseList .title {font-size: 16px; color: #4d4d4d;}
.caseList .more i {font-size: 14px; color: #fff; background: #cacaca; display: inline-block; line-height: 30px; border-radius: 50%; text-align: center; width: 30px; height: 30px;}
.caseList li:hover {top: -5px; box-shadow: 0 6px 10px #ccc;}

第三部分是调用动态数据

在实际添加数据的过程中，需要将地址一段设置为后台动态添加的位置；故此处需要将第一部分里面的两个位置进行调整，此处为了方便以pbootcms系统为例进行解释，分别如下：

【第十二节、什么是词条摘要、基本信息栏】  修改为：[list:title]

而视频链接，默认是没有这个参数的，则需要先在PBOOTCMS后台的模型里面为视频模型添加一个视频链接地址的字段如：videoshipin，则将第一部分里面的https://v.qq.com/txp/iframe/player.html?vid=v3304efhgb3修改为[list:videoshipin]即可。