Bootstrap实战---Dplayer播放器(图片)

Bootstrap实战—Dplayer播放器(图片)

本章介绍如何利用Dplayer播放器来构建视频播放网页。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>融职教育</title><!--移动设备优先--><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--引入Bootstrap CSS--><link rel="stylesheet" href="css/bootstrap.css"><!-- 引入CSS Swiper插件 --><link rel="stylesheet" href="css/swiper.min.css"><!--引入手风琴CSS--><link rel="stylesheet" href="css/style.css"><!--引入 Dplayer css--><link rel="stylesheet" href="css/DPlayer.min.css"><style></style></head>
<body><!--关注我们开始--><section class="mt-4"><div class="container"><div class="row"><div class="col"><div><h4 class="d-inline-block">关注我们</h4><small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small></div></div></div><style>.film_focus .film_focus_imgs_wrap{width:100%;height:349px;background:url(images/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat center center;}.film_focus ul.film_focus_imgs{width:100%;height:9999em;position:absolute;left:0;top:0;}.film_focus{width:100%;height:349px;overflow:hidden;position:relative;}.film_focus ul {padding:0px;margin:0px; list-style: none;};.film_focus ul.film_focus_imgs li{height:349px;overflow:hidden;}.film_focus .film_focus_desc h3{height:45px;line-height:45px;overflow:hidden;position:absolute;left:0;top:0;background:rgba(0,0,0,.5);color:#fff;width:100%;padding-left:24px;z-index:99;font-size:16px;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000',endColorstr='#7F000000');}.film_focus ul.film_focus_nav{width:15%;height:349px;background:#424242;position:absolute;right:0px;top:0;z-index:100;}.film_focus ul.film_focus_nav li{height:85px;background:url(images/T1WiB5Xf0EXXXXXXXX-1-75.png) repeat-x;margin:1px 1px 1px 0;padding:5px 0 0 5px;position:relative;}.film_focus ul.film_focus_nav li.cur{background:url(images/T19yB9Xm0BXXXXXXXX-296-79.png) no-repeat 0 2px;width:130px;left:-19px;z-index:100;}.film_focus ul.film_focus_nav li img{position:absolute;left:5px;top:5px;}.film_focus ul.film_focus_nav li.cur img{left:19px;width:110px;height:79px;margin-top:-1px;}.film_focus ul.film_focus_nav li h4{color:#fff;}.film_focus ul.film_focus_nav li p{color:#B9B9B9;line-height:1.8em;}.knowcon_right {width: 100%;height: 349px;border-top: 2px #ff8e3b solid;background: #FDFDFD;box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}.pulsing:before, .pulsing:after {content: "";position: absolute;}.main-content {display: grid;width: 100%;}@media (max-width: 767px) {.w-85 { width: 100% !important;}}@media (min-width: 768px) {.w-85 {width: 85% !important;}}</style><div class="row"><div class="col-12 col-lg-8"><div class="film_focus"><div class="film_focus_imgs_wrap main-content"><ul class="film_focus_imgs w-85"><li><img src="data:images/player/p1.png"  style="width:100%;height:349px" alt=""></img></li><li><img src="data:images/player/p2.png"  style="width:100%;height:349px" alt=""></img></li><li><img src="data:images/player/p3.png"  style="width:100%;height:349px" alt=""></img></li><li><img src="data:images/player/p4.png"  style="width:100%;height:349px" alt=""></img></li></ul></div><div class="film_focus_desc d-none d-md-block"><h3>Web全栈开发就业班10大核心优势</h3><ul id="film" class="film_focus_nav"><li class="cur"><img width="100" height="79" src="data:images/player/t1.png" alt="Web全栈开发就业班10大核心优势" /></li><li><img width="100" height="79" src="data:images/player/t2.png" alt="融职IT教育首创“坐班”学习模式" /></li><li><img width="100" height="79" src="data:images/player/t3.png" alt="EduWork只为培养可以交付的程序员" /></li><li><img width="100" height="79" src="data:images/player/t4.png" alt="浸入【智校云】项目组，在工作中学习" /></li></ul></div></div></div><div class="col-12 col-lg-4"></div></div></div></section><!--关注我们结束--><!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js--><script src="js/jquery.min.js"></script><script src="js/bootstrap.bundle.js"></script><!--引入Dplayer的JS--><script type="text/javascript">(function(A){A.fn.th_video_focus=function(E){var G={actClass:"cur",navContainerClass:".focus_pic_preview",focusContainerClass:".focus_pic",animTime:600,delayTime:5000};if(E){A.extend(G,E)}var C=G.actClass, D=G.navContainerClass, B=G.focusContainerClass, F=G.animTime, H=G.delayTime, I=null;return this.each(function(){var O=A(this), M=A(D+" li",O), P=A(B+" li",O), L=M.length, K=O.height();function N(R){var V=K*R*-1;var U=A(B+" li",O), W=null, T=null;for(var S=0;S<=R;S++){W=U.eq(S);T=W.find('script[type="text/templ"]');if(T.length>0){W.html(T.html())}}A(B,O).stop().animate({top:V},F,function(){var Y=O.find("h3"), X=Y.height();Y.height(0).html(A(".film_focus_nav li").eq(R).find("img").attr("alt")).animate({height:X},600)});A(D+" li").eq(R).addClass(C).siblings().removeClass(C)}function Q(){if(I){clearInterval(I)}I=setInterval(function(){var R=A(D+" li."+C).index();N((R+1)%L)},H)}O.hover(function(){if(I){clearInterval(I)}},function(){/* if(dp1.video.paused && dp2.video.paused && dp3.video.paused && dp4.video.paused ) {Q()} */});var J=null;M.hover(function(){var R=A(this).index();if(I){clearInterval(I)}J=setTimeout(function(){N(R)},300)},function(){if(J){clearTimeout(J)}Q()}).click(function(T){var R=A(this).index(), S=P.eq(R).find("a");if(document.uniqueID||window.opera){S[0].click();T.stopPropagation();T.preventDefault()}});Q()})}})(jQuery);$(function(){//第二个焦点图$(".film_focus").th_video_focus({navContainerClass:".film_focus_nav",focusContainerClass:".film_focus_imgs",delayTime:3000});});</script></body>
</html>

Bootstrap实战---Dplayer播放器(图片)相关推荐

Bootstrap实战---Dplayer播放器(影片)
Dplayer播放器简单用法可参考 https://www.cnblogs.com/bamboopanders/p/13431476.html <div id="player1&quo ...
DPlayer播放器本地化P2P解析加速版源码
介绍: dplayer播放器本地化P2P加速版源码,提升P2P加速.共享.记忆播放.拖动快进等功能完整优化版 DPlayer适用于于各种CMS,这个快绝版了,有能力自己修改吧. PC端自动P2P加速, ...
苹果cms8整合dplayer播放器
一.准备工作已上传CMS8网站模板到空间并能正常打开网站页面二.整合dplayer播放器 1.新建txt文档,将以下代码复制到txt文档中,并将txt文档命名为dplayer.php <ht ...
Dplayer播放器插件整合前置广告、暂停广告3.0版本
介绍 1.整合的苹果cmsV10程序,其他程序无效 2.使用的Dplayer播放器,广告设置效果仅支持PC端 3.安卓手机支持显示前置广告,不支持显示暂停广告 4.苹果手机自测,不保证手机端支持前置和 ...
[MAUI 项目实战] 音乐播放器（一）：概述与架构
系列文章将分步解读音乐播放器核心业务及代码: [MAUI 项目实战] 音乐播放器(一):概述与架构 [MAUI 项目实战] 音乐播放器(二):播放内核 [MAUI 项目实战] 音乐播放器(三):界面交 ...
使用腾讯云轻量应用服务器搭建dplayer播放器弹幕服务器
说明 Dplayer播放器就不过多介绍了,不知道的可以查看官方项目地址:点击查看,算是目前国内比较火的视频播放器,貌似很多人喜欢用弹幕功能,而官方提供的弹幕api已经挂了,所以我们想使用的话,要么使用 ...
DPlayer播放器
DPlayer播放器前言今天花了点时间看了一下DPlayer播放器,DPlayer播放器支持弹幕,音量调节,后期的弹幕设置以及放大缩小屏幕等操作,好的一点是比上次那个flv的demo好一点,总感觉 ...
苹果cms整合dplayer播放器增加记忆+P2P播放+自动下一集
声明:除特殊声明外本站文档均由作者原创,转载请注明出处,原文地址:苹果cms整合dplayer播放器增加记忆+P2P播放+自动下一集今天给大家分享下给dplayer播放器增加记忆+P2P播放+自动下 ...
dplayer播放器增加记忆 P2P播放自动下一集弹幕功能
搭建过苹果cms的都知道,苹果cms自带的播放器都特别拉跨如:DP ali这些都只要一些基础的功能,但是现在这些功能都都满足不了用户群体,所以今天小编给大家带来一款二改过的播放器新增了记忆播放,P2 ...

Bootstrap实战---Dplayer播放器(图片)

Bootstrap实战---Dplayer播放器(图片)相关推荐

最新文章

热门文章