<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>直播间</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--http://dlhls.cdn.zhanqi.tv/zqlive/49427_jmACJ.m3u8"
https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540965075296&di=d3d72f8800e32825c0a2b50c74eb2cfd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D8144e47c063b5bb5bed720f606d2d523%2Ff4c66a2eb9389b50e6b205858035e5dde6116eb4.jpg
-->
<div class="videoBox">
<i class="fa"></i>
<div class="header_title">
<div class="title_log">
<div class="title_log_left">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540965075296&di=d3d72f8800e32825c0a2b50c74eb2cfd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D8144e47c063b5bb5bed720f606d2d523%2Ff4c66a2eb9389b50e6b205858035e5dde6116eb4.jpg"/>
<div class="title_log_left_text">
<span>微玉主播</span>
<span>来微玉视频来微玉视频来微玉视频,为我加油</span>
</div>
</div>
<div class="title_log_right">
<button>关注主播</button>
</div>
</div>
<div class="title_bottom">
<div class="title_bottom_left">
<p>直播中12365人观看</p>
</div>
<div class="title_bottom_right">
<p>微玉ID：123456123</p>
</div>
</div>
</div>
<video id="video" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline src="http://dlhls.cdn.zhanqi.tv/zqlive/49427_jmACJ.m3u8"></video>
<canvas id="canvas"></canvas>
<div class="barrage">
<p><span id="">猴赛雷：</span>猴赛雷啊1猴赛雷啊1猴赛雷啊1猴赛雷啊1猴赛雷啊1猴赛雷啊1</p>
<p><span id="">猴赛雷：</span>猴赛雷啊2</p>
<p><span id="">猴赛雷：</span>猴赛雷啊3</p>
<p><span id="">猴赛雷：</span>猴赛雷啊4</p>
<p><span id="">猴赛雷：</span>猴赛雷啊5</p>
<p><span id="">猴赛雷：</span>猴赛雷啊4</p>
<p><span id="">猴赛雷：</span>猴赛雷啊5</p>
<p><span id="">猴赛雷：</span>猴赛雷啊4</p>
<p><span id="">猴赛雷：</span>猴赛雷啊5</p>
</div>
<div class="toast">
<span>微玉主播邀您来捧场</span>
<span id="">接受</span>
</div>
</div>
<div class="popup_content">
<div class="popup">
<div class="popup_toast">
<img src="img/logo.png"/>
<p>下载微玉视频，与主播进行互动</p>
<span id="agen">再看看</span>
<span id="dow">立即下载</span>
</div>
</div>
</div>
<div class="row">
<div class="row_line">
<span id="type">直播中</span>
<img class="title_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540965075296&di=d3d72f8800e32825c0a2b50c74eb2cfd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D8144e47c063b5bb5bed720f606d2d523%2Ff4c66a2eb9389b50e6b205858035e5dde6116eb4.jpg" />
<span id="num">123355人观看</span>
<p>ksksskskssksksskskssksksskskssksksskskss</p>
</div>
<div class="row_line">
<span id="type">直播中</span>
<img class="title_img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540965075296&di=d3d72f8800e32825c0a2b50c74eb2cfd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D8144e47c063b5bb5bed720f606d2d523%2Ff4c66a2eb9389b50e6b205858035e5dde6116eb4.jpg" />
<span id="num">123355人观看</span>
<p>ksksskskssksksskskssksksskskssksksskskss</p>
</div>
</div>
</body>
<script type="text/javascript">
var width=$(window).width();
var height=$(window).height();
$("#canvas").attr("width",width);
$("#canvas").attr("height",height);
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isAndroid) {
$("#video").hide();
$("i.fa").show();
} else {
$("i.fa").hide();
$("#canvas").hide();
}
var videoanimate;
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1540965075296&di=d3d72f8800e32825c0a2b50c74eb2cfd&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3D8144e47c063b5bb5bed720f606d2d523%2Ff4c66a2eb9389b50e6b205858035e5dde6116eb4.jpg";
context.drawImage(img, 0, 0, canvas.width, canvas.height);
function animate() {
if(video.paused) {
$(".videoBox i.fa").show();
}
context.drawImage(video, 0, 0, canvas.width, canvas.height);
videoanimate = requestAnimationFrame(animate);
}
$("#canvas,i.fa").click(function() {
if(isAndroid) {
animate();
if(!video.paused) {
video.pause();
} else {
video.play();
$(".videoBox i.fa").hide();
}
}
})
$("#agen").click(function() {
$(".popup_content").hide();
})
</script>
</html>
