outaozhen 3 年之前
父节点
当前提交
4bfcc94762
共有 12 个文件被更改,包括 152 次插入303 次删除
  1. 0 51
      bannerTest.html
  2. 0 151
      css/banner.css
  3. 3 3
      css/video.css
  4. 94 0
      js/video.js
  5. 55 98
      js/videoList.js
  6. 二进制
      video/czdingwei.jpg
  7. 二进制
      video/fxxiezuo.jpg
  8. 二进制
      video/fzzhengkuai.jpg
  9. 二进制
      video/gydjwenjian.jpg
  10. 二进制
      video/mbkelong.jpg
  11. 二进制
      video/qdjianling.jpg
  12. 二进制
      video/tiaojia.jpg

+ 0 - 51
bannerTest.html

@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta http-equiv="x-ua-compatible" content="ie=edge">
-  <title>大司空云计价 - 远程办公,用免费正版市政计价软件</title>
-  <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
-  <link rel="stylesheet" href="css/banner.css">
-  <link rel="stylesheet" href="css/video.css">
-</head>
-<body>
-  <div class="bannerBox">
-    <div class="width1200">
-      <div class="banner">
-        <div class="lottie" id="lottie"></div>
-        <div class="bannerTitleBox">
-          <div class="bannerTitle bannerTitle1">云上协同</div>
-          <div class="bannerTitle bannerTitle2">积累造价数据资产</div>
-          <div class="bannerTitle3 mt-4">市政建筑计价免费版 永久免费</div>
-          <div class="mt-4"><a href="" class="btn btn-primary btnHand">立即体验</a></div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <!-- JS. -->
-  <script src="js/jquery/jquery-3.2.1.min.js"></script>
-  <script src="js/bootstrap/bootstrap.min.js"></script>
-  <!-- <script src="js/global.js"></script> -->
-  <script src="https://cdn.bootcdn.net/ajax/libs/lottie-web/5.8.1/lottie.min.js"></script>
-  <script type="text/javascript">
-    var anim;
-    var elem = document.getElementById('lottie');
-    lottie.loadAnimation({
-      container:elem,
-      renderer:'svg',
-      loop:true,
-      autoplay:true,
-      path:'https://assets5.lottiefiles.com/packages/lf20_yp6mzzyc.json',
-    });
-    // 滚动条到顶部的垂直高度
-    console.log($(window).scrollTop());
-    // 浏览器显示区域(可视区域)的高度
-    console.log($(window).height());
-    // 获取页面的文档高度
-    // console.log($('.productTwo').offset().top);
-    console.log();
-  </script>
-</body>
-
-</html>

+ 0 - 151
css/banner.css

@@ -1,151 +0,0 @@
-@charset "utf-8";
-body{
-	padding: 0;
-  margin: 0;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 12px;
-  font-family:"微软雅黑","Tahoma";
-  vertical-align: baseline;
-  text-align:justify;
-  word-wrap:break-word;
-  text-justify:inter-ideograph;
-  color: #000000cc;
-}
-.navBody{
-  background: rgba(33, 33, 41, 1);
-  height: 36px;
-  color: #fff;
-}
-.globalNav a{
-  float:left;
-  height:36px;
-  line-height:36px;
-  padding:0 10px;
-  color:#eee;
-  position: relative;
-  cursor: pointer
-}
-.globalNav a:hover{
-  background:#666E70;
-  color:#fff
-}
-.globalNav a.now{
-  background:#008FFF;
-  color:#fff;
-  font-weight:600
-}
-.globalNav .zhzd{
-  float:left;
-  height:36px;
-  position: relative;
-  z-index:999
-}
-.globalNav .zhzd a b{
-  border-color: #FFDDC9 transparent transparent;
-  border-right: 3px dashed transparent;
-  border-style: solid dashed dashed;
-  border-width: 3px 3px 0;
-  display: inline-block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  width: 0;
-  position: relative;
-  top:-1px;
-  left:4px
-}
-.globalNav .zhzd .zhzdMenu{
-  position: absolute;
-  left:0;
-  top:29px;
-  background:#fff;
-  border:1px solid #ccc;
-  border-top:none;
-  box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 0;
-  display:none
-}
-.globalNav .zhzd .zhzdMenu a{
-  width:100%;
-  padding:0;
-  text-align:center;
-  color:#3366cc
-}
-.globalNav .zhzd .zhzdMenu a:hover{
-  background:#f2f2f2
-}
-.globalNav .zhzd a.now{
-  background:#fff;
-  border:1px solid #ccc;
-  border-bottom:none;
-  border-top:none;
-  color:#3366cc;
-  z-index:10
-}
-.width1200{
-  max-width: 1200px;
-  margin: 0 auto;
-}
-.table-cell{
-	display: table-cell;
-	vertical-align: middle;
-}
-.btnText{
-	padding-right: 10px;
-	font-size: 16px;
-	font-weight: 500;
-}
-.bannerBox{
-	height: 950px;
-	background: rgba(245, 247, 253, 1);
-}
-.banner{
-	position: relative;
-	width: 100%;
-	max-height: 950px;
-	/*background: url(img/image_banner_01.png) no-repeat right -110px;*/
-}
-.banner .lottie{
-    position: relative;
-    z-index: 50;
-    width: 100%;
-    height: 100%;
-}
-.bannerTitleBox{
-	position: absolute;
-	top: 30%;
-	z-index: 60;
-}
-.bannerTitle{
-	font-size: 64px;
-	font-weight: 600;
-}
-.bannerTitle1{
-	color: rgba(47, 84, 235, 1);
-}
-.bannerTitle2{
-	color: rgba(0, 0, 0, 0.8);
-}
-.bannerTitle3{
-	color: rgba(0, 0, 0, 0.5);
-	font-size: 24px;
-}
-.btnHand{
-	font-size: 24px;
-	font-weight: 500;
-	padding: 16px 32px;
-}
-.moreBox{
-	position: absolute;
-	bottom: 30px;
-}
-.moreBox h4{
-	font-size: 14px;
-	color: rgba(47, 84, 235, 1);
-}
-.moreBox .iconMore{
-	width: 32px;
-	height: 54px;
-	background: url(img/css_sprites.png) no-repeat -80px -1078px;
-}

+ 3 - 3
css/video.css

@@ -1422,7 +1422,7 @@ video::-webkit-media-text-track-display {
 .vjs-playlist{padding:0;color:#000000cc;list-style-type:none}
 .vjs-playlist img{display:block;height:auto;width:auto}
 .vjs-playlist .vjs-playlist-item-list{position:relative;margin:0;padding:0;list-style:none}
-.vjs-playlist .vjs-playlist-item{position:relative;cursor:pointer;}
+.vjs-playlist .vjs-playlist-item{position:relative;cursor:pointer;width: 350px;}
 .vjs-playlist .vjs-playlist-thumbnail-placeholder{background:#303030}
 .vjs-playlist .vjs-playlist-now-playing-text{display:none;position:absolute;top:0;left:0;padding-left:2px;margin:.8rem}
 .vjs-playlist .vjs-playlist-duration{
@@ -1457,8 +1457,8 @@ video::-webkit-media-text-track-display {
 }
 .vjs-playlist .vjs-selected .vjs-playlist-now-playing-text{
   position: absolute;
-  left: 45px;
-  top: 15px;
+  left: 43px;
+  top: 13px;
   width: 24px;
   height: 24px;
   background: url(img/css_sprites.png) no-repeat -130px -1125px;

+ 94 - 0
js/video.js

@@ -0,0 +1,94 @@
+window.onload = function(){
+	
+	var video = document.getElementById("video");
+	var lis = document.getElementsByTagName("li");
+	var vLen = lis.length; // 播放列表的长度
+	var url = [];
+	var ctrl = document.getElementById("playList-hidden");
+	var ctrl_show = document.getElementById('playList-show1');
+	var aside = document.getElementById("playList");
+	var curr = 1; // 当前播放的视频
+	
+	for(var i=0;i<lis.length;i++){
+		
+			url[i] = lis[i].getAttribute("value");
+			
+	}
+	
+	//绑定单击事件
+	for(var i=0;i<lis.length;i++){
+		
+			lis[i].onclick = function(){
+				for(var j=0;j<lis.length;j++){
+					if(lis[j] == this){
+						video.setAttribute("src",this.getAttribute("value"));
+						video.setAttribute('autoplay','autoplay');
+						// this.innerHTML = 'palying '+this.innerHTML;
+						this.innerHTML = this.innerHTML;
+						this.className = "select";
+						curr = j+1;
+					}else{
+						lis[j].innerHTML = lis[j].getAttribute("title");
+						lis[j].className = "";
+					}
+				}
+				
+			
+//			console.log(this.getAttribute("value"));  //调试代码
+		}
+			
+	}	
+	
+	//收起播放列表
+	ctrl.onclick = function(){
+		
+		aside.style.transition = "1s";
+		aside.style.transform = "translateX(-10vw)";
+		setTimeout(function(){
+			aside.style.display = "none";
+			ctrl_show.style.visibility= 'visible';
+		},"1000");
+	
+	}
+	
+	//展开播放列表
+	ctrl_show.onclick = function(){
+		aside.style.display = "block";
+		ctrl_show.style.visibility= 'hidden';
+		setTimeout(function(){
+			aside.style.transform = "translateX(0vw)";
+		},"0");
+	
+	}
+
+	video.setAttribute('src',url[0]);
+	// lis[0].innerHTML = 'palying '+lis[0].innerHTML;
+	lis[0].innerHTML = lis[0].innerHTML;
+	lis[0].className = "select";
+	
+	
+	
+	video.addEventListener('ended', play);
+	//play();
+	function play() {
+	   video.src = url[curr];
+	   video.load(); // 如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
+	   video.play();
+	   
+	   for(var j=0;j<lis.length;j++){
+			if(j == curr){
+				video.setAttribute("src",lis[j].getAttribute("value"));
+				video.setAttribute('autoplay','autoplay');
+				// lis[j].innerHTML = 'palying '+lis[j].innerHTML;
+				lis[j].innerHTML = lis[j].innerHTML;
+				lis[j].className = "select";
+			}else{
+				lis[j].innerHTML = lis[j].getAttribute("title");
+				lis[j].className = "";
+			}
+		}
+	   curr++;
+	   if (curr >= vLen) curr = 0; // 播放完了,重新播放
+	}
+	
+}

+ 55 - 98
js/videoList.js

@@ -3,190 +3,147 @@ var player = videojs('example');
 	player.playlist([
 	{
 	  name:'视频教程-调价',
-	  // description:'Explore the depths of our planet\'s oceans.',
-	  duration:596,
+	  // description:'视频教程-调价',
+	  duration:110,
 	  sources: [{
-	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/调价.mp4',
 	    type: 'video/mp4'
 	  }],
-	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
+	  poster:'video/tiaojia.jpg',
 	  thumbnail: [
 	  	{
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
+          srcset: 'video/tiaojia.jpg',
+          type: 'image/jpg',
+          media: '(max-width: 130px;)'
         },
 	  	{
-	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
+	  		src:'video/tiaojia.jpg'
 	  	}
   	  ]
 	},
 	{
 	  name:'视频教程-共用单价文件',//视频标题
-	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:52,//视频总时长,单位秒(s)
+	  // description:'视频教程-共用单价文件',//视频描述
+	  duration:112,//视频总时长,单位秒(s)
 	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/共用单价文件.mp4',
 	    type: 'video/mp4'
 	  }],
 	  //视频封面地址
-	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
+	  poster:'video/gydjwenjian.jpg',
 	  //右侧视频播放列表的图片
 	  thumbnail: [
 	  	{//默认图片
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
+          srcset: 'video/gydjwenjian.jpg',
+          type: 'image/jpg',
           media: '(max-width: 130px;)'
         },
 	  	{//实际视频缩略图图片
-	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
+	  		src:'video/gydjwenjian.jpg'
 	  	}
   	  ]
 	}, {
 	  name:'视频教程-清单精灵',//视频标题
 	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:734,//视频总时长,单位秒(s)
+	  duration:110,//视频总时长,单位秒(s)
 	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
-	    type: 'application/x-mpegurl'
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/清单精灵.mp4',
+	    type: 'video/mp4'
 	  }],
 	  //视频封面地址
-	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
+	  poster:'video/qdjianling.jpg',
 	  
 	  thumbnail: [
 	  	{//默认图片
-          srcset: 'img/jinjihu.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
+          srcset: 'video/qdjianling.jpg',
+          type: 'image/jpg',
+          media: '(max-width: 130px;)'
         },
 	  	{//实际视频缩略图图片
-	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
+	  		src:'video/qdjianling.jpg'
 	  	}
   	  ]
 	},
 	{
-	  name:'视频教程-调价',
+	  name:'视频教程-查找定位',
 	  description:'Explore the depths of our planet\'s oceans.',
-	  duration:596,
+	  duration:122,
 	  sources: [{
-	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/查找定位.mp4',
 	    type: 'video/mp4'
 	  }],
-	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
+	  poster:'video/czdingwei.jpg',
 	  thumbnail: [
 	  	{
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
+          srcset: 'video/czdingwei.jpg',
+          type: 'image/jpg',
+          media: '(max-width: 130px;)'
         },
 	  	{
-	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
+	  		src:'video/czdingwei.jpg'
 	  	}
   	  ]
 	},
 	{
-	  name:'视频教程-共用单价文件',//视频标题
+	  name:'视频教程-分享协作',//视频标题
 	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:52,//视频总时长,单位秒(s)
+	  duration:116,//视频总时长,单位秒(s)
 	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/分享协作.mp4',
 	    type: 'video/mp4'
 	  }],
 	  //视频封面地址
-	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
+	  poster:'video/fxxiezuo.jpg',
 	  //右侧视频播放列表的图片
 	  thumbnail: [
 	  	{//默认图片
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
+          srcset: 'video/fxxiezuo.jpg',
+          type: 'image/jpg',
           media: '(max-width: 130px;)'
         },
 	  	{//实际视频缩略图图片
-	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
+	  		src:'video/fxxiezuo.jpg'
 	  	}
   	  ]
 	}, {
-	  name:'视频教程-清单精灵',//视频标题
+	  name:'视频教程-模版克隆',//视频标题
 	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:734,//视频总时长,单位秒(s)
+	  duration:113,//视频总时长,单位秒(s)
 	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
-	    type: 'application/x-mpegurl'
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/模板克隆.mp4',
+	    type: 'video/mp4'
 	  }],
 	  //视频封面地址
-	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
+	  poster:'video/mbkelong.jpg',
 	  
 	  thumbnail: [
 	  	{//默认图片
-          srcset: 'img/jinjihu.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
+          srcset: 'video/mbkelong.jpg',
+          type: 'image/jpg',
+          media: '(max-width: 130px;)'
         },
 	  	{//实际视频缩略图图片
-	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
+	  		src:'video/mbkelong.jpg'
 	  	}
   	  ]
 	},
 	{
-	  name:'视频教程-调价',
+	  name:'视频教程-复制整块',
 	  description:'Explore the depths of our planet\'s oceans.',
-	  duration:596,
+	  duration:95,
 	  sources: [{
-	    src: 'https://d4.smartcost.com.cn/%E5%91%86%E7%93%9C%E5%AD%A6%E9%80%A0%E4%BB%B7-%E5%85%AC%E8%B7%AF%E7%AF%87-%E6%9C%89logo.mp4',
+	    src: 'https://d1.video.smartcost.com.cn/video/play/2020/复制整块.mp4',
 	    type: 'video/mp4'
 	  }],
-	  poster:'http://media.w3.org/2010/05/bunny/poster.png',
+	  poster:'video/fzzhengkuai.jpg',
 	  thumbnail: [
 	  	{
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
-        },
-	  	{
-	  		src:'http://media.w3.org/2010/05/bunny/poster.png'
-	  	}
-  	  ]
-	},
-	{
-	  name:'视频教程-共用单价文件',//视频标题
-	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:52,//视频总时长,单位秒(s)
-	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d1video.smartcost.com.cn/video/play/2018/step1.mp4',
-	    type: 'video/mp4'
-	  }],
-	  //视频封面地址
-	  // poster:'http://media.w3.org/2010/05/sintel/poster.png',
-	  //右侧视频播放列表的图片
-	  thumbnail: [
-	  	{//默认图片
-          srcset: 'test/example/oceans.jpg',
-          type: 'image/jpeg',
+          srcset: 'video/fzzhengkuai.jpg',
+          type: 'image/jpg',
           media: '(max-width: 130px;)'
         },
-	  	{//实际视频缩略图图片
-	  		src:'http://media.w3.org/2010/05/sintel/poster.png'
-	  	}
-  	  ]
-	}, {
-	  name:'视频教程-清单精灵',//视频标题
-	  description:'Explore the depths of our planet\'s oceans.',//视频描述
-	  duration:734,//视频总时长,单位秒(s)
-	  sources: [{//视频资源地址以及视频的MIME类型
-	    src: 'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/playlist.m3u8',
-	    type: 'application/x-mpegurl'
-	  }],
-	  //视频封面地址
-	  poster:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg',
-	  
-	  thumbnail: [
-	  	{//默认图片
-          srcset: 'img/jinjihu.jpg',
-          type: 'image/jpeg',
-          media: '(min-width: 400px;)'
-        },
-	  	{//实际视频缩略图图片
-	  		src:'http://d2zihajmogu5jn.cloudfront.net/tears-of-steel/tears_of_steel.jpg'
+	  	{
+	  		src:'video/fzzhengkuai.jpg'
 	  	}
   	  ]
 	}

二进制
video/czdingwei.jpg


二进制
video/fxxiezuo.jpg


二进制
video/fzzhengkuai.jpg


二进制
video/gydjwenjian.jpg


二进制
video/mbkelong.jpg


二进制
video/qdjianling.jpg


二进制
video/tiaojia.jpg