H5視頻類型,仿吳某某參軍！

這是一個視頻兼容問題的H5,爲兼容各平臺所採用的對策！只在部分機型測試！如有問題歡迎指出！或者有什麼好的建議可以一起分享學習！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">	
	<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">  		
		<link rel="stylesheet" href="css/global.css">
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/global.js"></script>
		
		<title></title>
	</head>
	<body>
		<div class="videopageBox1">
			<div>
				<header class="videopageBox1Bg sp"></header>
				<div class="videopageBox1Content">
					<h3>粉絲哭倒？某某要入伍做準備</h3>
					<h5>2015-1-2<span>疼薰魚樂</span></h5>	
					<p>
						1990年11月06日出生於廣東省廣州市，演員、歌手。
						2007年吳亦凡通過S.M. GlobalAudition Canada加入了韓國SM娛樂公司。
					</p>
				</div>
			</div>
			
			<!--pagevideo-->
			<div class="videobox">
				<div class="bg-video"></div>		
				<div class="video"><video id="video1" src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v1.mp4" preload="auto" x-webkit-airplay="true" webkit-playsinline="true"></video></div>	
			</div>
			<!---->
			<div class="videopageBox1Content1">
				<p>
					吳亦凡（Kris），1990年11月06日出生於廣東省廣州市，演員、歌手。
					2007年吳亦凡通過S.M. GlobalAudition Canada加入了韓國SM娛樂公司，參加練習生培訓。
					2012年作爲EXO組合成員正式出道，並任EXO/EXO-M隊長、主Rapper、門面擔當。
					2014年5月15日吳亦凡正式向首爾中央地方法院請求判決與SM娛樂公司“專屬合同”無效。
					之後，吳亦凡迴歸中國國內發展，出演個人首部電影，擔任徐靜蕾執導的電影《有一個地方只有我們知道》男主角，憑此獲
				</p>
			</div>

			
		</div>
		<!--page2-->
		<div class="videobox2">
			<video id="video2">
				<source src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v2.mp4" type="video/mp4">
			</video>
		</div>
		<!--page3-->
		<div class="videopageBox3 page">
			<div class="videopageBox3Title">
				<div class="icon-header"><span class="icon sp"></span></div>
				<div>
					<h4>吳亦凡</h4>
					<h5>邀請你視頻聊天
					<span class="load_one"></span>
					<span class="load_two"></span>
					<span class="load_three"></span>						
					</h5>
				
				</div>
			</div>
			<div class="videopageBox3Icon">
				<ul>
					<li>
						<div class="icon-watch"><span class="icon sp"></span></div>
						<h5>提醒我</h5>
					</li>
					<li>
						<div class="icon-im"><span class="icon sp"></span></div>
						<h5>信息</h5>
					</li>
				</ul>
			</div>
			<div class="videopageBox3Go">
				<div class="icon-go"><span class="icon sp"></span></div>
				<h5>接聽</h5>
			</div>
		</div>
		<!--page3 phone music-->
		<audio src="images/iphone.mp3" class="phoneMusic"  loop="loop"></audio>
		<!--page4-->
		<div class="videobox4">
			<video id="video4">
				<source src="http://ossweb-img.qq.com/images/wefire/act/a20150826kris/v3.mp4" type="video/mp4">
			</video>
		</div>	
		<!--page5-->
		<div class="videobox5 page">
			
		</div>			
	</body>
</html>

global.js



//video 
/**遇到的兼容問題
 * 一.(Ios ,Android)
 * 視頻無法自動播放解決方案
 * 1：當用戶觸碰屏幕的時候播放視頻，爲解決在不同怪異手機視頻初始化顯示問題，
 * 可在視頻上添加視頻第一幀圖片進行遮擋！
 * 2：
 * 
 * 
 * 二.(Ios ,Android)
 * 如果當前頁面的後面有全屏的視頻，即使不顯示，位置也不在視窗內。
 * 點擊頁面時會出現“點透”的BUG，頁面上的任何觸屏事件都捕獲不到，
 * 就是觸屏事件全被看不到的video搶去，解決方法就在video隱藏的時候設置 width:1px; height:1px;
 * 等到播放的時候再設置成全屏的寬高。
 * 三.
 * 
 * 
 * 
 * 
 * 
 * **/





//video 
window.onload = function(){

	//videoFn();//這個是第一版的視頻播放存在兼容問題
	videoNew()//跟第一版 差不多,都存在兼容問題 ,但是完整 。ps：酷派手機 ，手機中的逗逼手機
	//videoAll()//全部是視頻可解決可知的兼容問題,這是轉載別人的地址  http://www.shanfuapp.com/kehu/wuyifan/  
}


	//console.log(v1.currentTime);
/***********videonew************/
function videoNew(){
		//var 
	var v1 = $("#video1")[0];
	var v2 = $("#video2")[0];
	var v4 = $("#video4")[0];
	var bgv1 = $(".bg-video");
	var bgv2 = $('.videobox2');
	var videoBox1 = $(".videopageBox1");
	var videoBox3 = $(".videopageBox3");
	var musicPhone = $(".phoneMusic");
	var videoBox4 = $(".videobox4");
	var videoBox5 = $(".videobox5")
    //移動端頁面，在圖片上拖動滾動條 或 在最後一段文字時拖動滾動條，則播放視頻  
    var browser = {  
        versions:function(){  
            var u = navigator.userAgent, app = navigator.appVersion;  
            return {  
                webKit : u.indexOf('AppleWebKit') > -1,   
                ios    : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),   
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,   
                weixin : u.indexOf('MicroMessenger') > -1,   
                txnews : u.indexOf('qqnews') > -1,  
                sinawb : u.indexOf('weibo') > -1,  
                mqq    : u.indexOf('QQ') > -1  
            };  
        }(),  
        language:(navigator.browserLanguage || navigator.language).toLowerCase()  
    };  	
	if(browser.versions.android||browser.versions.weixin||browser.versions.txnews||browser.versions.mqq||browser.versions.webKit||browser.versions.ios||browser.versions.sinawb){  
        //console.log(browser)
        //控制視頻播放
        $("html").one("touchstart",function(){  
            if_play();  
        });  
    }  
	function if_play(){
		if(v1.currentTime <= 0){
		//微信端同時播放兩個視頻會有停頓空屏的可能，所以先播放第二個視頻,在其timeupdate事件中暫停,暫停後取消監聽timeupdate事件
			v2.play();
			v2.addEventListener('timeupdate',v2_timeupdate,false);
			//播放第一個視頻
			setTimeout(function(){
				v1.play();
				v1.addEventListener("timeupdate",v1_timeupdate,false);
				v1.addEventListener("ended",v1_end,false);
			},1000);
		}
	}
	//監聽播放位置發生改變
	function v1_timeupdate(){
		if(v1.currentTime > 0){
			v1.style.width = "100%";
			v1.style.height = "100%";
			bgv1.hide();		
		}
	}
	//第一頁視頻播放完畢後，播放第二頁被暫停的視頻
	function v1_end(){
		v2.style.width = '100%';
		v2.style.height = '100%';
		v2.play();
		v2.addEventListener("ended",v2_end ,false);
		videoBox1.hide();
		bgv2.show();
	}
	//與第一個視頻同時播放並立即暫停
	function v2_timeupdate(){
		//微信端視頻沒有播放時，立即暫停，再次播放會有停頓空屏的可能
		if(v2.currentTime > 0){
			v2.pause();
			v2.removeEventListener("timeupdate",v2_timeupdate,false);
		}
	}
	function v2_end(){
		musicPhone[0].play();
		bgv2.addClass("hideout").hide();
		videoBox3.show().addClass("showin");
	}
	//接電話
	$(".videopageBox3Go").on("click",function(){
		musicPhone[0].pause();
		videoBox4.show()
		videoBox3.hide();
		v4.style.width = "100%";
		v4.style.height = "100%";
		v4.play();
		//v4.addEventListener("timeupdate",v4_timeupdate,false);
		v4.addEventListener("ended",v4_end,false);
	});
	function v4_end(){
		videoBox4.hide();
		videoBox5.show()
	};
}



/***************第一版*******************/
function videoFn(){
		//var 
	var v1 = $("#video1")[0];
	var v2 = $("#video2")[0];
	var v4 = $("#video4")[0];
	var bgv1 = $(".bg-video");
	var bgv2 = $('.videobox2');
	var videoBox1 = $(".videopageBox1");
	var videoBox3 = $(".videopageBox3");
	var musicPhone = $(".phoneMusic");
	var videoBox4 = $(".videobox4");
	//第一次觸屏播放初始化視頻2
	$(document).one("touchstart",function(){
		v2.play();
	});
	//視頻1播放完回調函數2
	v1.addEventListener("ended",function(evt){
		v2.currentTime = 0;
		videoBox1.hide();
		bgv2.show();
		v2.style.width = "100%";
		v2.style.height = "100%";
		v2.play();	
	});
	//視頻2添加事件 監聽如果已經播放,就暫停
	function initVideo(){
		if(v2.currentTime){
			v2.pause();
			v2.removeEventListener("timeupdate",initVideo,false);
			console.log("over")
		}
	}
	v2.addEventListener("timeupdate",initVideo,false);
	//滾動頁面到一定高度播放視頻1
	var isPlay;
	$(document).on("touchmove",function(){
		var d = v1.getBoundingClientRect().bottom;//元素下邊距離頁面上邊的距離
		
		if (isPlay) return;
		console.log(d);	
		if (d < 400){
			v1.style.width = '100%';
			v1.style.height = '100%';
			bgv1.hide();
			v1.play();
			isPlay = true;
		}
	});
	//視頻二播放完
	v2.addEventListener("ended",function(evt){
		musicPhone[0].play();
		videoBox3.fadeIn();
		bgv2.hide();
	});
	
	//第四頁視頻
	$(".videopageBox3Go").on("click",function(){
		musicPhone[0].pause();
		videoBox4.show();
		v4.style.width = "100%";
		v4.style.height = "100%";
		v4.play();
		videoBox3.hide();
	});
}

css

/**global**/
html,body{
	height:100%;
	margin: 0;
	padding: 0;
}
ul,li{list-style: none;margin: 0;padding: 0;}
body{
	font-family:"microsoft yahei";
}
video{width: 1px;height: 1px;}
.page{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
h3,h4,h5{margin: 0;padding: 0;}




/**Flish**/
/**show**/
.showin{
	-webkit-animation-name: showin;
	animation-name:  showin;	
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes showin {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

@keyframes showin {
	0% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		-ms-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}

/**hide**/
.hideout{
	-webkit-animation-name: hideout;
	animation-name:  hideout;	
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes hideout {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes hideout {
	0% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		-ms-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(1, 1, 1);
		-ms-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1)
	}
}








/**page1**/
.videobox{
	position: relative;
	width: 100%;
	height: 60vw;
}
.videopageBox1{
	display: block;
	padding: 10px;
}
.videopageBox1Bg{
    display: block;
    width: 138px;
    height: 20px;
    background-position: 0px 0px;
    margin: 10px 0;
}
.videopageBox1Content{
    border-top: 1px solid #ccc;
    padding: 10px 0;	
}
.videopageBox1Content h3{
	font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    color: #152028;
    letter-spacing: 1px;
}
.videopageBox1Content h5{
	line-height: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #666;	
}
.videopageBox1Content h5 span{
	margin-left: 10px;
}
.videopageBox1Content p{
    text-align: justify;
    text-indent: 20px;
    font-size: 20px;
    color: #666;
    margin: 10px 0;
}
.videopageBox1Content1{
	padding: 10px 0;
}
.videopageBox1Content1 p{
    font-size: 16px;
    text-align: justify;
    text-indent: 32px;
    line-height: 24px;	
}

.page1{
	z-index: 9;
}
.page1bg{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/p1_wb_bg.jpg) no-repeat 50% 50%;
    background-size: cover;	
}









/**page2**/
.videobox2{
	position: relative;
	width: 100%;
	display: none;
}

.video{
	width: 100%;
	height: 100%;
}
/**因爲padding取值百分比時候，是相對於包含塊的寬度而定的。視頻1比例是580X386,所以padding-top的值爲386/580=66.55%。**/
.bg-video{
	width: 100%;
	padding-top: 66.55%;
	position: absolute;
	top: 0;
	left: 0;
	background:url(../images/img1.png) no-repeat 0 0;
	background-size: cover;
	z-index: 99;
}

/**icon**/
.sp{
	background-image: url(../images/sp.png);
    background-size: 400px 400px;
}
.icon-header{
	width: 66px;
	height: 66px;
	float: left;
}
.icon-header .icon{
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0px -200px;
}
.icon-watch{
	width: 90px;
    margin: 0px auto;	
    
}
.icon-watch .icon{
	    display: block;
    width: 21px;
    height: 21px;
    margin: 0px auto;
    padding-bottom: 8px;
    background-position: -100px -200px;	
}
.icon-im{
	width: 90px;
    margin: 0px auto;
}
.icon-im .icon{
	    display: block;
    width: 21px;
    height: 21px;
    margin: 0px auto;
    padding-bottom: 8px;
    background-position: -150px -200px;	
}
.icon-go{
	width: 72px;
    margin: 0px auto;
}
.icon-go .icon{
	background-position: -100px -250px;
    display: block;
    width: 75px;
    height: 75px;
}
.videopageBox3Go h5{
    text-align: center;
    line-height: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;	
}






/**page3**/
.videopageBox3{
	position: relative;
	background: url(../images/bg_vcall.jpg) no-repeat 0 0;
	background-size: cover;
	display: none;
}
.videopageBox3Title{
	overflow: hidden;
	padding: 15px;
	padding-top: 20%;
}
.videopageBox3Title div:last-child{
	float: left;
	margin-left: 15px;
}
.videopageBox3Title div:last-child h4{
	font-size: 24px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 2px;
    line-height: 40px;
}
.videopageBox3Title div:last-child h5{
    line-height: 26px;
    color: #fff;
    letter-spacing: 1px;
}
.videopageBox3Icon{
	margin-top: 30%;
}
.videopageBox3Icon ul{
	overflow: hidden;
}
.videopageBox3Icon ul li h5{
	text-align: center;
	color: #fff;
}
.videopageBox3Icon ul li:first-child{
	width: 45%;
	float: left;
}
.videopageBox3Icon ul li:last-child{
	width: 45%;
	float: right;
}
.videopageBox3Go{
	margin-top: 20%;
}
.videopageBox3Title div:last-child span{
  display: inline-block;
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background-color: #fff;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  margin:0 3px;
}




.videopageBox3Title div:last-child .load_one {
  -webkit-animation-delay: -0.32s;
}
.videopageBox3Title div:last-child .load_two {
  -webkit-animation-delay: -0.16s;
}
.videopageBox3Title div:last-child .load_three {
  -webkit-animation-delay: 0s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(1.0); opacity:0 }
  40% { -webkit-transform: scale(1.0); opacity:1 }
}

/**videobox4**/
.videobox4{
	display: none;
}

/**videobox5**/
.videobox5{
	position: relative;
	background: url(../images/phone.png) no-repeat 0 0;
	background-size: cover;
	display: none;
}

H5視頻類型,仿吳某某參軍！

10分鐘搞定Mysql主從部署配置

如何使用 JS 判斷用戶是否處於活躍狀態

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

lightdb數據庫超時相關控制參數

lightdb秒級增加列和刪除列（not null帶默認值）

Java ThreadPoolShutdown

H5視頻類型,仿吳某某參軍！

移動端Flex 佈局新舊混合兼容

移動端資源整合！

移動端高清，多屏適配方案！

H5仿吳亦凡參軍H5

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結