php视频集数切换,（主要）原生php+H5 视频播放二 视频播放及切换

2.播放列表(播放，切换)

主要是H5的视频控件，以及配合js，使用户交互更顺滑。

①原php+html部分(含css)

header("content-type:text/html;charset=utf-8");

include_once('/opt/c*******inc/global.php');

$ms = new Mysqls();

$album_id = $_GET['album_id'];

$sql = "select ********`=1 limit 10" ;

$data = $ms->getRows($sql);

$sql = "select count(*) a******`={$album_id} and `state`=1 limit 1" ;

$num = $ms->getRow($sql);

$sql = "select *****where `id`={$album_id} limit 1" ;

$album_data = $ms->getRow($sql);

$sql = "select * from `user` where `id`={$album_data['user_id']} limit 1" ;

$user = $ms->getRow($sql);

?>

早教故事

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('')}else{document.write('')}} else {document.write('')}

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');}

.fix{position:fixed;top:0;left:0;width:100%;background:#000;}

.head{width:100%;height:352px;position:relative;}

/* .head{width:100%;height:352px;position:fixed;top：0;left：0;} */

.head img{width:100%;height:352px;filter: blur(9px);}

.head .out{position:absolute;top:0;left:0;width:100%;height:352px;background:rgba(0,0,0,0.7);}

.pic{position:absolute;top:44px;left:256px;width:238px;height:238px;}

.pic img{width:238px;height:238px;filter:blur(0px);}

.introduce{background:#fff;width:100%;margin-top:352px;}

.name{float:left;margin:46px 0 0 44px;width:514px;}

.title{font-size:32px;font-weight:bold;color:#2c2d2e;}

.portrait{float:left;width:41px;height:41px;border-radius:100%;overflow:hidden;margin:16px 20px 30px 0;}

.portrait img{width:41px;height:41px;}

.signer{float:left;font-size:26px;color:#8a8a8a;margin-top:26px;}

.btn{float:left;width:136px;height:48px;border:2px solid #1ab7e2;border-radius:48px;color:#1ab7e2;font-size:26px;text-align:center;line-height:49px;margin-top:60px;}

.tip{clear:both;font-size:30px;color:#8a8a8a;line-height:1.5em;padding:0 44px 34px 44px;}

.num{font-size:27px;color:#929292;padding:11px 0 11px 44px;}

ul{background:#fff;padding-bottom:30px;}

li{height:145px;}

.on{width:12px;height:80%;float:left;margin:18px 30px 0 0;}

.a{background:#2c2d2e;}

.bor{width:700px;float:left;border-bottom:2px solid #f0f0f0;}

.mid{width:586px;float:left;}

.caption{font-size:32px;color:#2c2d2e;padding:28px 0 20px 0;}

.time{width:158px;float:left;color:#acacac;font-size:20px;margin-bottom:30px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}

.time span{color:#d2d3d4;}

.watch{float:left;color:#acacac;font-size:20px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}

.watch span{color:#d2d3d4;}

.bo{float:left;font-size:32px;line-height:144px;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;color:#fff;}

.b{color:#393a3b;}

.loading{clear:both;margin:0 auto;width:200px;text-align:center;color:#555;/*display:none;*/}

.loading i{display:inline-block;width:15px;height:15px;background:url(http://filebaby.qubaobei.com/box/images/phone/loading.png) no-repeat;background-size:15px 15px;animation:loading 0.8s linear infinite;-moz-animation:loading 0.8s linear infinite;-webkit-animation:loading 0.8s linear infinite;}

.loading span{margin-left:8px;}

.intro{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);display:none;}

.close{font-size:70px;color:#fff;text-align:right;margin:30px 30px 0 0;font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale;}

.writer{width:140px;height:140px;border-radius:140px;overflow:hidden;margin:130px auto 40px;}

.writer img{width:100%;height:100%;}

.named{font-size:34px;color:#fff;text-align:center;}

.intro p{width:88%;margin:50px auto;font-size:30px;color:#fff;line-height:1.5em;}

专辑介绍

共<?php echo $num['ct'];?>个故事

•  <?php echo date("i:s",$v['time']);?>

   <?php echo $v['num'];?>

  

正在加载...



②JS交互部分

var album_id = "<?php echo $album_id; ?>";

var page = 2;

$(function(){

$("ul li:eq(0)").find(".on").addClass("a");

$("ul li:eq(0)").find(".bo").addClass("b");

})

//无刷新切换视频

function changeTv(content,img,video){

$(".on").removeClass("a");

$(".bo").removeClass("b");

$(content).find(".on").addClass("a");

$(content).find(".bo").addClass("b");

$(".head").children().remove();

var str = "";//替换原来的视频控件

$(".head").append(str);

}

//上划触底加载(翻页)

function getMore(){

var stt = '';

$.get("sub/get_box_list.php?page="+page+"&album_id="+album_id,function(data){

$("#more").hide();

var data = JSON.parse(data);

console.log(data);

if(data['ret']==1){

stt = editData(data['data']);

$("#content").append(stt);

page++;

}else{

alert("亲，没有啦~")

page=-1;

}

});

}

//新数据处理

function editData(data){

var stt = '';

$.each(data,function(i,i_val){

var daren = '';

var id = i_val['id'];

var pic = i_val['pic'];

var high_url = i_val['high_url'];

var name = i_val['name'];

var time = s_to_hs(i_val['time']);

var num = i_val['num'];

stt = stt+"

"+name+"

 "+time+"

 "+num+"



"

});

return stt;

}

//触底事件监听

$(window).scroll(function() {

if(page < 0){

return false;

}

var scrollTop = $(this).scrollTop();

var scrollHeight = $(document).height();

var windowHeight = $(this).height();

var cha = scrollHeight - scrollTop - windowHeight;

if (cha<10) {

$("#more").show();

getMore();

}

});

/**

* 将秒转换为 分:秒(额外功能数据忽略)

* s int 秒数

*/

function s_to_hs(s){

//计算分钟

//算法：将秒数除以60，然后下舍入，既得到分钟数

var h;

h = Math.floor(s/60);

//计算秒

//算法：取得秒%60的余数，既得到秒数

s = s%60;

//将变量转换为字符串

h += '';

s += '';

//如果只有一位数，前面增加一个0

h = (h.length==1)?'0'+h:h;

s = (s.length==1)?'0'+s:s;

return h+':'+s;

}

$(".btn").click(function(){

$(".intro").show()

})

$(".close").click(function(){

$(".intro").hide()

})

本文分享 CSDN - 阿……莫西林。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。