判断视频类型以及是否上传图片

这是自己在做项目时做的，记录一下，以免丢失

首先是HTML代码

<div class="swiper">
	<!--用户视频-->
	<a class="iconfont icon-fanhui fanhui" href="javascript:void(0);"></a>
	<div class="video-area" id="player-con" style="height:4.2rem;">
	</div>
	<!--用户图片-->
	<div class="swiper-container">
		<div class="swiper-wrapper">
		</div>
		 <div class="swiper-pagination"></div>
	</div>	
	<div class="user">
		<span id="username"></span>
		<span id="targetUid"></span>
	</div>
</div>

接下来是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("<div class='swiper-slide'><img         src='images/img/name_share_background@2x.png'/></div>");
	getVideo(targetid, vid);	
}else{
	//用户图片
	$(".video-area").css("display", "none");
	var bannerHtml = "";
	var len = imgurl.length;
	for(var i=0;i<len;i++){
		bannerHtml+='<div class="swiper-slide" style="z-index:-1;overflow:hidden;"><img src="'+imgurl[i]+'"/></div>';
		}
	$(".swiper-wrapper").html(bannerHtml);
		var swiper = new Swiper('.swiper-container', {
		slidesPerView: 1,
		spaceBetween: 30,
		loop: true,
	    pagination: {
		el: '.swiper-pagination',
		 type: 'fraction',
	 },
	 navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	 },
});
}

还是一个有强迫症的，这东西写的时候花了好多时间，虽然入这行很久了，但是毕竟也没有太多技术，哈哈哈哈

 

//获取视频
	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}
                ]
            }
        ]
		})
	}

 视频当时是从后台拿的，这里就不改了。

还有一个比较重要的文件，有需要的朋友，可以找我拿