fhefh2015 · June 20, 2018 06:06
diff --git a/h5_vide.html b/h5_vide.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
    <style>
        html {
            -webkit-text-size-adjust: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            font-family: Helvetica;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
            margin: 0;
            padding: 0;
            font-weight: normal;
            text-indent: 0;
        }

        a, button, input, textarea, select {
            background: none;
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            outline: none;
            -webkit-appearance: none;
        }

        em {
            font-style: normal
        }

        li {
            list-style: none
        }

        a {
            text-decoration: none;
        }

        img {
            border: none;
            vertical-align: top;
        }

        table {
            border-collapse: collapse;
        }

        textarea {
            resize: none;
            overflow: auto;
        }

        .display_flex {
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }

        .display_flex_1 {
            -moz-box-flex: 1; /*Firefox*/
            -webkit-box-flex: 1; /*Safari,Opera,Chrome*/
            -webkit-flex: 1;
            flex: 1;
        }

        .hide {
            display: none;
        }

        .container-video{
            position:absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            z-index:2;
            display:none;
            overflow:hidden;
            text-align:center;
        }
        .container-video.active{
            display:block;
        }
        .container-video video{

            height:100%;
            width:100%;
            margin-left:auto;
            margin-right:auto;
        }


        .button {
            position: fixed;
            width: 100px;
            height: 50px;
            background: #266FE5;
            left: 50%;
            margin-left: -50px;
            bottom: 20px;
            z-index: 100;
        }
    </style>
    <script src="http://mat1.gtimg.com/hb/chenz/cj0808/js/jquery.min.js"></script>
 </head>
 <body>
 <div class="button"></div>
 <div class="container-video">
    <video id="video" src="http://qiniu-xpc3.xpccdn.com/5b1f8a486fc00.mp4" preload="auto" webkit-playsinline="true"
           playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
           x5-video-orientation="portrait" style="object-fit: fill;"></video>
 </div>
 <script>
    var video = document.getElementById('video');

    $(".button").on('click', function () {
        $('.container-video').addClass('active');
        $('video')[0].play();
    });

    //侦听视频结束要做的事儿
    $('video').on('ended', function () {
        $('.container-video').removeClass('active');
        //todo here
    });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="target-densitydpi=device-dpi,width=640,user-scalable=no"/>
	<style>
	html {
	-webkit-text-size-adjust: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	font-family: Helvetica;
	}

	html, body {
	position: relative;
	height: 100%;
	}

	body {
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;
	}

	body, h1, h2, h3, h4, h5, h6, p, dl, dd, ul, ol, pre, form, input, textarea, th, td, select {
	margin: 0;
	padding: 0;
	font-weight: normal;
	text-indent: 0;
	}

	a, button, input, textarea, select {
	background: none;
	-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
	outline: none;
	-webkit-appearance: none;
	}

	em {
	font-style: normal
	}

	li {
	list-style: none
	}

	a {
	text-decoration: none;
	}

	img {
	border: none;
	vertical-align: top;
	}

	table {
	border-collapse: collapse;
	}

	textarea {
	resize: none;
	overflow: auto;
	}

	.display_flex {
	display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox; /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}

	.display_flex_1 {
	-moz-box-flex: 1; /Firefox/
	-webkit-box-flex: 1; /Safari,Opera,Chrome/
	-webkit-flex: 1;
	flex: 1;
	}

	.hide {
	display: none;
	}

	.container-video{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:2;
	display:none;
	overflow:hidden;
	text-align:center;
	}
	.container-video.active{
	display:block;
	}
	.container-video video{

	height:100%;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	}


	.button {
	position: fixed;
	width: 100px;
	height: 50px;
	background: #266FE5;
	left: 50%;
	margin-left: -50px;
	bottom: 20px;
	z-index: 100;
	}
	</style>
	<script src="http://mat1.gtimg.com/hb/chenz/cj0808/js/jquery.min.js"></script>
	</head>
	<body>
	<div class="button"></div>
	<div class="container-video">
	<video id="video" src="http://qiniu-xpc3.xpccdn.com/5b1f8a486fc00.mp4" preload="auto" webkit-playsinline="true"
	playsinline="true" x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
	x5-video-orientation="portrait" style="object-fit: fill;"></video>
	</div>
	<script>
	var video = document.getElementById('video');

	$(".button").on('click', function () {
	$('.container-video').addClass('active');
	$('video')[0].play();
	});

	//侦听视频结束要做的事儿
	$('video').on('ended', function () {
	$('.container-video').removeClass('active');
	//todo here
	});
	</script>
	</body>
	</html>