index.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content="width=640, user-scalable=no">
  7. <meta http-equiv="pragma" content="no-cache">
  8. <meta http-equiv="Cache-Control" content="no-cache">
  9. <meta http-equiv="Expires" content="0">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  12. <meta name="format-detection" content="telephone=no">
  13. <meta name="apple-mobile-web-app-title" content="">
  14. <title>试玩</title>
  15. <style>
  16. * {
  17. margin: 0px;
  18. padding: 0px;
  19. box-sizing: border-box;
  20. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  21. }
  22. html {
  23. max-width: 640px;
  24. margin: 0 auto;
  25. }
  26. body {
  27. font-family: "PingFangSC-Regular", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
  28. font-size: 50px;
  29. line-height: 1.5em;
  30. color: #212121;
  31. -webkit-user-select: none;
  32. user-select: none;
  33. -webkit-touch-callout: none;
  34. touch-callout: none;
  35. }
  36. html,
  37. body,
  38. .page_box {
  39. width: 100%;
  40. height: 100%;
  41. position: relative;
  42. overflow: hidden;
  43. }
  44. .video[ishivideo="true"]::-webkit-media-controls{
  45. display:none !important;
  46. }
  47. .video[ishivideo="true"]::-moz-media-controls{
  48. display:none !important;
  49. }
  50. .video[ishivideo="true"]::-o-media-controls{
  51. display:none !important;
  52. }
  53. .video[ishivideo="true"]::media-controls{
  54. display:none !important;
  55. }
  56. .page {
  57. background-color: #eee;
  58. }
  59. .page {
  60. display: flex;
  61. justify-content: center;
  62. align-items: center;
  63. flex-wrap: wrap;
  64. width: 100%;
  65. height: 100%;
  66. position: absolute;
  67. left: 0;
  68. top: 0;
  69. overflow: hidden;
  70. }
  71. .page.hide {
  72. display: none;
  73. }
  74. /*==================================*/
  75. .page.inTop {
  76. -webkit-animation: ShowTop .5s ease-out both;
  77. animation: ShowTop .5s ease-out both;
  78. }
  79. .page.outTop {
  80. -webkit-animation: HideTop .5s ease-out both;
  81. animation: HideTop .5s ease-out both;
  82. }
  83. .page.inDown {
  84. -webkit-animation: ShowDown .5s ease-out both;
  85. animation: ShowDown .5s ease-out both;
  86. }
  87. .page.outDown {
  88. -webkit-animation: HideDown .5s ease-out both;
  89. animation: HideDown .5s ease-out both;
  90. }
  91. @-webkit-keyframes ShowTop {
  92. 0% {
  93. -webkit-transform: translateY(100%);
  94. }
  95. 100% {
  96. -webkit-transform: translateY(0);
  97. }
  98. }
  99. @keyframes ShowTop {
  100. 0% {
  101. transform: translateY(100%);
  102. }
  103. 100% {
  104. transform: translateY(0);
  105. }
  106. }
  107. @-webkit-keyframes HideTop {
  108. 0% {
  109. -webkit-transform: translateY(0);
  110. }
  111. 100% {
  112. -webkit-transform: translateY(-100%);
  113. }
  114. }
  115. @keyframes HideTop {
  116. 0% {
  117. transform: translateY(0);
  118. }
  119. 100% {
  120. transform: translateY(-100%);
  121. }
  122. }
  123. @-webkit-keyframes ShowDown {
  124. 0% {
  125. -webkit-transform: translateY(-100%);
  126. }
  127. 100% {
  128. -webkit-transform: translateY(0);
  129. }
  130. }
  131. @keyframes ShowDown {
  132. 0% {
  133. transform: translateY(-100%);
  134. }
  135. 100% {
  136. transform: translateY(0);
  137. }
  138. }
  139. @-webkit-keyframes HideDown {
  140. 0% {
  141. -webkit-transform: translateY(0);
  142. }
  143. 100% {
  144. -webkit-transform: translateY(100%);
  145. }
  146. }
  147. @keyframes HideDown {
  148. 0% {
  149. transform: translateY(0);
  150. }
  151. 100% {
  152. transform: translateY(100%);
  153. }
  154. }
  155. /*==================================*/
  156. #jingtai{
  157. animation:mymove 1s infinite;
  158. -webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
  159. animation-direction:alternate;/*轮流反向播放动画。*/
  160. animation-timing-function: ease-in-out; /*动画的速度曲线*/
  161. /* Safari 和 Chrome */
  162. -webkit-animation:mymove 1s infinite;
  163. -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
  164. -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
  165. }
  166. #jinbi{
  167. -webkit-animation: arrowBig 1.2s .5s ease-in-out infinite;
  168. animation: arrowBig 1.2s .5s ease-in-out infinite;
  169. -webkit-transform:scale(1.5);
  170. transform:scale(1.5);
  171. }
  172. @-webkit-keyframes arrowBig {
  173. 0% {
  174. -webkit-transform: translateY(0) scale(1.5);
  175. opacity: 1;
  176. }
  177. 100% {
  178. -webkit-transform: translateY(-100%) scale(2);
  179. opacity: 0
  180. }
  181. }
  182. @keyframes arrowBig {
  183. 0% {
  184. transform: translateY(0) scale(1.5);
  185. opacity: 1;
  186. }
  187. 100% {
  188. transform: translateY(-100%) scale(2);
  189. opacity: 0;
  190. }
  191. }
  192. .arrow {
  193. width: 100px;
  194. height: 56px;
  195. line-height: 56px;
  196. text-align: center;
  197. font-size: 50px;
  198. font-weight: bold;
  199. color: #d00;
  200. position: absolute;
  201. z-index: 9999;
  202. right: 80px;
  203. bottom: 240px;
  204. -webkit-animation: arrow 1.2s .5s ease-in-out infinite;
  205. animation: arrow 1.2s .5s ease-in-out infinite;
  206. }
  207. @-webkit-keyframes arrow {
  208. 0% {
  209. -webkit-transform: translateY(0);
  210. opacity: 1;
  211. }
  212. 100% {
  213. -webkit-transform: translateY(-100%);
  214. opacity: 0
  215. }
  216. }
  217. @keyframes arrow {
  218. 0% {
  219. transform: translateY(0);
  220. opacity: 1;
  221. }
  222. 100% {
  223. transform: translateY(-100%);
  224. opacity: 0
  225. }
  226. }
  227. @keyframes mymove{
  228. 0%{
  229. transform: scale(1); /*开始为原始大小*/
  230. }
  231. 25%{
  232. transform: scale(1.2); /*放大1.1倍*/
  233. }
  234. 50%{
  235. transform: scale(1);
  236. }
  237. 75%{
  238. transform: scale(1.2);
  239. }
  240. }
  241. @-webkit-keyframes mymove{
  242. 0%{
  243. transform: scale(1); /*开始为原始大小*/
  244. }
  245. 25%{
  246. transform: scale(1.2); /*放大1.1倍*/
  247. }
  248. 50%{
  249. transform: scale(1);
  250. }
  251. 75%{
  252. transform: scale(1.2);
  253. }
  254. }
  255. </style>
  256. </head>
  257. <body onload="videoPlay()">
  258. <div class="page_box">
  259. <div class="page page1" onclick="videoPlay()">
  260. <video class="video" id="video-play" style="object-fit:fill;" type="video/mpeg" src="./video/1.mp4" data-src='./video/1.mp4' muted="false" autoplay x5-video-player-fullscreen='false' x-webkit-airplay='true' webkit-playsinline='true' playsinline='true' x5-video-player-type="h5" x5-playsinline x-webkit-airplay='allow' loop='loop'>
  261. </video>
  262. </div>
  263. <div class="page page2 hide">
  264. <video class="video" type="video/mpeg" style="object-fit:fill;" src="./video/2.mp4" data-src='./video/2.mp4' preload="auto" x-webkit-airplay="true" playsinline=""
  265. webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
  266. -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
  267. </div>
  268. <!-- <div class="page page3 hide">
  269. <video class="video" type="video/mpeg" style="object-fit:fill;" src="./video/3.mp4" data-src='./video/3.mp4' preload="auto" x-webkit-airplay="true" playsinline=""
  270. webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
  271. -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
  272. </div> -->
  273. </div>
  274. <div class="arrow"><img src="./video/shou.png" alt="" style="width:100%"></div>
  275. <div style='width: 70%;position: absolute;top: 85%;left: 25%;z-index: 10000;' id="hongbao">
  276. <img src='./video/dianji.png' alt='' style='width:80%;' id="jingtai" />
  277. <img src="./video/zuhe.png" alt="" style='width:80%;position: absolute;left: 0;top: -100px;z-index: -1;display: none;' id="jinbi">
  278. </div>
  279. <!-- <script src="https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/union/playable/sdk/index.b5662ec443f458c8a87e.js"></script> -->
  280. <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
  281. <script type="text/javascript" src="./jquery.min.js"></script>
  282. <script type="text/javascript">
  283. //<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  284. var curPage = 1;
  285. var PageL = $('.page_box .page').length;
  286. var canTouch = false;
  287. canTouch = true;
  288. var startY, endY, diff;
  289. $('.page_box').on('touchstart', touchStart);
  290. $('.page_box').on('touchmove', touchMove);
  291. $('.page_box').on('touchend', touchEnd);
  292. var playOne = $('.video')[0]
  293. $('#jingtai').on('touchstart', function(e) {
  294. e.preventDefault()
  295. e.stopPropagation()
  296. window.playableSDK.sendEvent('clickDownloadBar',{ section: 'section2', area: 'area3' });
  297. window.playableSDK.openAppStore()
  298. })
  299. window.addEventListener('touchstart', function() {
  300. document.getElementById('video-play').play()
  301. })
  302. setTimeout(videoPlay(),10)
  303. function videoPlay() {
  304. document.getElementById('video-play').play()
  305. document.getElementById('video-play').muted=false
  306. }
  307. //
  308. function touchStart(e) {
  309. // var touch = e.touches[0];
  310. var touch = e.originalEvent.targetTouches[0];
  311. startY = touch.pageY;
  312. }
  313. function touchMove(e) {
  314. e.preventDefault();
  315. // var touch = e.touches[0];
  316. var touch = e.originalEvent.targetTouches[0];
  317. endY = touch.pageY;
  318. diff = endY - startY;
  319. }
  320. function touchEnd(e) {
  321. if (Math.abs(diff) > 150 && canTouch) {
  322. if (diff > 0) {
  323. if (curPage <= 1) {
  324. return;
  325. }
  326. $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
  327. curPage--;
  328. $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
  329. } else {
  330. if (curPage >= PageL) {
  331. return;
  332. }
  333. $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
  334. curPage++;
  335. $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
  336. }
  337. if (curPage >= PageL) {
  338. $('.arrow').hide();
  339. $('#jinbi').show()
  340. } else {
  341. $('.arrow').show();
  342. $('#jinbi').hide();
  343. }
  344. canTouch = false;
  345. setTimeout(function () {
  346. canTouch = true;
  347. diff = 0;
  348. $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
  349. }, 500);
  350. }
  351. for (let i = 0; i < $('video').length; i++) {
  352. if (i == curPage - 1) {
  353. $('.video')[i].play()
  354. $('.video')[i].muted = false
  355. } else {
  356. $('.video')[i].pause();
  357. }
  358. }
  359. }
  360. //window.addEventListener('touchEnd', function() {
  361. // $('.video')[curPage - 1].play()
  362. //})
  363. //点击红包落地页
  364. // function clickOpen(e) {
  365. // alert(1)
  366. // e.preventDefault()
  367. // window.openAppStore();
  368. // }
  369. </script>
  370. </body>
  371. </html>