master

分支 (1)

管理

管理

master

video_boutique_short_video
/
pc.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="source/favicon.ico" />
<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="source/pc.css">
<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>

<body>
	<span style="position:absolute;top:15px;left:8vw;color:#fff;font-size:16px;">
		<strong style="font-size:18px;">精品短视频</strong>   | 看见美好生活
	</span>
	<div class="app">
		<div>
		    <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="source/bg.jpg"></video>
		</div>
		<div class="box">
			<div style="padding-top:10px;padding-left:40px;background-color: #0E0F1A;">
				<img src="source/logo.png" style="border-radius:20px;width:32px;height:32px;background-color: #fff;">
			    <span style="color:#fff;padding-left:12px;font-size:16px;background-color: #0E0F1A;" id="userid">@Jmw`Power</span>
			</div>
			<div style="padding-top:15px;padding-left:20px;padding-right:20px;background-color: #0E0F1A;">
			    <span style="color:#fff;color: #999999;background-color: #0E0F1A;">本程序仅作研究学习演示，视频采集自网络;原作者拍摄创作不易，请勿下载传播!</span>
			</div>
			<div style="padding-top: 15px;padding-left: 40px;padding-right:40px;background-color: #0E0F1A;text-align: center;font-size:14px;">
				<span style="color: #FF4040;background-color: #0E0F1A;">点击来源切换数据源</span><br>
			    <span style="color: #4682B4;background-color: #0E0F1A;">点击爱心按钮收藏</span>
			</div>
			<div style="padding-top: 15px;padding-left: 20px;padding-right:20px;background-color: #0E0F1A;text-align: center;">
				<span style="color:#fff;background-color: #0E0F1A;">点击按钮选择【连续】/【循环】模式</span><br>
				<span style="color:#fff;background-color: #0E0F1A;">点击【PASS】按钮刷新播放下一个</span><br>
			    <span style="color:#fff;background-color: #0E0F1A;">单击视频 播放/暂停</span><br>
			    <span style="color:#fff;background-color: #0E0F1A;">双击视频进入 全屏播放</span><br>
			</div>
			<div style="padding-top: 15px;padding-left: 20px;padding-right:20px;background-color: #0E0F1A;text-align: center;">
				<button id="bth" class="xhms">单视频循环播放</button>
			</div>
			<div style="padding-top: 15px;padding-left: 20px;padding-right:20px;background-color: #0E0F1A;text-align: center;">
				<button class="pass" onclick="players();">PASS</button>
			</div>
			<div style="padding-top: 15px;padding-left: 20px;padding-right:20px;background-color: #0E0F1A;text-align: center;">
				<button id="yuan">当前数据源【精品】</button>
			</div>

		</div>
	</div>
	<div class="bom">
		<div style="text-align: center;color:#fff;">
			<strong>本程序仅作研究学习演示，数据采集自网络;原作者拍摄创作不易，请勿下载传播!</strong>
		</div>
	</div>
</body>

<script type="text/javascript" src="source/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="source/jquery.cookie.min.js"></script>
<script>
$(document).ready(function(){
    auto = false;
    gi = 1;
    url = "http://xjj.jmwpower.top/get/get1.php";
    vdurl = "./demo.mp4";
    player = document.getElementById("player");
    players();

    $("#bth").on("click", function(){
        auto = !auto;
        this.innerText = (auto ? '自动连续播放下一个' : '单视频循环播放');
        this.className = (auto ? 'zdlb' : 'xhms');
    });

    $("#yuan").on("click", function(){
    	if (gi < 10) {
    		gi = gi + 1;
    		this.innerText = "源" + gi;
    		url = "http://xjj.jmwpower.top/get/" + gi + ".php";
    	} else if (gi = 10) {
			gi = 1;
    		this.innerText = "源" + gi;
            $("#userid").html('@Jmw-Power');
    		url = "http://xjj.jmwpower.top/get/get" + gi + ".php";
    	}
        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() {
    $.get(url,function(data,status){
        if (status==status) {
            console.log("成功获取数据！");
            player.src = data;
            vdurl = data;
            console.log(data);
            player.play();

			$.ajax({url: data,type: 'GET',complete: function(response) {
				if(response.status != 200) {
					console.log(response.status);
					players();
				}
			}});
        } else {
            console.log("失败，重新发起请求！");
            players();
        }
    });
}

//进入全屏
function FullScreen() {
    if (player .requestFullscreen) {
        player .requestFullscreen();
        player.play();
    } else if (player .mozRequestFullScreen) {
        player .mozRequestFullScreen();
        player.play();
    } else if (player .webkitRequestFullScreen) {
        player .webkitRequestFullScreen();
        player.play();
    }
}

</script>
</html>