CMS建站知识

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

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

演示效果如下

效果演示地址: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]即可。

 

(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;

发表评论