前端页面原生php+H5 视频播放一专辑列表页（专辑页list）

1.专辑页（分类页）

<?php
header("content-type:text/html;charset=utf-8");
include_once('/*******inc/global.php');//配置文件
$ms     = new Mysqls();
$sql    = "select * from ******* order by id desc limit 20" ;//获取视频数据（数据少未分页）
$data   = $ms->getRows($sql);
foreach($data as $k=>$v){//查找作者$sql    = "select * from `user` where `id`={$v['user_id']} limit 1" ;$user   = $ms->getRow($sql);$data[$k]['head'] = $user['avatar'];$data[$k]['nickname'] = $user['nickname'];
}
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0,telephone=no" />
<meta name="format-detection" content="telephone=no" />
<title>早教故事列表</title>
<script language="javascript">
var phoneWidth = parseInt(window.screen.width);var iwidth = 750;var phoneScale = phoneWidth/iwidth;var ua = navigator.userAgent;var os = 1;if (/Android (\d+\.\d+)/.test(ua)){var version = parseFloat(RegExp.$1);os = 2;if(version>2.3){document.write('<meta name="viewport" content="width='+iwidth+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+iwidth+', target-densitydpi=device-dpi">')}} else {document.write('<meta name="viewport" content="width='+iwidth+', user-scalable=no, target-densitydpi=device-dpi">')}
</script>
<style type="text/css">
body{margin:0;padding:0;font-family:Arial;font-size:24px;background:#f3f3f3;}
ul,li,dl,dt,dd,p,div{margin:0;padding:0;list-style:none}
@font-face{font-family:'iconfont';src:url('font/iconfont.woff') format('woff'),url('font/iconfont.ttf') format('truetype');}li{float:left;width:340px;border-radius:13px;overflow:hidden;background:#fff;margin:28px 0 0 23px;}
.pic{position:relative;}
.pic img{width:340px;height:340px;}
.out{position:absolute;top:0;left:0;width:324px;height:52px;border-radius:13px 13px 0 0;background:rgba(0,0,0,0.3);font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;color:#fff;font-size:20px;text-align:right;padding:288px 16px 0 0;}
.out span{font-size:24px;}
.name{font-size:26px;color:#2c2d2e;padding:20px 0 0 16px;}
.head{float:left;width:41px;height:41px;border-radius:100%;overflow:hidden;margin:20px 13px 28px 16px;}
.head img{width:41px;height:41px;}
.signer{float:left;font-size:21px;color:#2c2d2e;margin-top:30px;}
</style>
</head>
<body>
<ul><?php foreach($data as $v): ?><li onclick="window.location.href='index.php?action=goto_box&album_id='+<?php echo $v['id']; ?>"><div class="pic"><img src="<?php echo $v['pic']; ?>" /><div class="out"><span></span>&nbsp;&nbsp;<?php echo $v['num']; ?></div></div><div class="name"><?php echo $v['name']; ?></div><div class="head"><img src="http://www.qubaobei.com/<?php echo $v['head']; ?>" /></div><div class="signer"><?php echo $v['nickname']; ?></div></li><?php endforeach; ?>
</ul>
</body>
</html>

2.内容播放列表

前端页面原生php+H5 视频播放一专辑列表页（专辑页list）相关推荐

制作统一样式的H5视频播放器
前言之前,忙于考试未来及更新文章.本文适用于掌握JavaScript html css jQuery的基本内容的读者.不知大家有没注意原生的H5视频播放器用不同的浏览器打开所呈现的效果并不一样.而如 ...
js文件导入前端页面无法渲染的问题
之前修改了一个用后端渲染前端页面的一个首页代码,都是用原声html写的,后期想用bootstrap和其他插件对其页面进行渲染一下,发现在js文件中加入class样式时,前端页面竟然没有显示,在浏览器中 ...
好程序员web前端培训分享做H5页面需要学什么
好程序员web前端培训分享做H5页面需要学什么,很多人问过我这个问题,而问这个问题的人基本上都是刚听说过h5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做 ...
前端开发入门：H5页面需要学什么？
H5需要做什么?很多人千锋广州前端老师这个问题,而问这个问题的人基本上都是刚听说过H5,处在懵懂的阶段,他们往往会被一些网上炫酷页面所吸引,开始的目的也很简单,能通过自己的努力做出这些页面,而这些页面 ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
android原生和H5交互(转)
最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下Android原生和 H5 之间交互的方法,这里来总结一下: 1.hybrid通信,主要就是前端的js和我们Androi ...
使用vue二次开发海康监控H5视频播放
使用vue二次开发海康监控H5视频播放西瓜播放器示例demo 阿里云的示例demo 使用海康的H5视频开发包, 海康的api 页面中的使用第一步第二步第三步第四步切记 bug 由于公司项目 ...
让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案 1
Chimee(读"奇米", [tʃɪ'mɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造. Chimee ...
android原生和H5交互
最近在左一个Android原生的H5混合开发的APP,之前还没有好好的总结一下Android原生和 H5 之间交互的方法,这里来总结一下: 1.hybrid通信,主要就是前端的js和我们Androi ...

前端页面原生php+H5 视频播放一专辑列表页（专辑页list）

1.专辑页（分类页）

2.内容播放列表

前端页面原生php+H5 视频播放一专辑列表页（专辑页list）相关推荐

最新文章

热门文章

前端页面 原生php+H5 视频播放一 专辑列表页（专辑页list）

1.专辑页（分类页）

2.内容播放列表

前端页面 原生php+H5 视频播放一 专辑列表页（专辑页list）相关推荐

最新文章

热门文章

前端页面原生php+H5 视频播放一专辑列表页（专辑页list）

前端页面原生php+H5 视频播放一专辑列表页（专辑页list）相关推荐