RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:9:30-18:00
扫码咨询
关闭右侧工具栏
html5视频全屏播放自动播放实现示例
  • 作者:admin
  • 发表时间:2021-02-26 07:51
  • 来源:未知

本文主要介绍html5视频全屏播放/自动播放的实现实例。通过示例代码详细介绍,对大家的学习或工作有一定的参考学习价值。需要它的朋友将和边肖一起学习。

最近开始开发公司新版官网。主页顶部有一个全屏播放的小视频,简要总结如下:

页面代码

header class=' header ' style=' width :100%;相对位置:'

?php if(!help : is mobile()){?

视频id='homeVideo' class='ho唐山企业官网me-video '自动播放循环静音海报=' res/video/cover.jpg '

source src=' RES/video/home _ video . MP4 ' type=' video/MP4 '

/视频

?php }?

/header

其中php简单判断是否是移动设备,移动设备不显示视频(如果是移动终端显示,需要解决iOS上无法自动播放的问题):

Ps:如果H5页面主要在微信浏览器访问,可以解决iOS上视频自动播放的问题:解决iOS h5音频自动播放的问题(pro-test有效)

助手类{

公共静态函数isMobile() {

if(preg _ match('/(iPhone | IPoD | Android | IOs | IpaD)/I ',$ _ SERVER[' HTTP _ USER _ AGENT ']){

返回true

} else {

返回false

}

}

}

video标签样式

为了让视频占据整个屏幕,关键在于视频标签样式:的设置。家庭视频{

z-index : 100;

绝对位置:

top : 50%;

左侧:50%;

最小宽度:100%;

最小高度:100%;

object-fit : fill;/*这是关键*/

width: auto

height: auto

-ms-transform : translateX(-50%)translateY(-50%);

-web kit-transform : translateX(-50%)translateY(-50%);

transform : translateX(-50%)translateY(-50%);

背景: url(./video/cover.jpg)不重复;

背景尺寸:封面;

}

视频跟随浏览器窗口大小:的变化

$('.家庭视频')。高度(window . InnerHeight);

$('.标题')。高度(window . InnerHeight);

$(窗口)。resize(function() {

$('.家庭视频')。attr('height ',window . InnerHeight);

$('.家庭视频')。attr('width ',window . innerwidth);

$('.标题')。高度(window . InnerHeight);

});

页面加载后,回放会再次触发,以防止自动播放生效

document . getelementbyid(' Homevideo ')。play();

关于html5视频全屏播放/自动播放的实现例子,就说到这里。更多html5视频全屏播放/自动播放相关内容,请搜索Script House之前的文章或继续浏览以下相关文章。希望大家以后多多支持脚本屋!