这是自己在做项目时做的,记录一下,以免丢失
首先是HTML代码
接下来是css
.swiper{
position:relative;
height:4.2rem;
font-size:0.2rem;
}
.swiper-container {
height:4.2rem;
font-size:0.2rem;
}
.swiper-pagination{
float:right;
}
.user{
line-height:0.5rem;
height:0.5rem;
color:#F4F4F4;
width:3rem;
text-align:center;
border-radius:10px;
margin-left:2.5rem;
font-size:0.16rem;
background-color:rgba(0,0,0,.4);
z-index:1;
position:absolute;
bottom:0.2rem;
}
其实也不是很多哈,这个图片是轮播的,所以一定要用swpier插件,网上就能找到
下面是js
if(imgurl == ""){
//默认图片路径
$(".swiper-container").css("display", "none");
$(".swiper-wrapper").html("");
getVideo(targetid, vid);
}else{
//用户图片
$(".video-area").css("display", "none");
var bannerHtml = "";
var len = imgurl.length;
for(var i=0;i
还是一个有强迫症的,这东西写的时候花了好多时间,虽然入这行很久了,但是毕竟也没有太多技术,哈哈哈哈
//获取视频
var playAuth;
function getVideo(uid, videoId){
$.ajax({
type:"get",
url:"路径",
data: {uid:uid, videoId:videoId},
dataType: 'json',
beforeSend: function () {
loading();
},
success :function(res){
if(res.code == 0) {
initVideo(videoId, res.data.video.playAuth);
}
},
error :function(res){
console.log(res);
}
});
}
function initVideo(vid, playauth){
var player = new Aliplayer({
"id": "player-con",
"vid":vid,
"playauth":playauth,
"skinLayout":[
{name: "bigPlayButton", align: "cc", x: 30, y: 80},
{
name: "H5Loading", align: "cc"
},
{name: "errorDisplay", align: "tlabs", x: 0, y: 0},
{name: "infoDisplay"},
{name:"tooltip", align:"blabs",x: 0, y: 56},
{name: "thumbnail"},
{
name: "controlBar", align: "blabs", x: 0, y: 0,
children: [
{name: "progress", align: "blabs", x: 0, y: 44},
{name: "playButton", align: "tl", x: 15, y: 12},
{name: "timeDisplay", align: "tl", x: 10, y: 7},
{name: "fullScreenButton", align: "tr", x: 10, y: 12},
{name:"subtitle", align:"tr",x:15, y:12},
{name:"setting", align:"tr",x:15, y:12},
{name: "volume", align: "tr", x: 5, y: 10}
]
}
]
})
}
视频当时是从后台拿的,这里就不改了。
还有一个比较重要的文件,有需要的朋友,可以找我拿