介绍 & lt; !——,跳过视频按钮,——比;
& lt; img src=https://www.yisu.com/zixun/皀ext.png”alt=" class=" btn_video vertical_middle”>
<！——视频页- ->
这篇文章将为大家详细讲解有关html5如何实现视频自动横过来自适应页面且点击播放功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>前言
在长屏手机里,横过来的视频高度充满,宽度自适应后居中;
在短屏手机里,横过来的视频宽度充满,高度自适应后居中;
代码HTML
<！——视频开始按钮- ->
风格=皁bject-fit:填写;“,/*视频在微信里全屏*/playsinline=皌rue",/*支持小窗播放*/airplay=癮llow"/*支持airplay的设备*/x5-video-player-type=癶6",/*启用H5播放器*/x5-video-player-fullscreen=皌rue",/*全屏设置,防止横屏*/x5-video-orientation=皃ortrait",/*播放器横竖屏方向,,景观横屏,portraint竖屏,默认值为竖屏*/CSS /*页面全屏*/.page {
,,,位置:,绝对;
,,,:,0 px;
,,,左:,0 px;
,,,宽度:,100%;
,,,身高:,100%;
,,,/* background-size:, 100%, 100%; */}/*垂直居中*/.vertical_middle {
前:50%;
变换:translateY (-50%);
}/*,视频,*/.page_video {
宽度:100%;
背景:# 000000;
位置:绝对的;
左:0;
顶部:0;
text-align:中心;
}/*视频是以(0,0)为中心旋转的90度,所以左为100% */#{视频
位置:绝对的;/*,margin-left: 4 px; */左:100%;
z - index: 1;
}
.btn_video {
宽度:10%;
位置:绝对的;
左:5%;
z - index: 10;/*显示:没有。*/}/*视频播放按钮*/.start_video {
宽度:100 px;
身高:100 px;
位置:绝对的;
左:10%;
右:0;
顶部:0;
底部:0;
保证金:汽车;
z - index: 100;
}/*横屏观看更佳的提示文字*/.video_info {
高度:30 px;
字体大小:30 px;
位置:绝对的;
前:0%;
底部:0;
保证金:汽车;
左:30%;
z - index: 100;
颜色:# fff;
变换:旋转(90度);
-ms-transform:旋转(90度),,/*,Internet Explorer */-moz-transform:旋转(90度),,/*,Firefox */-webkit-transform:旋转(90度),,/*,Safari 和Chrome */-o-transform:旋转(90度),,/*,Opera */}
横屏观看效果更佳
<！——视频- ->
<视频id="视频"风格=" object-fit:填写;“playsinline=" true " webkit-playsinline=" true " x-webkit-airplay=霸市怼?
airplay="允许" x5-video-player-type="代替" x5-video-player-fullscreen=" true " x5-video-orientation=靶は瘛焙１?薄?图片/video1。png“src="/视频/1. mp4。">
下面是视频里面属性的注释:
JS
/*,获取屏幕高度,*/var phone_height =, document.documentElement.clientHeight;
如果(phone_height<1496) {//,console.log(& # 39;屏幕高度& lt; 1496 & # 39;);
var back_up =, (1496 - phone_height)/2;
$ (“.page_video") . css (“backgroundPosition"“0,产生绯闻;+ back_up +“px");
如果,phone_height 祝辞=,1360,){//华为手机,和苹果x
}
其他}{
,//console.log(& # 39;屏幕高度在1496 & # 39;);
$ (“.page_video") . css (“backgroundSize",“100%, 100%“);
}//视频横屏
var width =, document.documentElement.clientWidth;
var height =, document.documentElement.clientHeight;
$ (“.page_video") .height(身高+“px");
var video_width;
var video_height;
var video_top =, 0;
var video_left =, 0;//,设置视频倒过来
如果,width & lt;, height ) {//一个1920 * 1080的视频,到手机上高750时,宽度是1333.333
如果,height & lt;, 1334,) {
console.log(“手机分辨率高度,& lt;, 1333.33,视频横过来后宽度铺满,高度自适应后铺不满屏幕,所以向左平移一些居中“);
$ (“# video") .width(高度);
时间=video_width $ (“# video") .width ();//,等比例自适应数值不是正好的,那就手动定高度
时间=video_height video_width/1920 * 1080;
$ (“# video") .height (video_height);//设置视频水平居中
video_left =, - (width 作用;video_height)/2;
其他}{
console.log(“手机分辨率高度,祝辞,1333.33,视频横过来后高度铺满,宽度自适应后铺不满屏幕,所以向下平移一些居中“);
$ (“# video") .height(宽度);
时间=video_height $ (“# video") .height ();//,等比例自适应数值不是正好的,那就手动定宽度
video_width =, (1920/1080) * $ (“# video") .height ();
$ (“# video") .width (video_width);//设置视频垂直居中
video_top =, (height 作用;video_width)/2;
}//把调整好的数值赋给视频
$ (“# video") . css({& # 39;左# 39;:,“100%”,“top": video_top +“px",“marginLeft": video_left +“px", & # 39;变换# 39;:& # 39;旋转(90度)& # 39;,& # 39;transformOrigin& # 39;: & # 39; 0, 0 & # 39;},),,
}//视频页
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
nullhtml5如何实现视频自动横过来自适应页面且点击播放功能
