123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- var video=document.querySelectorAll('video')
- // console.log(video)
- var goTop=document.querySelector('.aside')
- var leftArrow = document.querySelector('.leftArrow');
- var rightArrow = document.querySelector('.rightArrow');
- var videolist = document.querySelectorAll('.video');
- var playControl=document.querySelectorAll('.play')
- // var videoTitle =document.querySelectorAll('.video-title')
- console.log(playControl[0],videolist[0])
- //
- var douyin = document.querySelector('.douyin')
- var kuaishou = document.querySelector('.kuaishou')
- var DYtip = document.querySelector('.DYtip')
- var KStip = document.querySelector('.KStip')
- var dom=document.querySelector('.team-bottm')
- // console.log(videolist, leftArrow, rightArrow)
-
- var videoindex = 0
- var videoUrl = ["http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/1.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/2.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/3.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/4.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/5.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/6.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/7.m4v", "http://ctop-www.oss-cn-beijing.aliyuncs.com/yourong/case/8.m4v"]
- var FMArr=['./images/1.jpg','./images/2.jpg','./images/3.jpg','./images/4.jpg','./images/5.jpg','./images/6.jpg','./images/7.jpg','./images/8.jpg']
- // for(var v=0;v<video.length;v++){
- // video[v].bind('contextmenu',function() { return false; })
- // }
- document.addEventListener("WeixinJSBridgeReady", function (){
- document.getElementById('myvideo').play();
- document.getElementById('myvideo').pause();
- video.play();
- }, false)
- // 给play事件绑定暂停函数
- ;[].forEach.call(videolist, function(i){
- i.addEventListener('play', pauseAll.bind(i))
- // console.log(isIE())
- if(isIE()){
-
- for (var a=0;a<playControl.length;a++){
- // console.log(playControl[a])
- playControl[a].style.opacity=1
-
- }
- // playControl[i].style.opacity=0
- }else{
-
- playControl.forEach(function(item,index){
- if(i==index){
- item.style.opacity=0
- }
- else {
- item.style.opacity=1
- }
- })
- }
-
- });
-
- if(isIE()){
- for (var n=0;n<playControl.length;n++){
- (function(n){
- playControl[n].onclick=function(){
- for (var x=0;x<playControl.length;x++){
- playControl[x].style.opacity=1
- }
-
- if (videolist[n].paused) {
- videolist[n].play();
- playControl[n].style.opacity=0
-
- } else {
- videolist[n].pause();
-
- playControl[n].style.opacity=1
- }
- }})(n)
- }
-
- }else{
- playControl.forEach(function(item,index){
-
- item.onclick=function(){
-
- playControl.forEach(function(item,index){
- item.style.opacity=1
- })
- if (videolist[index].paused) {
- videolist[index].play();
- item.style.opacity=0
-
- } else {
- videolist[index].pause();
-
- item.style.opacity=1
- }
- }
- })
-
- }
-
-
- rightArrow.onclick = function () {
- videoindex++;
- if (videoindex >= 8) {
- videoindex = 0
- }
-
- changeVideo(videoindex)
- }
- leftArrow.onclick = function () {
- videoindex--;
- if (videoindex < 0) {
- videoindex = 7
- }
-
- changeVideo(videoindex)
- }
- function changeVideo(index) {
- var arr = [index, index + 1, index + 2];
- if(isIE()){
-
-
-
- for(var i=0;i<arr.length;i++){
- arr[i]= arr[i] >= 8 ? arr[i] - 8 : arr[i];
- }
- for(var ind in videolist){
- videolist[ind].src=videoUrl[arr[ind]]
- videolist[ind].poster=FMArr[arr[ind]]
- }
-
- // for(var inde in videoTitle){
- // videoTitle[inde].innerHTML=pArr[arr[inde]]
- // }
- }else{
-
- arr = arr.map(function(item, index) {
- return item >= 8 ? item - 8 : item
- })
-
- videolist.forEach(function(item, ind){
- item.src = videoUrl[arr[ind]]
- item.poster=FMArr[arr[ind]]
- });
- // videoTitle.forEach(function(item, ind) {
- // item.innerHTML = pArr[arr[ind]]
- // });
- }
- }
- // rightArrow.addEventListener('click')
- // videolist.forEach((item, ind) => {
- // item.οnclick = function () {
- // if (item.paused) {
- // item.play();
- // } else {
- // item.pause();
- // }
- // }
- // });
- // videolist[0].οnclick = function () {
- // if (videolist[0].paused) {
- // videolist[0].play();
- // } else {
- // videolist[0].pause();
- // }
- // }
- function pauseAll() {
- var self = this;
- ;[].forEach.call(videolist, function(i) {
- // 将 videos 中其他的 video 全部暂停
- i !== self && i.pause();
- // i !== self && i.load();
- });
-
- };
- // 滚动到位置后 左右图片淡入
- function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
- var t = obj.offsetTop; //获取该元素对应父容器的上边距
- var l = obj.offsetLeft; //对应父容器的上边距
- //判断是否有父容器,如果存在则累加其边距
- while (obj = obj.offsetParent) {
- t += obj.offsetTop; //叠加父容器的上边距
- l += obj.offsetLeft; //叠加父容器的左边距
- }
- return {
- x: l,
- y: t
- }
- }
- function isIE() {
- if(!!window.ActiveXObject || "ActiveXObject" in window){
- return true;
- }else{
- return false;
- }
- }
- function windowLoad () {
-
- var top = getPoint(dom).y; //距离文档顶部的距离
- var windowHeight = document.documentElement.clientHeight; //可视区域的高度
- window.onscroll = function () {
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- if (top+dom.offsetHeight >= scrollTop && top+dom.offsetHeight <= windowHeight + scrollTop) {
- console.log('在可视区域了',kuaishou);
- kuaishou.classList.add('show');
- this.setTimeout(function(){
- KStip.classList.add('show');
- },800)
- this.setTimeout(function(){
- douyin.classList.add('show');
- },1200)
- this.setTimeout(function(){
- DYtip.classList.add('show');
- },2000)
- }else{
- kuaishou.classList.remove('show');
- KStip.classList.remove('show');
- douyin.classList.remove('show');
- DYtip.classList.remove('show');
-
- }
- // 判断是否出现返回顶部
- if(scrollTop>50){
- goTop.classList.add('show')
- }else{
- goTop.classList.remove('show')
- }
- }
- }
- window.onload=windowLoad;
- //给ie9添加classList属性
- if (!("classList" in document.documentElement)) {
- Object.defineProperty(HTMLElement.prototype, 'classList', {
- get: function() {
- var self = this;
- function update(fn) {
- return function(value) {
- var classes = self.className.split(/\s+/g),
- index = classes.indexOf(value);
- fn(classes, index, value);
- self.className = classes.join(" ");
- }
- }
- return {
- add: update(function(classes, index, value) {
- if (!~index) classes.push(value);
- }),
- remove: update(function(classes, index) {
- if (~index) classes.splice(index, 1);
- }),
- toggle: update(function(classes, index, value) {
- if (~index)
- classes.splice(index, 1);
- else
- classes.push(value);
- }),
- contains: function(value) {
- return !!~self.className.split(/\s+/g).indexOf(value);
- },
- item: function(i) {
- return self.className.split(/\s+/g)[i] || null;
- }
- };
- }
- });
- }
|