求大神，html中视频在移动端 html home键为什么不显示poster图片

来源：蜘蛛抓取(WebSpider) 时间：2017-11-13 00:55 标签： 移动端html
html5手机端视频播放，在PC端测试代码可用，放到手机端就播放不了，也没有显示出来！ 求大神解答~~_百度知道
html5手机端视频播放，在PC端测试代码可用，放到手机端就播放不了，也没有显示出来！ 求大神解答~~
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
这个比较麻烦。手机端没有支持播放的插件或功能，与PC是完全不同的环境。
采纳率：52%
这个要看手机的浏览器内核是否支持H5，实在不行就下载一个支持H5的浏览器
UC支持呀，换了用UC浏览器还是不可以哦
为您推荐：
其他类似问题
html5的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
html5video背景图片poster铺满全屏大小方法.doc 6页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
html5video背景图片poster铺满全屏大小方法
你可能关注的文档：
··········
··········
HYPERLINK "http://www.bcoder.cn/13838.html" html5的video的背景图片poster铺满全屏大小方法html5支持视频播放，而且趋势，facebook也全面切换到html5了，最近做一个简单的视频播放器，测试了好多jplayer，video.js之类的都觉得不太好，所以自己写一个最简单的，不过发现了一个问题，视频播放之前的封面不太好……封面的尺寸被强制缩小了，我需要填充整个播放器的。
所以查了一下资料，并没有发现html5的video属性支持处理poster的尺寸问题，然后发现了一个hacker的方法： The answer is actually quite simple. Instead of providing our poster image as a value to the poster attribute, we define it as a background image for our video element, and use the background-size property to tell the browser that the image is to cover the element in question:将poster页面设置为一个透明的图片或者不存在的值，这样浏览器就会无法显示poster，然后通过设置播放器的css背景background，将我们需要的背景图放进去，并且填充背景，并且我们用background-size属性去告诉浏览器，这个播放器或者这个元素被这个图片覆盖。video{
width: 100%;
height: 100%;
background:transparent url('img/1.jpg') 50% 50% no-
//下面就是background-size，每种浏览器都写一个配置
-webkit-background-size:
-moz-background-size:
-o-background-size:
background-size:}详细代码在这里：
.video-container1{
width: 400
height: 400
width: 100%;
height: 100%;
.video-container2{
width: 400
height: 400
width: 100%;
height: 100%;
background:transparent url('1.jpg') 50% 50% no-
正在加载中，请稍后...【前端开发】用纯HTML 5+CSS3的方法，如何控制Video的视频与Poster的海报图片_互联网_易房网
用纯HTML 5+CSS3的方法，如何控制Video的视频与Poster的海报图片
作者：admin
尝试用Video套mp4视频，做到各种页面能自适应尺寸，但是苦于无法用Css控制Poster海报的尺寸，目前的状况是Poster继承了视频原尺寸，而视频能自适应拉伸了。 http://www.easyfang.co
尝试用Video套mp4视频，做到各种页面能自适应尺寸，但是苦于无法用Css控制Poster海报的尺寸，目前的状况是Poster继承了视频原尺寸，而视频能自适应拉伸了。http://www.easyfang.com易房网小编为您精选了网友的解决办法，供您参考-----------------------------------------------------网友回答：
http://www.easyfang.com易房网小编为您精选了网友的解决办法，供您参考-----------------------------------------------------网友回答：
如果我没记错的话，video标签的width/height和poster是共用的，说白了poster就属于video标签。但，video自己还有一个videoHeight/videoWidth属性（我这里就不翻草案了，楼主做的时候可以看一下），可以通过js来获取，因此是有办法根据视频属性来调整标签大小以便适应比例的，具体的做法可以结合 @屹峰 的image-wrap外层来做到工整地摆放多个视频。补充一下技术原理：video一般是平台层实现，不同的平台适配的播放器不一样，所以他们遵循的比例也可能不一样（也可能可以给用户选择比例），所以当video标签的宽高不能正好匹配videoWidth/videoHeight的时候，播放器会选择一个默认方式展现，包括：遵循原尺寸补黑边、遵循原尺寸裁剪、匹配外框拉伸等。而poster则是浏览器来实现，类似img标签，你指定了多少就多少，拉伸。因此，为了简单，最好的办法是video标签的width/height和video内容的videoWidth/videoHeight匹配，这样poster的比例就和video一样了（当然，poster图片本身的比例你们制作的时候也要遵循原视频比例，如果刚好不一样的话，为了保证不变形，你们还需要多加一个裁剪-用css也可以做，这里不展开）大致思路这里帮你整理一下吧:&div &
&video id="videoxx" width="默认大小" height="默认大小" poster="默认poster"&&source /&&/video&
&script language="js部分"&
$("videoxx").设置onload = function() {
aspect_ratio = this.videoWidth / this.videoH
// 根据得到的宽高比来算video标签高度
$("videoxx").width=this.videoWidth&img-wrap宽度 ? this.videoWidth : img-wrap宽度;
$("videoxx").height=$("videoxx").height/aspect_
// FIXME: 根据poster的情况可以考虑裁剪或者重新指定另外一张poster
http://www.easyfang.com易房网小编为您精选了网友的解决办法，供您参考-----------------------------------------------------网友回答：
你的表述＝ ＝，我大概只能理解为你需要一个固定比例的自适应图片我有遇到过这个问题，解法如下Live-demo:fluid but keep aspect ratio image&div id="image-wrap"&
&div&&/div&
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将
追究责任；3.作者投稿可能会经我们编辑修改或补充。
/mnt/f/www/easyfangxin/templets/default/tupian.htm Not Found!
/mnt/f/www/easyfangxin/templets/default/hot.htm Not Found!
友情链接、商务合作QQ:HTML &video& poster 属性

我要回帖

更多关于 移动端html 的文章

 

随机推荐