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视频类型,仿吴某某参军！

再谈23种设计模式（3）：行为型模式（学习笔记）

Power Automate Desktop 安装完，登录后老是提示one driver 错误

微前端学习笔记(4):从微前端到微模块之EMP与hel-micro方案探索

微前端学习笔记（1）：微前端总体架构概述，从微服务发微

985 硕士程序员，空窗 4 个月没有 Offer！

一文搞懂 Spring 循环依赖

赛博斗地主——使用大语言模型扮演Agent智能体玩牌类游戏。

VScode右键打开(添加到右键)

记一次 .NET某工控视觉自动化系统卡死分析

WindowsServer--SQL Server搭建主从同步实现读写分离 - 事务性分发

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

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

移動端資源整合！

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

H5仿吳亦凡參軍H5

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結