index.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. var video=document.querySelectorAll('video')
  2. // console.log(video)
  3. var goTop=document.querySelector('.aside')
  4. var leftArrow = document.querySelector('.leftArrow');
  5. var videolist = document.querySelectorAll('.video');
  6. var playControl=document.querySelectorAll('.play')
  7. // var videoTitle =document.querySelectorAll('.video-title')
  8. console.log(playControl[0],videolist[0])
  9. //
  10. var douyin = document.querySelector('.douyin')
  11. var kuaishou = document.querySelector('.kuaishou')
  12. var DYtip = document.querySelector('.DYtip')
  13. var KStip = document.querySelector('.KStip')
  14. var dom=document.querySelector('.team-bottm')
  15. var videoindex = 0
  16. var videoUrl = ["https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/1.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/2.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/3.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/4.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/5.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/6.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/7.m4v", "https://www-1301855440.cos.ap-chongqing.myqcloud.com/yourong/case/8.m4v"]
  17. 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']
  18. // for(var v=0;v<video.length;v++){
  19. // video[v].bind('contextmenu',function() { return false; })
  20. // }
  21. document.addEventListener("WeixinJSBridgeReady", function (){
  22. document.getElementById('myvideo').play();
  23. document.getElementById('myvideo').pause();
  24. video.play();
  25. }, false)
  26. // 给play事件绑定暂停函数
  27. ;[].forEach.call(videolist, function(i){
  28. i.addEventListener('play', pauseAll.bind(i))
  29. // console.log(isIE())
  30. if(isIE()){
  31. for (var a=0;a<playControl.length;a++){
  32. // console.log(playControl[a])
  33. playControl[a].style.opacity=1
  34. }
  35. // playControl[i].style.opacity=0
  36. }else{
  37. playControl.forEach(function(item,index){
  38. if(i==index){
  39. item.style.opacity=0
  40. }
  41. else {
  42. item.style.opacity=1
  43. }
  44. })
  45. }
  46. });
  47. if(isIE()){
  48. for (var n=0;n<playControl.length;n++){
  49. (function(n){
  50. playControl[n].onclick=function(){
  51. for (var x=0;x<playControl.length;x++){
  52. playControl[x].style.opacity=1
  53. }
  54. if (videolist[n].paused) {
  55. videolist[n].play();
  56. playControl[n].style.opacity=0
  57. } else {
  58. videolist[n].pause();
  59. playControl[n].style.opacity=1
  60. }
  61. }})(n)
  62. }
  63. }else{
  64. playControl.forEach(function(item,index){
  65. item.onclick=function(){
  66. playControl.forEach(function(item,index){
  67. item.style.opacity=1
  68. })
  69. if (videolist[index].paused) {
  70. videolist[index].play();
  71. item.style.opacity=0
  72. } else {
  73. videolist[index].pause();
  74. item.style.opacity=1
  75. }
  76. }
  77. })
  78. }
  79. function changeVideo(index) {
  80. var arr = [index, index + 1, index + 2];
  81. if(isIE()){
  82. for(var i=0;i<arr.length;i++){
  83. arr[i]= arr[i] >= 8 ? arr[i] - 8 : arr[i];
  84. }
  85. for(var ind in videolist){
  86. videolist[ind].src=videoUrl[arr[ind]]
  87. videolist[ind].poster=FMArr[arr[ind]]
  88. }
  89. // for(var inde in videoTitle){
  90. // videoTitle[inde].innerHTML=pArr[arr[inde]]
  91. // }
  92. }else{
  93. arr = arr.map(function(item, index) {
  94. return item >= 8 ? item - 8 : item
  95. })
  96. videolist.forEach(function(item, ind){
  97. item.src = videoUrl[arr[ind]]
  98. item.poster=FMArr[arr[ind]]
  99. });
  100. // videoTitle.forEach(function(item, ind) {
  101. // item.innerHTML = pArr[arr[ind]]
  102. // });
  103. }
  104. }
  105. // videolist[0].οnclick = function () {
  106. // if (videolist[0].paused) {
  107. // videolist[0].play();
  108. // } else {
  109. // videolist[0].pause();
  110. // }
  111. // }
  112. function pauseAll() {
  113. var self = this;
  114. ;[].forEach.call(videolist, function(i) {
  115. // 将 videos 中其他的 video 全部暂停
  116. i !== self && i.pause();
  117. // i !== self && i.load();
  118. });
  119. };
  120. // 滚动到位置后 左右图片淡入
  121. function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
  122. }
  123. function isIE() {
  124. if(!!window.ActiveXObject || "ActiveXObject" in window){
  125. return true;
  126. }else{
  127. return false;
  128.   }
  129. }
  130. function windowLoad () {
  131. }
  132. window.onload=windowLoad;
  133. //给ie9添加classList属性
  134. if (!("classList" in document.documentElement)) {
  135. Object.defineProperty(HTMLElement.prototype, 'classList', {
  136. get: function() {
  137. var self = this;
  138. function update(fn) {
  139. return function(value) {
  140. var classes = self.className.split(/\s+/g),
  141. index = classes.indexOf(value);
  142. fn(classes, index, value);
  143. self.className = classes.join(" ");
  144. }
  145. }
  146. return {
  147. add: update(function(classes, index, value) {
  148. if (!~index) classes.push(value);
  149. }),
  150. remove: update(function(classes, index) {
  151. if (~index) classes.splice(index, 1);
  152. }),
  153. toggle: update(function(classes, index, value) {
  154. if (~index)
  155. classes.splice(index, 1);
  156. else
  157. classes.push(value);
  158. }),
  159. contains: function(value) {
  160. return !!~self.className.split(/\s+/g).indexOf(value);
  161. },
  162. item: function(i) {
  163. return self.className.split(/\s+/g)[i] || null;
  164. }
  165. };
  166. }
  167. });
  168. }