分享视频页面模板界面+带列表页自动播放【html5】

最新推荐文章于 2021-10-21 15:23:42 发布
luo2424348224
最新推荐文章于 2021-10-21 15:23:42 发布
阅读量1w
点赞数 8
分类专栏：前端技术文章标签：视频模板列表界面 html5
本文链接：https://blog.youkuaiyun.com/luo2424348224/article/details/104096323
版权
前端技术专栏收录该内容
18 篇文章
订阅专栏
分享自己网站的视频栏目界面，支持动态展示效果，支持自适应，支持列表页鼠标移动自动播放视频属性。
演示页面： http://www.sdfymj.com/
代码附上：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="//ae.bdstatic.com/">
<link rel="dns-prefetch" href="//msite.baidu.com">
<link rel="dns-prefetch" href="//mipcache.bdstatic.com">
<link rel="dns-prefetch" href="//c.mipcdn.com">
<link rel="dns-prefetch" href="//c.mipcdn.com">
<link rel="dns-prefetch" href="//www.sdfymj.com">
<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="http://fcvideo.cdn.bcebos.com/5c02806178c8ce1dd3f04772141de284.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>
				&raquo; <a href="{$MOD[linkurl]}">{$MOD[name]}</a> &raquo; {cat_pos($CAT, ' &raquo; ')}
			</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">&#xe608;</i>关于云建网</dt>
                <dd><a href="http://www.sdfymj.com/announce/" 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">&#xe60c;</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">&#xe641;</i>资料下载</dt>
               <dd><a href="http://www.sdfymj.com/down/list-51.html" target="_blank" title="建筑工程" >建筑工程</a></dd>
                <dd><a href="http://www.sdfymj.com/down/list-50.html" target="_blank" title="路桥工程" >路桥工程</a></dd>
                <dd><a href="http://www.sdfymj.com/down/list-52.html" target="_blank" title="水利工程" >水利工程</a></dd>
                <dd><a href="http://www.sdfymj.com/down/list-54.html" target="_blank" title="材料安装" >材料安装</a></dd>
				<dd><a href="http://www.sdfymj.com/down/list-54.html" target="_blank" title="教育考试" >教育考试</a></dd>
            </dl>
            <dl>
                <dt><i class="iconfont" target="_blank">&#xe6de;</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">&#xe6c5;</i>旗下网站</dt>
                <dd><a href="http://zhimo.yuanzhumuban.cc/" target="_blank" title="支模网" >支模网</a></dd>
            </dl>
        </div>
        <div class="copyright reserved">
            <p>{$DT[copyright]}</p>
            <p>版权所有 2019-2020 山东方圆建筑材料有限公司 {$DT[sitename]} <a  href="http://www.beian.miit.gov.cn/" 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.com/msgrd?v=3&amp;uin=2424348224&amp;site=网站客服&amp;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>