用HTML5 video标签的一系列问题

  • 时间:2018-07-01 23:36 作者:咔拉传媒 来源:咔拉传媒 阅读:584
  • 扫一扫,手机访问
摘要: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)
最新发布的资讯信息
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
【系统环境|windows】初识webRTC(2021-03-20 21:23)
血鸟云
手机二维码手机访问领取大礼包
返回顶部