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

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

首先是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
'; } $(".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}
                ]
            }
        ]
		})
	}

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

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

 

你可能感兴趣的:(Html)