前言

本代码适用于1920*1080的视频,如果是其他尺寸的视频,需要更改js代码里的几个数字,重新计算视频宽高

效果图

如图所示,

在长屏手机里,横过来的视频高度充满,宽度自适应后居中;
在短屏手机里,横过来的视频宽度充满,高度自适应后居中;

长屏手机
短屏手机

代码HTML

<!-- 跳过视频按钮 -->
	<img src="next.png" alt="" class="btn_video vertical_middle">
	<!-- 视频页 -->
	<div class="page page_video">
		<!-- 视频开始按钮 -->
		<img src="start_video.png" alt="" class="start_video">
		<div class="video_info">横屏观看效果更佳</div>
		<!-- 视频 -->
		<video id="video" style="object-fit:fill;" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow"
   airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait" poster="./images/video1.png" src="./video/1.mp4">
		</video>

下面是video里面属性的注释:

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

		airplay="allow"/*支持Airplay的设备*/

		x5-video-player-type="h5" /*启用H5播放器*/

		x5-video-player-fullscreen="true" /*全屏设置,防止横屏*/

		x5-video-orientation="portrait" /*播放器横竖屏方向, landscape横屏,portraint竖屏,默认值为竖屏*/

CSS

/*页面全屏*/
	.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)为中心旋转的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;
		
	}
	/*横屏观看更佳的提示文字*/
	.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 ){
			//华为手机&&苹果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;
	// 设置视频倒过来
	if( width < height ){
		//一个1920*1080的视频,到手机上高750时,宽度是1333.333
		if( height < 1334 ){
			console.log("手机分辨率高度 < 1333.33,视频横过来后宽度铺满,高度自适应后铺不满屏幕,所以向左平移一些居中");
			$("#video").width(height);
			video_width = $("#video").width();
			
			// 等比例自适应数值不是正好的,那就手动定高度
			video_height = video_width/1920*1080;
			$("#video").height(video_height);
			
			//设置视频水平居中
			video_left = -(width - video_height)/2;
		}else{
			console.log("手机分辨率高度 > 1333.33,视频横过来后高度铺满,宽度自适应后铺不满屏幕,所以向下平移一些居中");
			$("#video").height(width);
			video_height = $("#video").height();
		
			// 等比例自适应数值不是正好的,那就手动定宽度
			video_width = (1920/1080)*$("#video").height();
			$("#video").width(video_width);
			
			//设置视频垂直居中
			video_top = (height - video_width)/2;
		}
		
		//把调整好的数值赋给视频
		$("#video").css({'left': "100%","top":video_top "px","marginLeft":video_left "px",'transform':'rotate(90deg)','transformOrigin':'0 0'} ); 
	}
	//视频页
	var myVideo = document.getElementById('video');
	//点击播放按钮
	$(".start_video").click(function(){
		$(".start_video").hide();
		$(".video_info").hide();
		myVideo.play();
	})
	//监听视频被点击
	myVideo.addEventListener('touchstart', function () {
		$(".start_video").hide();
		$(".video_info").hide();
		myVideo.play();
	});
	//点击跳过按钮
	$(".btn_video").click(function(){
		video_end();
	})
	//视频播放结束
	myVideo.addEventListener('ended', function () { 
        video_end();
    }, false);
	//视频播放结束的函数
	function video_end(){
		myVideo.pause();
		console.log("视频播放结束");
	}

总结

到此这篇关于h5视频自动横过来自适应页面且点击播放的文章就介绍到这了,更多相关H5视频自适应页面内容请搜索Devmax以前的文章或继续浏览下面的相关文章,希望大家以后多多支持Devmax!

html5视频自动横过来自适应页面且点击播放功能的实现的更多相关文章

  1. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. 前端实现背景虚化但内容清晰且自适应 的实例代码

    这篇文章主要介绍了前端实现背景虚化但内容清晰且自适应 的实例代码,需要的朋友可以参考下

  4. HTML5调用手机发短信和打电话功能

    这篇文章主要介绍了HTML5调用手机发短信和打电话功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. HTML5 移动页面自适应手机屏幕四类方法总结

    这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下

  6. 使用postMessage让 iframe自适应高度的方法示例

    这篇文章主要介绍了使用postMessage让 iframe自适应高度的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  7. Xcode:iPhone截图不再有效

    解决方法我没有针对您的问题的解决方案,但这是一个解决方法:使用设备制作屏幕截图.生成的屏幕截图将保存在设备上.要将屏幕截图传输到桌面,请不要使用慢速iPhoto或iTunes进行同步.而是使用Preview.app导入图像.文件菜单中有一个命令可以在iPhone连接时从iPhone导入图像.

  8. ios – 页面上有一个或多个错误.在itunesconnect上

    我正在尝试在iTunesconnect上传一个新的iOS应用程序版本,我不断收到错误页面上有一个或多个错误它突出了唯一的语言.请帮忙.并参考附图解决方法简而言之,必须将所有图像添加到“AppPreview和Screenshots”.我刚刚遇到这个问题,这个https://stackoverflow.com/a/38887524/795114的答案帮助我解决了这个问题.不知道为什么,但是当删除其他图

  9. xcode – 了解iPhone分辨率

    我正在使用phonegap将一个非常简单的html5页面导出到iphone应用程序并遇到这个愚蠢的问题.iPhone分辨率为960×640.当我将画布设置为那些尺寸时,它似乎太大了.这是为什么?我怎样才能利用iphone4的全高清功能.如果我将画布设置为较旧的iPhone,似乎画布适合全屏.将视口设置为这样的东西似乎有效,但是这会是性能损失吗?

  10. ios – Websockets可以在移动电话上工作吗?

    相关地,我怀疑长轮询客户端可能是实现类似功能的好方法,但我想知道我可能遇到的移动特定问题.到目前为止,我已经读过长时间的轮询请求可能会对电池寿命产生相当大的影响.我还听说iOS以某种方式限制了对单个服务器的连接数量,这可能是个问题.有没有人在使用实时组件的移动应用程序上工作?

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部