<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>dafeiyu-|-小姐姐</title>
<script type="text/javascript">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
// window.location.href = "index.html";
}else{
window.location.href = "pc.html";
}
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
touch-action: pan-y;
text-align: center;
}
.app{
width: 100%;
height:100%;
position: absolute;
top:0px;
right:0px;
bottom: 0px;
left:0px;
overflow: hidden;
background-color: #ffffff;
}
#player{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 100;
}
/* login */
.login-header{width:100%;text-align:center;height:30px;font-size:24px;line-height:30px;background-color:#ffffff;}
.login{position:fixed;border:#ebebeb solid 1px;top:10%;left:5%;right:5%;display:none;background:#ffffff;box-shadow:0px 0px 20px #ddd;z-index:9999;}
.login-title{width:100%;margin:10px 0px 0px 0px;text-align:center;line-height:40px;height:40px;font-size:18px;position:relative;background-color:#ffffff;}
.login-title span{position:absolute;font-size:12px;right:-20px;top:-30px;border:#ebebeb solid 1px;width:40px;height:40px;border-radius:20px;background-color:#ffffff;}
.login-title span a{display:block;border-radius:20px;font-size:16px;background-color:#ffffff;}
.login strong{float:left;display:block;font-size:16px;background-color:#ffffff;}
.login span{display:block;font-size:14px;background-color:#ffffff;text-align:left;}
.login-input-content{margin-top:20px;background-color:#ffffff;}
.login-input {overflow:hidden;margin:0px 0px 20px 0px;background-color:#ffffff;}
.login-input label{float:left;width:100%;padding-right:10px;text-align:left;line-height:35px;height:35px;font-size:22px;background-color:#ffffff;}
.login-input input.list-input{float:center;line-height:35px;height:35px;width:100%;border:#ebebeb 1px solid;text-indent:5px;background-color:#ffffff;}
.login-button{width:70%;margin:28px auto 0px auto;line-height:58px;font-size:14px;border:#ebebeb 1px solid;text-align:center;background-color:#ffffff;}
.login-button a{display:block;background-color:#ffffff;}
</style>
<body>
<div class="app">
<video id="player" preload autoplay webkit-playsinline='true' playsinline='true' x-webkit-airplay='true' x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-ignore-metadata='true' controlslist="nodownload" poster="./img/bg.jpg"></video>
</div>
<span style="position:absolute;top:5px;left:10px;color:#fff;font-size:10px;">点击按钮选择【连续】/【循环】模式</span>
<span style="position:absolute;top:20px;left:10px;color:#fff;font-size:10px;">右滑/上滑切换下一个</span>
<span style="position:absolute;top:35px;left:10px;color:#fff;font-size:10px;">点击来源切换数据源</span>
<span style="position:absolute;top:50px;left:10px;color:#fff;font-size:10px;">点击爱心按钮收藏</span>
<span style="position:absolute;top:65px;left:10px;color:#fff;font-size:10px;">单击播放/暂停</span>
<span style="position:absolute;top:80px;left:10px;color:#fff;font-size:10px;">双击进入全屏</span>
<div id="buttons" style="position:absolute;bottom:150px;right:10px;">
<button id="bth" style="border-radius:20px;width:32px;height:32px;">循环</button>
<br><br><br>
<button id="yuan" style="border-radius:20px;width:32px;height:32px;">源1</button>
<br><br><br>
<button style="border-radius:20px;width:48px;height:32px;" onclick="players();">PASS</button>
<br><br><br>
<img style="border-radius:10px;width:32px;height:32px;" src="./img/love.png" title="点击添加收藏" id="love"/>
</div>
<span style="position:absolute;top:5px;right:10px;color:#4682B4;;font-size:12px;" id="userid">@dafeiyu`Power</span>
<span style="position:absolute;bottom:10px;left:10px;color:#fff;font-size:9px;">本程序仅作研究学习演示，数据采集自网络<br>原作者拍摄创作不易，请勿下载传播</span>
</body>
<div class="login" id="dlym" style="height:80vh;width: 85vw;">
<div class="login-title">ID*组·收藏登入<span><a class="close-login" onclick="$('#dlym').hide();">关闭</a></span></div>
<div class="login-input-content">
<div style="width:100%;height:1px;border-top: solid #ACC0D8 1px;"></div><br>
<div class="login-input">
<label>ID*组·账号：</label>
<input type="text" placeholder="ID*组·账号（建议使用易记的纯数字）" id="username" class="list-input"/>
</div>
<br><div style="width:100%;height:1px;border-top: solid #ACC0D8 1px;"></div>
<strong>温馨提示：</strong><br>
<span>1.本收藏功能为开放性ID组账号收藏体验，ID*组·账号不设密码，如已存在同ID组账号，即会在原ID组账号上添加收藏数据，您可以公开您的ID组账号给您志同道合的好友们；添加的收藏数据暂不支持取消，不支持删除ID组账号，请您谨慎操作！</span><br>
<span>2.点击来源显示按钮切换到收藏源即可浏览当前ID组账号收藏的数据。</span>
</div>
<div class="login-button"><a id="login">登录账号</a></div>
</div>
<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.cookie.min.js"></script>
<script>
$(document).ready(function(){
auto = false;
gi = 1;
url = "./demo.mp4";
vdurl = "./demo.mp4";
player = document.getElementById("player");
players();
var user = $.cookie('user');
if (user != null) {
$("#userid").html('@'+user);
} else {
$("#userid").html('@dafeiyu');
}
$("#bth").on("click", function(){
auto = !auto;
this.innerText = (auto ? '连播' : '循环');
});
$("#love").on("click", function(){
user = $.cookie('user');
if (user == null) {
$('#dlym').show();
} else {
// $.post("post.php",{userid:user,datastr:vdurl},function(datat,status){
// dataobj = JSON.parse(datat);
// if (dataobj.status == "YES") {
// $("#love").attr('src','./img/loves.png');
// console.log(dataobj.message);
// }else{
// console.log(dataobj.message);
// }
// });
}
});
$("#yuan").on("click", function(){
if (gi == 0) {
gi = 1;
this.innerText = "源" + gi;
} else if (gi == 1) {
gi = 0;
this.innerText = "源" + 2;
$("#userid").html('@dafeiyu');
}
url = url+"?sourceId=" + gi;
console.log(url);
});
player.addEventListener('ended', function () {
console.log("播放结束");
if (auto == false) {
player.play();
} else {
players();
}
}, false);
touchtime = new Date().getTime();
$("#player").on("click", function(){
if( new Date().getTime() - touchtime < 500 ){
console.log("dblclick");
FullScreen();
}else{
touchtime = new Date().getTime();
console.log("click");
if (player.paused) {
player.play();
} else {
player.pause();
}
}
});
});
function players() {
console.log("成功获取数据！");
player.src = url;
vdurl = url;
if (gi==0) {
$("#love").attr('src','./img/loves.png');
} else {
$("#love").attr('src','./img/love.png
仿抖音html PC+h5.zip
1星 需积分: 50 133 浏览量
2020-09-01
10:39:57
上传
评论 5
收藏 2.92MB ZIP 举报 
仿抖音html PC+h5.zip （15个子文件） 
短视频仿抖音 css 
pc.css 9KB img 
loves.png 3KB love.png 3KB ewm.png 82KB love1.png 3KB
bg.jpg 37KB logo.png 7KB favicon.ico 4KB
index.html 11KB js jquery.cookie.min.js 1KB jquery-1.11.0.min.js 94KB user user.md 73B pc.html 9KB
demo.mp4 2.75MB favicon.ico 4KB资源评论
我在人間凑数的日子2023-05-19有压缩密码。密码错误，注意闭坑
