自动播放【html5】"/>
分享视频页面模板界面+带列表页自动播放【html5】
分享自己网站的视频栏目界面，支持动态展示效果，支持自适应，支持列表页鼠标移动自动播放视频属性。
演示页面： /
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="//ae.bdstatic/">
<link rel="dns-prefetch" href="//msite.baidu">
<link rel="dns-prefetch" href="//mipcache.bdstatic">
<link rel="dns-prefetch" href="//c.mipcdn">
<link rel="dns-prefetch" href="//c.mipcdn">
<link rel="dns-prefetch" href="//www.sdfymj">
<meta http-equiv="x-ua-compatible" content="IE=edge" />
{if $moduleid==1}
<link rel="canonical" href="{DT_PATH}">
{/if}
{if $moduleid>2 &&$itemid==0}
<link rel="canonical" href="{$MOD[linkurl]}{$linkurl}">
{/if}
{if $itemid!=0}
<link rel="canonical" href="{$linkurl}">
{/if}
<meta name="applicable-device"content="pc,mobile">
{if $head_mobile}
<meta http-equiv="mobile-agent" content="format=html5;url={$head_mobile}">
<meta http-equiv="mobile-agent" content="format=xhtml; url={$head_mobile}">
<link rel="alternate" media="only screen and(max-width: 640px)" href="{$head_mobile}" >
{/if}
<title>{if $seo_title}{$seo_title}{else}{if $head_title}{$head_title}{$DT[seo_delimiter]}{/if}{if $city_sitename}{$city_sitename}{else}{$DT[sitename]}{/if}{/if}</title>
{if $head_keywords}
<meta name="keywords" content="{$head_keywords}" />
{/if}
{if $head_description}
<meta name="description" content="{$head_description}" />
{/if}
<meta name="generator" content="{$DT[sitename]}"/>
<link rel="shortcut icon" type="image/x-icon" href="{DT_STATIC}favicon.ico" />
<link rel="bookmark" type="image/x-icon" href="{DT_STATIC}favicon.ico" />
{if $EXT[archiver_enable]}
<link rel="archives" title="{$DT[sitename]}" href="{$EXT[archiver_url]}" />
{/if}<meta name="renderer" content="webkit"><link rel="stylesheet" href="{DT_SKIN}video/list/css/layui.css"><link rel="stylesheet" href="{DT_SKIN}video/list/css/iconfont.css"><link rel="stylesheet" href="{DT_SKIN}video/list/css/font-awesome.min.css"><link rel="stylesheet" href="{DT_SKIN}video/list/css/globle.css"><link rel="stylesheet" href="{DT_SKIN}video/list/css/header.css"><link rel="stylesheet" href="{DT_SKIN}video/list/css/videolist.css">
<link rel="stylesheet" href="{DT_SKIN}video/list/css/filter.css"></head>
<style type="text/css">.layui-form-item .layui-form-checkbox[lay-skin=primary] {margin-top: 0;}
</style>
<body><!--头部-->
<div class="aoaoAudio_header layui-clear"><!--LOGO--><div class="aoaoAudio_header_logo"><a href="{DT_PATH}" title="{$DT[sitename]}"><img src="{DT_SKIN}video/list/picture/logofb.svg" alt="{$DT[sitename]}"></a></div><!--导航--><ul class="layui-nav headNav" lay-filter=""><li class="layui-nav-item sceneNav plugin"><a href="{DT_PATH}" title="首页">首页</a><dl class="layui-nav-child"></dl></li>{loop $MODULE $m}{if $m[moduleid] > 10 && !$m[islink]}<li class="layui-nav-item plugin"><a href="{$m[linkurl]}{$c[linkurl]}" title="{$m[name]}" target="_blank">{$m[name]}</a><dl class="layui-nav-child layui-nav-video"></dl></li>{/if}{/loop} <li class="layui-nav-item"><a href="{$MODULE[1][linkurl]}announce/" title="关于我们" target="_blank">关于我们</a></li></ul><!--搜索框--><div class="aoaoAudio_header_searchBox layui-form" layui-form ><form class="layui-form layui-form-pane" action="{DT_PATH}api/search.php" method="get"><input type="hidden" name="spread" value="0" id="destoon_spread"/><input id="sechtype" name="moduleid" type="hidden" value="14"><input id="14" type="text" autocomplete="off" placeholder="输入关键字" name="kw" value="" list="cars"><span><button type="submit"><i class="fa fa-search" lay-submit></i></button></span></form>
</div>
<!--用户框-->
<ul class="layui-nav aoaoAudio_header_userBox" lay-filter><li class="layui-nav-item aoaoAudio_header_userID">{if $_userid}<a href="{$MODULE[2][linkurl]}" class="need-login" rel="nofollow" title="管理"><span class="aoaoAudio_header_userID"><img src="{DT_PATH}/api/avatar/default.jpg" alt="管理"><span>会员中心</span></span></a>{else}<a href="{$MODULE[2][linkurl]}{$DT[file_login]}" class="need-login" rel="nofollow" title="登入"><span class="aoaoAudio_header_userID"><img src="{DT_SKIN}video/list/picture/nologin.png" alt="登入"><span>登入/注册</span></span></a>{/if}</li></ul>
</div>
<div class="filter_mask"></div>
<div class="list_ad videolist"><div class="listVideoBox"><video autoplay loop muted id="bgvid" class="list_video" style="width=100%; height=100%; object-fit: fill"><!--<source src=".mp4" type="video/mp4">!--><source src="{DT_SKIN}video/list/video/video-top-banner-index.mp4" type="video/mp4"></video></div><div class="list_ad_word"><p class="list_ad_intro">{$CAT[catname]}</p><p class="worksNum">云建网为您提供{$CAT[catname]}相关视频，让您更好了解和使用{$CAT[catname]}</p></div>
</div><div class="aoaoAudio_filtrate layui-container video-list"><div class="warp"><div class="crumbs"><p><span>当前位置：</span><a href="{$MODULE[1][linkurl]}" title="{$DT[sitename]}">{$DT[sitename]}</a>» <a href="{$MOD[linkurl]}">{$MOD[name]}</a> » {cat_pos($CAT, ' » ')}</p></div></div><div class="aoaoAudio_filtrate_category"><ul><li class="category_Classify"><span>视频分类：</span><a class="ln" href="{$MODULE[14][linkurl]}" title="全部">全部</a>{loop $maincat $i $m}{php $child = get_maincat($maincat, $CATEGORY, 1);}<a href="{$MOD[linkurl]}{$m[linkurl]}" title="{$m[catname]}">{$m[catname]}</a>{php $childs = get_maincat($m[catid], $CATEGORY, 1);}{loop $childs $i $c}<a href="{$MOD[linkurl]}{$c[linkurl]}">{$c[catname]}</a>{/loop}{/loop}</li> </div></div>
</div>
<!--列表-->
<div class="layui-container video_listing"><div class="layui-tab-item layui-show"><div class="layui-row layui-col-space20">{if $module == 'video'} {if $tags}{template 'list-shipin', 'tag'} {/if}{/if}
<!-- 视频模板 -->
<div class="videoTemplate_wrap"><div class="layui-container videoTemplate"><div class="template_top clearfix"><div class="template_border"></div><div class="template_title"><h1>热门推荐</h1></div><div class="template_border"></div></div><div class="tags-title"></div><div class="tags-item"><span>热门分类：</span>{loop $MODULE $m}
{if $m[moduleid] > 3 && !$m[islink]}
{php $child = get_maincat(0, $m[moduleid]);}
{loop $child $i $c}<a href="{$m[linkurl]}{$c[linkurl]}" title="{$c[catname]}" target="_blank">{$c[catname]}</a>
{/loop}
{/if}
{/loop}
</div>
<div class="tags-item"><span>用户热搜：</span><!--{tag("moduleid=21&table=keyword&condition=moduleid=21 and status=3&pagesize=100&order=updatetime desc&target=_blank&dir=xhtag&template=news-search_kw")}--></div></div> </div>
</div> <!--底部-->
<div class="footer minwd"><div class="layui-container"><div class="nav clearfix"><dl><dt><i class="iconfont"></i>关于云建网</dt><dd><a href="/" target="_blank" rel="nofollow" title="关于云建网">主办单位</a></dd><dd><a href="{$MODULE[1][linkurl]}about/contact.html" target="_blank" rel="nofollow" title="联系方式">联系我们</a></dd>{if $EXT[guestbook_enable]}<dd><a href="{$EXT[guestbook_url]}index.php?action=add" target="_blank" rel="nofollow" title="意见反馈">意见反馈</a></dd>{/if}<dd><a href="{$MODULE[1][linkurl]}about/contact.html" target="_blank" rel="nofollow" title="VIP充值">联系我们</a></dd></dl><dl><dt><i class="iconfont" target="_blank"></i>增值服务</dt><dd><a href="{$MODULE[1][linkurl]}vip" target="_blank" rel="nofollow" title="开通vip">开通vip</a></dd><dd><a href="{$MODULE[2][linkurl]}grade.php" target="_blank" rel="nofollow" title="服务对比">服务对比</a></dd><dd><a href="/{$MODULE[1][linkurl]}vip/spmuban.php" target="_blank" rel="nofollow" title="精美商铺">精美商铺</a></dd></dl><dl><dt><i class="iconfont"></i>资料下载</dt><dd><a href=".html" target="_blank" title="建筑工程" >建筑工程</a></dd><dd><a href=".html" target="_blank" title="路桥工程" >路桥工程</a></dd><dd><a href=".html" target="_blank" title="水利工程" >水利工程</a></dd><dd><a href=".html" target="_blank" title="材料安装" >材料安装</a></dd><dd><a href=".html" target="_blank" title="教育考试" >教育考试</a></dd></dl><dl><dt><i class="iconfont" target="_blank"></i>推广服务</dt><dd><a href="{$EXT[spread_url]}" target="_blank" rel="nofollow" title="排名推广">排名推广</a></dd><dd><a href="{$EXT[ad_url]}" target="_blank" title="广告服务">广告服务</a></dd><dd><a href="{$MODULE[2][linkurl]}ad.php" target="_blank" rel="nofollow" title="我的广告">我的广告</a></dd><dd><a href="{$EXT[spread_url]}" target="_blank" title="热门推广">热门推广</a></dd></dl><dl><dt><i class="iconfont"></i>旗下网站</dt><dd><a href="/" target="_blank" title="支模网" >支模网</a></dd></dl></div><div class="copyright reserved"><p>{$DT[copyright]}</p><p>版权所有 2019-2020 山东方圆建筑材料有限公司 {$DT[sitename]} <a href="/" title="ICP备案" target="_blank" rel="nofollow">{$DT[icpno]}</a></p><p>公司地址：山东省临沂市兰山区西外环路与双岭路交汇南600米路东(钢材市场9号门)408</p></div></div>
</div><!--右侧悬浮-->
<div class="right-fixed"><a rel="nofollow" href="//wpa.qq/msgrd?v=3&uin=2424348224&site=网站客服&menu=yes" target="_blank" class="kegu-box" title="{$DT[sitename]}客服"><div class="qqTip"><div class="service clearfix"><div class="WeChat fl"><img src="{$DT[erwei]}" title="公众号关注"/><p>公众号关注</p></div><i class="line fl"></i><div class="qq fl"><i></i><p>QQ客服</p></div></div><div class="work-time"><p>周一至周五 9:00-18:00</p><p>（非工作时间请留言）</p></div></div></a><div class="wx-box"><div class="wx-erwema"></div></div><a href="{$MODULE[2][linkurl]}my.php?mid={$moduleid}&action=add" target="_blank" class="ShoppingCar-link" rel="nofollow" title="发布视频"></a><div class="back-top"></div>
</div>
<div style="display: none;"><script src="{DT_SKIN}video/list/js/z_stat.js" language="JavaScript"></script>
</div><script src="{DT_SKIN}video/list/js/layui.js"></script>
<script src="{DT_SKIN}video/list/js/jquery.3.1.1.min.js"></script>
<script src="{DT_SKIN}video/list/js/header.js"></script><script src="{DT_SKIN}video/list/js/index.js"></script>
<script>var flag=true;$('.tags-list .tagsno').hide();$('.unfold').click(function () {flag=!flag;if (flag) {$('.tags-list .tagsno').slideUp();$('.unfold i').removeClass("up").addClass('down');$('.unfold span').text('展开');$('.show').removeClass("show").addClass('hide');} else {$('.tags-list .tagsno').slideDown();$('.unfold span').text('收起');$('.unfold i').removeClass("down").addClass('up');$('.hide').removeClass("hide").addClass('show');}})
</script></body>
</html>
更多推荐
分享视频页面模板界面+带列表页自动播放【html5】
发布评论