123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-
- <meta name="viewport" content="width=640, user-scalable=no">
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="Cache-Control" content="no-cache">
- <meta http-equiv="Expires" content="0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta name="apple-mobile-web-app-title" content="">
- <title>试玩</title>
- <style>
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- }
- html {
- max-width: 640px;
- margin: 0 auto;
- }
- body {
- font-family: "PingFangSC-Regular", "sans-serif", "STHeitiSC-Light", "微软雅黑", "Microsoft YaHei";
- font-size: 50px;
- line-height: 1.5em;
- color: #212121;
- -webkit-user-select: none;
- user-select: none;
- -webkit-touch-callout: none;
- touch-callout: none;
- }
- html,
- body,
- .page_box {
- width: 100%;
- height: 100%;
- position: relative;
- overflow: hidden;
- }
- .video[ishivideo="true"]::-webkit-media-controls{
- display:none !important;
- }
- .video[ishivideo="true"]::-moz-media-controls{
- display:none !important;
- }
- .video[ishivideo="true"]::-o-media-controls{
- display:none !important;
- }
- .video[ishivideo="true"]::media-controls{
- display:none !important;
- }
- .page {
- background-color: #eee;
- }
- .page {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-wrap: wrap;
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- overflow: hidden;
- }
- .page.hide {
- display: none;
- }
- /*==================================*/
- .page.inTop {
- -webkit-animation: ShowTop .5s ease-out both;
- animation: ShowTop .5s ease-out both;
- }
- .page.outTop {
- -webkit-animation: HideTop .5s ease-out both;
- animation: HideTop .5s ease-out both;
- }
- .page.inDown {
- -webkit-animation: ShowDown .5s ease-out both;
- animation: ShowDown .5s ease-out both;
- }
- .page.outDown {
- -webkit-animation: HideDown .5s ease-out both;
- animation: HideDown .5s ease-out both;
- }
- @-webkit-keyframes ShowTop {
- 0% {
- -webkit-transform: translateY(100%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes ShowTop {
- 0% {
- transform: translateY(100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes HideTop {
- 0% {
- -webkit-transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(-100%);
- }
- }
- @keyframes HideTop {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(-100%);
- }
- }
- @-webkit-keyframes ShowDown {
- 0% {
- -webkit-transform: translateY(-100%);
- }
- 100% {
- -webkit-transform: translateY(0);
- }
- }
- @keyframes ShowDown {
- 0% {
- transform: translateY(-100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @-webkit-keyframes HideDown {
- 0% {
- -webkit-transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(100%);
- }
- }
- @keyframes HideDown {
- 0% {
- transform: translateY(0);
- }
- 100% {
- transform: translateY(100%);
- }
- }
- /*==================================*/
- #jingtai{
- animation:mymove 1s infinite;
- -webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
- animation-direction:alternate;/*轮流反向播放动画。*/
- animation-timing-function: ease-in-out; /*动画的速度曲线*/
- /* Safari 和 Chrome */
- -webkit-animation:mymove 1s infinite;
- -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
- -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
- }
- #jinbi{
- -webkit-animation: arrowBig 1.2s .5s ease-in-out infinite;
- animation: arrowBig 1.2s .5s ease-in-out infinite;
- -webkit-transform:scale(1.5);
- transform:scale(1.5);
- }
- @-webkit-keyframes arrowBig {
- 0% {
- -webkit-transform: translateY(0) scale(1.5);
- opacity: 1;
- }
- 100% {
- -webkit-transform: translateY(-100%) scale(2);
- opacity: 0
- }
- }
- @keyframes arrowBig {
- 0% {
- transform: translateY(0) scale(1.5);
- opacity: 1;
- }
- 100% {
- transform: translateY(-100%) scale(2);
- opacity: 0;
- }
- }
- .arrow {
- width: 100px;
- height: 56px;
- line-height: 56px;
- text-align: center;
- font-size: 50px;
- font-weight: bold;
- color: #d00;
- position: absolute;
- z-index: 9999;
- right: 80px;
- bottom: 240px;
- -webkit-animation: arrow 1.2s .5s ease-in-out infinite;
- animation: arrow 1.2s .5s ease-in-out infinite;
- }
- @-webkit-keyframes arrow {
- 0% {
- -webkit-transform: translateY(0);
- opacity: 1;
- }
- 100% {
- -webkit-transform: translateY(-100%);
- opacity: 0
- }
- }
- @keyframes arrow {
- 0% {
- transform: translateY(0);
- opacity: 1;
- }
- 100% {
- transform: translateY(-100%);
- opacity: 0
- }
- }
- @keyframes mymove{
- 0%{
- transform: scale(1); /*开始为原始大小*/
- }
- 25%{
- transform: scale(1.2); /*放大1.1倍*/
- }
- 50%{
- transform: scale(1);
- }
- 75%{
- transform: scale(1.2);
- }
- }
-
- @-webkit-keyframes mymove{
- 0%{
- transform: scale(1); /*开始为原始大小*/
- }
- 25%{
- transform: scale(1.2); /*放大1.1倍*/
- }
- 50%{
- transform: scale(1);
- }
- 75%{
- transform: scale(1.2);
- }
- }
- </style>
- </head>
- <body onload="videoPlay()">
- <div class="page_box">
- <div class="page page1" onclick="videoPlay()">
- <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'>
- </video>
- </div>
- <div class="page page2 hide">
- <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=""
- webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
- -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
- </div>
- <!-- <div class="page page3 hide">
- <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=""
- webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
- -webkit-playsinline="" style="object-fit:fill;" loop='loop' muted>
- </div> -->
- </div>
- <div class="arrow"><img src="./video/shou.png" alt="" style="width:100%"></div>
- <div style='width: 70%;position: absolute;top: 85%;left: 25%;z-index: 10000;' id="hongbao">
- <img src='./video/dianji.png' alt='' style='width:80%;' id="jingtai" />
- <img src="./video/zuhe.png" alt="" style='width:80%;position: absolute;left: 0;top: -100px;z-index: -1;display: none;' id="jinbi">
- </div>
- <!-- <script src="https://sf1-ttcdn-tos.pstatp.com/obj/ttfe/union/playable/sdk/index.b5662ec443f458c8a87e.js"></script> -->
- <script src="https://sf3-ttcdn-tos.pstatp.com/obj/union-fe-nc/playable/sdk/playable-sdk.js"></script>
- <script type="text/javascript" src="./jquery.min.js"></script>
- <script type="text/javascript">
- //<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
- var curPage = 1;
- var PageL = $('.page_box .page').length;
- var canTouch = false;
- canTouch = true;
- var startY, endY, diff;
- $('.page_box').on('touchstart', touchStart);
- $('.page_box').on('touchmove', touchMove);
- $('.page_box').on('touchend', touchEnd);
- var playOne = $('.video')[0]
- $('#jingtai').on('touchstart', function(e) {
- e.preventDefault()
- e.stopPropagation()
- window.playableSDK.sendEvent('clickDownloadBar',{ section: 'section2', area: 'area3' });
- window.playableSDK.openAppStore()
-
- })
- window.addEventListener('touchstart', function() {
- document.getElementById('video-play').play()
- })
- setTimeout(videoPlay(),10)
- function videoPlay() {
- document.getElementById('video-play').play()
- document.getElementById('video-play').muted=false
- }
- //
- function touchStart(e) {
- // var touch = e.touches[0];
- var touch = e.originalEvent.targetTouches[0];
- startY = touch.pageY;
- }
- function touchMove(e) {
- e.preventDefault();
- // var touch = e.touches[0];
- var touch = e.originalEvent.targetTouches[0];
- endY = touch.pageY;
- diff = endY - startY;
- }
- function touchEnd(e) {
- if (Math.abs(diff) > 150 && canTouch) {
- if (diff > 0) {
- if (curPage <= 1) {
- return;
- }
- $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
- curPage--;
- $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
- } else {
- if (curPage >= PageL) {
- return;
- }
- $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
- curPage++;
- $('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
- }
- if (curPage >= PageL) {
- $('.arrow').hide();
- $('#jinbi').show()
- } else {
- $('.arrow').show();
- $('#jinbi').hide();
- }
- canTouch = false;
- setTimeout(function () {
- canTouch = true;
- diff = 0;
- $('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
- }, 500);
- }
-
- for (let i = 0; i < $('video').length; i++) {
- if (i == curPage - 1) {
- $('.video')[i].play()
- $('.video')[i].muted = false
- } else {
- $('.video')[i].pause();
- }
- }
- }
- //window.addEventListener('touchEnd', function() {
- // $('.video')[curPage - 1].play()
- //})
- //点击红包落地页
- // function clickOpen(e) {
- // alert(1)
- // e.preventDefault()
- // window.openAppStore();
- // }
- </script>
- </body>
- </html>
|