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

一、PC端的兼容问题;

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

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

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

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

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

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

三、手机端不能自动播放的问题;

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

四、手机端播放后层级达到最高;

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

html自动播放avi视频,使用HTML5 video标签的一系列问题相关推荐

  1. html标签video资源占用,使用HTML5 video标签的一系列问题

    原标题:使用HTML5 video标签的一系列问题 H5标签的video,我想写过前端代码的人,都不会陌生吧.但video标签还是有一些问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8 ...

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

    H5标签的video,我想写过前台代码的人,都不会陌生吧.但video标签还是有少量问题. 一.PC端的兼容问题: H5的标签不兼容ie8包括ie8以下的浏览器:处理办法:用js的库video.js, ...

  3. html自动播放avi视频,kanavi根本没法跟小天比,doinb的夸奖引质疑,私下这么看不上jdg...

    kanavi和小天 fpx的纪录片公布之后,doinb的一番话引起了粉丝的关注.季后赛中,小天上场打比赛,当时他们的对手是jdg战队,作为春季赛成绩不错的队伍,jdg还是很值得认真对待的.所以,fpx ...

  4. 在Chrome78浏览器上如何实现自动播放音视频

    在Chrome78浏览器上如何实现自动播放音视频 问题:video与audio标签里设置了autoplay="autoplay",在Chrome78浏览器上无法实现自动播放. 1. ...

  5. 使用html5 video标签不自动播放视频问题(静音播放)

    谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...

  6. OpenCV学习:播放avi视频文件

    #if 0 //播放avi视频文件(IplImage) #include <opencv2/opencv.hpp> using namespace std; #pragma comment ...

  7. LVGL笔记(1)-使用《avilib》库播放avi视频(lvgl在windows模拟运行)

    文章目录 1.函数简介 1.1 avi_t *AVI_open_input_file(const char *filename, int getIndex) 1.2 long AVI_video_fr ...

  8. html5 video 定位播放,HTML5 video标签的播放控制

    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下 上一篇介绍了html5标签v ...

  9. HTML5 video标签的播放控制

    转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...

最新文章

  1. Windows Phone Dev Notes-如何使用ConnectionSettingsTask 来启动连接设置页面
  2. 国内外优秀的计算机视觉团队汇总|持续更新
  3. 五分钟写出一个可以滑动条拖动的矩形脉冲合成的MatlabGUI程序
  4. hive 修改cluster by算法_Spark SQL连接 Hive源码深度剖析
  5. 微信开发源代码详细分析-微信开发教程6
  6. 抓取systrace
  7. 【易语言】微信跳一跳教程详细版,分分钟让新手学会的教程(附源码)
  8. base64解密方法
  9. 灰色预测(MATLAB)
  10. Service的绑定过程
  11. # 技术栈知识点巩固——Js
  12. 计算机培训word,计算机培训word2010.pptx
  13. express 框架之session
  14. 鸿蒙系统碰一碰,华为正式发布鸿蒙手机操作系统 “碰一碰”就可实现设备互联...
  15. Linux入门,RTFM阅读那该死的手册
  16. 【PostgreSQL】PostgreSQL的upsert功能(insert on conflict do)的用法
  17. PLSQL 常用语句
  18. 为什么我不建议你去外包公司?
  19. 用最生动的语言重现经典!听我细细道来冯·诺依曼体系结构
  20. 【人生参悟】纸上得来终觉浅,绝知此事要躬行

热门文章

  1. 在WSL上编译并运行全志XR806的完全体demo
  2. Faster RCNN layer.py
  3. Ps使用旋转扭曲制作图片
  4. <stm32学习笔记>--基本定时器TIM6TIM7
  5. 音符起始点检测(音频节奏检测)(4.5)
  6. 深度探索C++对象模型笔记
  7. 笔记本电脑安装CentOS7
  8. spark 无法读取hive 3.x的表数据
  9. (牛客每日一题)[SHOI2008]小约翰的游戏JOHN(Anti-Nim)
  10. Google谷歌未来如何占领“Web3高地”?