html video标签问题,用HTML5 video标签的一系列问题

abf0129b5859370bd26d860228df53d8.png

H5标签的video,我想写过前台代码的人,都不会陌生吧。但video标签还是有少量问题。

一、PC端的兼容问题;

H5的标签不兼容ie8包括ie8以下的浏览器;处理办法:用js的库video.js,Video.js 自动检测浏览器对HTML5 的支持情况,假如不支持HTML5则自动用Flash 播放器。

二、video标签控件样式问题;

由于video是有默认的样式,在做项目时候,往往设计稿和video默认样式的不同。在HTML5的DOM给video提供了方法、属性和事件。能完成自己想要的页面效果。

比方:暂停/开始,要使用自己写的样式时:

play() 开始播放,pause() 暂停。 即可以使用到这两个方法。还有进度条方式等。

5c3bd5c7c8a4b43d6c1c0fbae47e65d2.png

下面是我在咔拉商城做的样式。

7b56aff1bc8defc7447e49b2e6096799.png

三、移动端不可以自动播放的问题;

手机端的浏览器为了避免使用户用流量的问题,都是默认视频不可以自动播放。只可以引导使用户手动去播放。

四、移动端播放后层级达到最高;

对于播放后的视频,即便我们给父级加了overflow: hidden;也无法改变这一现象。所以,我们可以做的就是将原视频的width和height设置为0来处理播放后层级最高的问题,关于这个问题,没有一个非常好的处理方案,至少目前来看是没有的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值