h5页面 video poster属性的hacker问题

最近在做h5 video的时候,发现给video的默认图片不会充满整个video窗口,就在网上找了很久,终于解决这个问题:

video{

width: 100%;

height: 100%;

background:transparent url(‘img/1.jpg‘) 50% 50% no-repeat;

/*下面就是background-size,每种浏览器都写一个配置*/

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

}

同时把 video的poster路径也设置为对应的图片就行了

原文地址:https://www.cnblogs.com/yuan-luo/p/8360587.html

时间: 2024-10-29 16:02:34

h5页面 video poster属性的hacker问题的相关文章

ios下app内嵌h5页面是video适配问题

ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视频显示不全(超出手机宽度),原始poster图片大小是750x420尝试诸多方法包括设置object-fit:fill;等,都无效,最后把封面图等比缩小为420x236完美解决: 总结: ios下的webview会将video的poster等比放大适应video:但不会等比缩小适应video: 原文

解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点击播放视频触发的是一个视频url链接,而非video标签. js判断代码如下:此代码引用Github中Stanko/html-canvas-video-player var isIphone = navigator.userAgent.indexOf('iPhone') >= 0; // Other

h5 的video视频控件

h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video基础标签 ` <video id="myVideo" controls poster="video.jpg" width="640" height="320" > <source src="video.

移动端h5页面常见问题总结

从去年开始在公司一直做嵌入式的h5页面,遇见了很多问题,做一个小小的总结~ 1.IOS设备链接.按钮等点击产生灰色背景 在傲娇的iOS中可点击元素被点击时候会出现覆盖显示的高亮颜色,也就是一个灰色的阴影,特别难看,尤其是在元素占地面积还比较大的时候.这个可以通过 -webkit-tab-highlight-color 这个css属性来设置,你可以改成任何你想要的颜色,也可以去掉. -webkit-tab-highlight-color:rgba(0,0,0,0);//去掉背景高亮 -webkit

H5页面背景音乐,C33自转效果(原创)

我们经常在访问H5页面(比如电子贺卡.动态音乐相册等)的时候,会看到右上角有个自转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢?  Demo HTML代码如下: 1 <div id="audio_btn" class="rotate"> 2 <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=&quo

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

pointer-events/H5页面在iphone6 plus的微信上出现闪退

一.pointer-events 1.元素加上pointer-events:none后,在js中加点击事件不好使 原因:pointer-events:none关闭所有点击事件,包括js总的 解决:删掉该属性 2.移动端开发,页末尾的按键点击不好使 原因:为了适配大屏幕,下一页有元素图片切得比较大,当用户滑到上一页时,下一页元素覆盖了该按钮. 解决:在下一页元素上加pointer-events:none 二.H5页面在iphone6 plus的微信上出现闪退 原因:h5页数较多,并且每页中动画和元

【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio> <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放

h5页面在移动端需要注意的一些事情

H5页面在移动端无法满屏自适应窗口,怎么办? <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> H5页面在移动端字体应该怎么设置? 1.iOS 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微