分类

商品

商品

店铺

资讯

热门搜索 : WordPress 织梦企业官网小说源码 Discuz

服务器低至9.9￥/月

当前位置：首页 > 资讯 > 网页前端 > HTML

用HTML5 video标签的一系列问题

时间：2018-07-01 23:36 作者：咔拉传媒来源：咔拉传媒阅读：1350
扫一扫，手机访问

摘要：H5标签的video，我想写过前台代码的人，都不会陌生吧。但video标签还是有少量问题。一、PC端的兼容问题；H5的标签不兼容ie8包括ie8以下的浏览器；处理办法：用js的库video.js，Video.js 自动检测浏览器对HTML5 的支持情况，假如不支持HTML5则自动用Flash 播放器

用HTML5 video标签的一系列问题

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

一、PC端的兼容问题；

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

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

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

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

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

用HTML5 video标签的一系列问题

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

用HTML5 video标签的一系列问题

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

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

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

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

全部评论(0)

上一篇：如何向小白解释 jQuery、CSS3 和 HTML5 的关系？（文末有福利）
下一篇：怎样了解Html5?Html5和html4相比有哪些优势？怎样学好html5?

最新发布的资讯信息
【系统环境|】2FA验证器验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站？(2023-12-20 10:05)
【系统环境|数据库】潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先！青否数字人直播系统5.0发布，支持真人接管实时驱动！(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步？(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜，竟然是因为“断崖式”的降价(2022-04-12 19:47)

源码超市

店铺

血鸟云

推荐商品

手机访问领取大礼包