Skip to content

H
h5wawa-demo
Commit d808b22b authored by likely's avatar likely
Browse files
Options

简单的前后左右控制

parent a0d8d1c6
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1688 additions and 12 deletions
.postcssrc 0 → 100644
View file @ d808b22b
{
"plugins": {
"autoprefixer": {},
"postcss-px2rem": { "remUnit": 46.875 }
}
}
\ No newline at end of file
index.html
View file @ d808b22b
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="手机抓娃娃,远程控制娃娃机,直播抓娃娃画面,抓到包邮送到家!全民抓抓乐,随时随地抓娃娃!" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="shortcut icon" type="image/x-icon" href="//yun.duiba.com.cn/wawaji/protal/images/favicon.ico">
<script type="text/javascript">
(function(win) {
var h;
var dpr = win.navigator.appVersion.match(/iphone/gi) ? win.devicePixelRatio : 1;
var scale = 1;
var docEl = document.documentElement;
var metaEl = document.createElement("meta");
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; var flag = true; for (var v = 0; v < Agents.length; v++) { if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break } } return flag }
function setUnitA() {
win.rem = Math.min(docEl.getBoundingClientRect().width, 750) / 16;
docEl.style.fontSize = win.rem + "px"
}
win.dpr = dpr;
win.addEventListener("resize", function() {
clearTimeout(h);
h = setTimeout(setUnitA, 300)
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(h);
h = setTimeout(setUnitA, 300)
}
}, false);
metaEl.setAttribute("name", "viewport");
metaEl.setAttribute("content", "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no");
if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl) } else {
var wrap = document.createElement("div");
wrap.appendChild(metaEl);
document.write(wrap.innerHTML)
}
setUnitA()
})(window);
</script>
</head>
<body>
<div class="container">
<div class="front">
<div id="lvb"></div>
<video wiDth="200" height="300" autoplay playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>
</div>
<div class="side"></div>
<div class="wheel">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="down">抓</div>
</div>
<div class="play">开始游戏</div>
</div>
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8"></script>
<script src="index.js"></script>
</body>
......
index.js
View file @ d808b22b
var insert = require('./utils/insertscript');
var ios = require('./libs/ios');
var android = require('./libs/android');
import './less/index.less'
new TcPlayer('lvb', {
"m3u8": "http://14246.liveplay.myqcloud.com/live/14246_055dd098ab729831abff0c1f55536403.m3u8",
"m3u8": "http://14246.liveplay.myqcloud.com/live/14246_055dd098ab729831abff0c1f55536403.m3u8 ",
"autoplay": true, //iOS下safari浏览器是不开放这个能力的
"width": "100%",
"height": "100vh",
......@@ -20,3 +21,30 @@ if (/iphone|ipad|ipod/gi.test(ua)) {
} else if (/Android|adr/gi.test(ua)) {
insert('//sqimg.qq.com/expert_qq/webrtc/1.2/WebRTCAPI.min.js', android);
}
var btnPlay = document.querySelector('.play')
var wheel = document.querySelector('.wheel')
var btnDown = document.querySelector('.down')
btnPlay.addEventListener('click', start)
btnDown.addEventListener('click', () => {
setTimeout(end, 1200)
})
function start() {
show.call(wheel)
hide.call(btnPlay)
}
function end() {
show.call(btnPlay)
hide.call(wheel)
}
function show() {
this.style.display = 'block'
}
function hide() {
this.style.display = 'none'
}
\ No newline at end of file
less/index.less 0 → 100644
View file @ d808b22b
@import './mixins';
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
@color: rgba(250, 206, 1, .9);
body {
background-color: rgba(255, 239, 161, 1);
}
.container {
max-width: 750px;
width: 100%;
height: 100%;
.center;
position: relative;
}
.front {
.size(500, 700);
.pos(125, 100);
overflow: hidden;
}
.wheel {
display: none;
@height: 400;
@left: 60;
@top: 20;
@gap: 120;
.size(750, @height);
position: absolute;
left: 0;
bottom: 1px;
>div {
.size(0, 0);
position: absolute;
@width: 50;
&.top {
border-left: @width*1px solid transparent;
border-right: @width*1px solid transparent;
border-bottom: @width*2px solid @color;
left: (@left+@gap)*1px;
top: @top*1px;
}
&.right {
border-top: @width*1px solid transparent;
border-bottom: @width*1px solid transparent;
border-left: @width*2px solid @color;
left: (@left+2*@gap)*1px;
top: (@top+@gap)*1px;
}
&.bottom {
border-left: @width*1px solid transparent;
border-right: @width*1px solid transparent;
border-top: @width*2px solid @color;
left: (@left+@gap)*1px;
top: (@top+2*@gap)*1px;
}
&.left {
border-top: @width*1px solid transparent;
border-bottom: @width*1px solid transparent;
border-right: @width*2px solid @color;
left: @left*1px;
top: (@top+@gap)*1px;
}
}
.down {
@width: 120;
.size(@width, @width );
border-radius: 100%;
background-color: @color;
color: #fff;
text-align: center;
line-height: @width*1px;
right: @left*1px;
top: (@height+-@width)*0.5px;
}
}
.play {
@height: 100;
.size(500, @height);
color: #fff;
line-height: @height*1px;
text-align: center;
position: absolute;
bottom: 200px;
left: 125px;
background-color: @color;
border-radius: 30px;
}
\ No newline at end of file
less/mixins.less 0 → 100644
View file @ d808b22b
//设置宽高
.size(@width: 1, @height: 1) {
width: @width*1px;
height: @height*1px;
}
//设置背景图片
.bgi(@src) {
background-image: url(@src);
background-repeat: no-repeat;
background-size: contain;
}
//设置段落
.text(@fontsize, @height: @fontsize, @lineheight: @height) {
font-size: @fontsize*1px;
height: @height*1px;
line-height: @lineheight*1px;
}
//清除浮动
.clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
//垂直水平居中
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//水平居中
.center{
margin-left: auto;
margin-right: auto;
}
//绝对定位
.pos(@left:1,@top:1){
position: absolute;
left: @left*1px;
top: @top*1px;
}
\ No newline at end of file
libs/ios.js
View file @ d808b22b
module.exports = function() {
let pFront = document.querySelector('.front')
let pSide = document.querySelector('.side')
var ele1 = document.createElement('canvas')
ele1.id = 'front_video'
ele1.width = "480px"
ele1.height = "860px"
ele1.width = "100%"
ele1.height = "100%"
var ele2 = document.createElement('canvas')
ele2.id = 'side_video'
ele2.width = "480px"
ele2.height = "860px"
document.body.appendChild(ele1)
document.body.appendChild(ele2)
ele2.width = "100%"
ele2.height = "100%"
pFront.appendChild(ele1)
pSide.appendChild(ele2)
TXWawaVideo.init({
sdkappid: 1400050371,
accounttype: 19242,
......
package-lock.json 0 → 100644
View file @ d808b22b
This diff is collapsed.
package.json
View file @ d808b22b
......@@ -4,12 +4,21 @@
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"start": "parcel index.html",
"build": "parcel build index.html"
},
"repository": {
"type": "git",
"url": "git@gitlab2.dui88.com:wawa/wawa-h5.git"
},
"author": "",
"license": "ISC"
"license": "ISC",
"devDependencies": {
"less": "^2.7.3"
},
"dependencies": {
"autoprefixer": "^7.2.5",
"postcss-modules": "^1.1.0",
"postcss-px2rem": "^0.3.0"
}
}
yarn.lock 0 → 100644
View file @ d808b22b
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment