html5如何實(shí)現(xiàn)視頻自動(dòng)橫過(guò)來(lái)自適應(yīng)頁(yè)面且點(diǎn)擊播放功能

這篇文章將為大家詳細(xì)講解有關(guān)html5如何實(shí)現(xiàn)視頻自動(dòng)橫過(guò)來(lái)自適應(yīng)頁(yè)面且點(diǎn)擊播放功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

前言

在長(zhǎng)屏手機(jī)里，橫過(guò)來(lái)的視頻高度充滿(mǎn)，寬度自適應(yīng)后居中；
在短屏手機(jī)里，橫過(guò)來(lái)的視頻寬度充滿(mǎn)，高度自適應(yīng)后居中；

代碼HTML

<!-- 跳過(guò)視頻按鈕 -->
	<img src="next.png" alt="" class="btn_video vertical_middle">
	<!-- 視頻頁(yè) -->
	<div class="page page_video">
		<!-- 視頻開(kāi)始按鈕 -->
		<img src="start_video.png" alt="" class="start_video">
		<div class="video_info">橫屏觀(guān)看效果更佳</div>
		<!-- 視頻 -->
		<video id="video" style="object-fit:fill;" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow"
   airplay="allow" x5-video-player-type="h6" x5-video-player-fullscreen="true" x5-video-orientation="portrait" poster="./images/video1.png" src="./video/1.mp4">
		</video>

下面是video里面屬性的注釋?zhuān)?/p>

style="object-fit:fill;" /*視頻在微信里全屏*/
		
		playsinline="true" /*支持小窗播放*/

		airplay="allow"/*支持Airplay的設(shè)備*/

		x5-video-player-type="h6" /*啟用H5播放器*/

		x5-video-player-fullscreen="true" /*全屏設(shè)置，防止橫屏*/

		x5-video-orientation="portrait" /*播放器橫豎屏方向， landscape橫屏，portraint豎屏，默認(rèn)值為豎屏*/

CSS

/*頁(yè)面全屏*/
	.page {
	    position: absolute;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 100%;
	    /*background-size: 100% 100%;*/
	}
	/*垂直居中*/
	.vertical_middle{
		top: 50%;
		transform: translateY(-50%);
	}
	/* 視頻 */
	.page_video{
		width: 100%;
		background: #000000;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
	}
	/*視頻是以（0，0）為中心旋轉(zhuǎn)的90度，所以left為100%*/
	#video{
		position: absolute;
		/* margin-left: 4px; */
		left: 100%;
		z-index: 1;
	}
	.btn_video{
		width: 10%;
		position: absolute;
		left: 5%;
		z-index: 10;
		/*display:none;*/
	}
	/*視頻播放按鈕*/
	.start_video{
		width: 100px;
		height: 100px;
		position: absolute;
		left: 10%;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 100;
		
	}
	/*橫屏觀(guān)看更佳的提示文字*/
	.video_info{
		height: 30px;
		font-size: 30px;
		position: absolute;
		top: 0%;
		bottom: 0;
		margin: auto;
		left: 30%;
		z-index: 100;
		color: #fff;
		transform:rotate(90deg);
		-ms-transform:rotate(90deg); /* Internet Explorer */
		-moz-transform:rotate(90deg); /* Firefox */
		-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
		-o-transform:rotate(90deg); /* Opera */
	}

JS

	/* 獲取屏幕高度 */
	var phone_height = document.documentElement.clientHeight;
	if(phone_height<1496){
		// console.log('屏幕高度<1496');
		var back_up = (1496-phone_height)/2;
		$(".page_video").css("backgroundPosition","0 -"+back_up+"px");
		if( phone_height >= 1360 ){
			//華為手機(jī)&&蘋(píng)果x
		}
	}else{
		 // console.log('屏幕高度>1496');
		$(".page_video").css("backgroundSize","100% 100%");
	}

	//視頻橫屏
	var width = document.documentElement.clientWidth;
	var height = document.documentElement.clientHeight;
	$(".page_video").height(height+"px");
	
	var video_width;
	var video_height;
	var video_top = 0;
	var video_left = 0;
	// 設(shè)置視頻倒過(guò)來(lái)
	if( width < height ){
		//一個(gè)1920*1080的視頻，到手機(jī)上高750時(shí)，寬度是1333.333
		if( height < 1334 ){
			console.log("手機(jī)分辨率高度 < 1333.33，視頻橫過(guò)來(lái)后寬度鋪滿(mǎn)，高度自適應(yīng)后鋪不滿(mǎn)屏幕，所以向左平移一些居中");
			$("#video").width(height);
			video_width = $("#video").width();
			
			// 等比例自適應(yīng)數(shù)值不是正好的，那就手動(dòng)定高度
			video_height = video_width/1920*1080;
			$("#video").height(video_height);
			
			//設(shè)置視頻水平居中
			video_left = -(width - video_height)/2;
		}else{
			console.log("手機(jī)分辨率高度 > 1333.33，視頻橫過(guò)來(lái)后高度鋪滿(mǎn)，寬度自適應(yīng)后鋪不滿(mǎn)屏幕，所以向下平移一些居中");
			$("#video").height(width);
			video_height = $("#video").height();
		
			// 等比例自適應(yīng)數(shù)值不是正好的，那就手動(dòng)定寬度
			video_width = (1920/1080)*$("#video").height();
			$("#video").width(video_width);
			
			//設(shè)置視頻垂直居中
			video_top = (height - video_width)/2;
		}
		
		//把調(diào)整好的數(shù)值賦給視頻
		$("#video").css({'left': "100%","top":video_top+"px","marginLeft":video_left+"px",'transform':'rotate(90deg)','transformOrigin':'0 0'} ); 
	}
	//視頻頁(yè)
	var myVideo = document.getElementById('video');
	//點(diǎn)擊播放按鈕
	$(".start_video").click(function(){
		$(".start_video").hide();
		$(".video_info").hide();
		myVideo.play();
	})
	//監(jiān)聽(tīng)視頻被點(diǎn)擊
	myVideo.addEventListener('touchstart', function () {
		$(".start_video").hide();
		$(".video_info").hide();
		myVideo.play();
	});
	//點(diǎn)擊跳過(guò)按鈕
	$(".btn_video").click(function(){
		video_end();
	})
	//視頻播放結(jié)束
	myVideo.addEventListener('ended', function () { 
        video_end();
    }, false);
	//視頻播放結(jié)束的函數(shù)
	function video_end(){
		myVideo.pause();
		console.log("視頻播放結(jié)束");
	}

關(guān)于“html5如何實(shí)現(xiàn)視頻自動(dòng)橫過(guò)來(lái)自適應(yīng)頁(yè)面且點(diǎn)擊播放功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。