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


Posted in HTML / CSS onJune 03, 2020

前言

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

效果图

如图所示,

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

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

代码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视频自适应页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 #HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 #HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 #HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 #HTML / CSS
html5拖拽应用记录及注意点
May 27 #HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 #HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
May 26 #HTML / CSS
You might like
php利用单例模式实现日志处理类库
2014/02/10 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
jquery插件开发方法(初学者)
2012/02/03 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Python MySQLdb Linux下安装笔记
2015/05/09 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
python实现批量图片格式转换
2020/06/16 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
20行python代码实现人脸识别
2019/05/05 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
PHP面试题及答案二
2015/05/23 面试题
绩效专员岗位职责
2013/12/02 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
小学生母亲节演讲稿
2014/05/07 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
安全生产培训心得体会
2016/01/18 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL