index.js 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. var video=document.querySelectorAll('video')
  2. // console.log(video)
  3. var goTop=document.querySelector('.aside')
  4. var leftArrow = document.querySelector('.leftArrow');
  5. var rightArrow = document.querySelector('.rightArrow');
  6. var videolist = document.querySelectorAll('.video');
  7. var playControl=document.querySelectorAll('.play')
  8. // var videoTitle =document.querySelectorAll('.video-title')
  9. console.log(playControl[0],videolist[0])
  10. //
  11. var douyin = document.querySelector('.douyin')
  12. var kuaishou = document.querySelector('.kuaishou')
  13. var DYtip = document.querySelector('.DYtip')
  14. var KStip = document.querySelector('.KStip')
  15. var dom=document.querySelector('.team-bottm')
  16. // console.log(videolist, leftArrow, rightArrow)
  17. var videoindex = 0
  18. 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"]
  19. 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']
  20. // for(var v=0;v<video.length;v++){
  21. // video[v].bind('contextmenu',function() { return false; })
  22. // }
  23. document.addEventListener("WeixinJSBridgeReady", function (){
  24. document.getElementById('myvideo').play();
  25. document.getElementById('myvideo').pause();
  26. video.play();
  27. }, false)
  28. // 给play事件绑定暂停函数
  29. ;[].forEach.call(videolist, function(i){
  30. i.addEventListener('play', pauseAll.bind(i))
  31. // console.log(isIE())
  32. if(isIE()){
  33. for (var a=0;a<playControl.length;a++){
  34. // console.log(playControl[a])
  35. playControl[a].style.opacity=1
  36. }
  37. // playControl[i].style.opacity=0
  38. }else{
  39. playControl.forEach(function(item,index){
  40. if(i==index){
  41. item.style.opacity=0
  42. }
  43. else {
  44. item.style.opacity=1
  45. }
  46. })
  47. }
  48. });
  49. if(isIE()){
  50. for (var n=0;n<playControl.length;n++){
  51. (function(n){
  52. playControl[n].onclick=function(){
  53. for (var x=0;x<playControl.length;x++){
  54. playControl[x].style.opacity=1
  55. }
  56. if (videolist[n].paused) {
  57. videolist[n].play();
  58. playControl[n].style.opacity=0
  59. } else {
  60. videolist[n].pause();
  61. playControl[n].style.opacity=1
  62. }
  63. }})(n)
  64. }
  65. }else{
  66. playControl.forEach(function(item,index){
  67. item.onclick=function(){
  68. playControl.forEach(function(item,index){
  69. item.style.opacity=1
  70. })
  71. if (videolist[index].paused) {
  72. videolist[index].play();
  73. item.style.opacity=0
  74. } else {
  75. videolist[index].pause();
  76. item.style.opacity=1
  77. }
  78. }
  79. })
  80. }
  81. rightArrow.onclick = function () {
  82. videoindex++;
  83. if (videoindex >= 8) {
  84. videoindex = 0
  85. }
  86. changeVideo(videoindex)
  87. }
  88. leftArrow.onclick = function () {
  89. videoindex--;
  90. if (videoindex < 0) {
  91. videoindex = 7
  92. }
  93. changeVideo(videoindex)
  94. }
  95. function changeVideo(index) {
  96. var arr = [index, index + 1, index + 2];
  97. if(isIE()){
  98. for(var i=0;i<arr.length;i++){
  99. arr[i]= arr[i] >= 8 ? arr[i] - 8 : arr[i];
  100. }
  101. for(var ind in videolist){
  102. videolist[ind].src=videoUrl[arr[ind]]
  103. videolist[ind].poster=FMArr[arr[ind]]
  104. }
  105. // for(var inde in videoTitle){
  106. // videoTitle[inde].innerHTML=pArr[arr[inde]]
  107. // }
  108. }else{
  109. arr = arr.map(function(item, index) {
  110. return item >= 8 ? item - 8 : item
  111. })
  112. videolist.forEach(function(item, ind){
  113. item.src = videoUrl[arr[ind]]
  114. item.poster=FMArr[arr[ind]]
  115. });
  116. // videoTitle.forEach(function(item, ind) {
  117. // item.innerHTML = pArr[arr[ind]]
  118. // });
  119. }
  120. }
  121. // rightArrow.addEventListener('click')
  122. // videolist.forEach((item, ind) => {
  123. // item.οnclick = function () {
  124. // if (item.paused) {
  125. // item.play();
  126. // } else {
  127. // item.pause();
  128. // }
  129. // }
  130. // });
  131. // videolist[0].οnclick = function () {
  132. // if (videolist[0].paused) {
  133. // videolist[0].play();
  134. // } else {
  135. // videolist[0].pause();
  136. // }
  137. // }
  138. function pauseAll() {
  139. var self = this;
  140. ;[].forEach.call(videolist, function(i) {
  141. // 将 videos 中其他的 video 全部暂停
  142. i !== self && i.pause();
  143. // i !== self && i.load();
  144. });
  145. };
  146. // 滚动到位置后 左右图片淡入
  147. function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
  148. var t = obj.offsetTop; //获取该元素对应父容器的上边距
  149. var l = obj.offsetLeft; //对应父容器的上边距
  150. //判断是否有父容器,如果存在则累加其边距
  151. while (obj = obj.offsetParent) {
  152. t += obj.offsetTop; //叠加父容器的上边距
  153. l += obj.offsetLeft; //叠加父容器的左边距
  154. }
  155. return {
  156. x: l,
  157. y: t
  158. }
  159. }
  160. function isIE() {
  161. if(!!window.ActiveXObject || "ActiveXObject" in window){
  162. return true;
  163. }else{
  164. return false;
  165.   }
  166. }
  167. function windowLoad () {
  168. var top = getPoint(dom).y; //距离文档顶部的距离
  169. var windowHeight = document.documentElement.clientHeight; //可视区域的高度
  170. window.onscroll = function () {
  171. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  172. if (top+dom.offsetHeight >= scrollTop && top+dom.offsetHeight <= windowHeight + scrollTop) {
  173. console.log('在可视区域了',kuaishou);
  174. kuaishou.classList.add('show');
  175. this.setTimeout(function(){
  176. KStip.classList.add('show');
  177. },800)
  178. this.setTimeout(function(){
  179. douyin.classList.add('show');
  180. },1200)
  181. this.setTimeout(function(){
  182. DYtip.classList.add('show');
  183. },2000)
  184. }else{
  185. kuaishou.classList.remove('show');
  186. KStip.classList.remove('show');
  187. douyin.classList.remove('show');
  188. DYtip.classList.remove('show');
  189. }
  190. // 判断是否出现返回顶部
  191. if(scrollTop>50){
  192. goTop.classList.add('show')
  193. }else{
  194. goTop.classList.remove('show')
  195. }
  196. }
  197. }
  198. window.onload=windowLoad;
  199. //给ie9添加classList属性
  200. if (!("classList" in document.documentElement)) {
  201. Object.defineProperty(HTMLElement.prototype, 'classList', {
  202. get: function() {
  203. var self = this;
  204. function update(fn) {
  205. return function(value) {
  206. var classes = self.className.split(/\s+/g),
  207. index = classes.indexOf(value);
  208. fn(classes, index, value);
  209. self.className = classes.join(" ");
  210. }
  211. }
  212. return {
  213. add: update(function(classes, index, value) {
  214. if (!~index) classes.push(value);
  215. }),
  216. remove: update(function(classes, index) {
  217. if (~index) classes.splice(index, 1);
  218. }),
  219. toggle: update(function(classes, index, value) {
  220. if (~index)
  221. classes.splice(index, 1);
  222. else
  223. classes.push(value);
  224. }),
  225. contains: function(value) {
  226. return !!~self.className.split(/\s+/g).indexOf(value);
  227. },
  228. item: function(i) {
  229. return self.className.split(/\s+/g)[i] || null;
  230. }
  231. };
  232. }
  233. });
  234. }