• 在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身)。

    虽然不能直接使用,但是可以通过计算宽高比得到 video 占用的宽度和高度。

    比如让 video 占满宽度为480px的容器,可以根据宽高比得到此时video占用的高度。

重要:

  • h5的video标签,修改source的src地址,必须采用动态插入source元素的形式,否则浏览器不会重新请求播放资源。

一般做法:

  • 不要自己加暂停时视频中间的继续播放按钮,要使用浏览器默认的。
  • 暂停时,页面显示浮层,使用pause事件添加。

介绍链接:http://zhaoda.net/2014/10/30/html5-video-optimization/

播放控制按钮的显示和隐藏:

css:controls="controls"

js: document.getElementById('video1').controls = true 或 false

问题:在iframe中不能全屏播放视频

解决:将iframe修改成

<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

播放视频时相关控制按钮的css类(支持基于webkit内核的Chrome浏览器):

video::-webkit-media-controls-panel

video::-webkit-media-controls-play-button

video::-webkit-media-controls-volume-slider-container

video::-webkit-media-controls-volume-slider

video::-webkit-media-controls-mute-button

video::-webkit-media-controls-timeline

video::-webkit-media-controls-current-time-display

video::-webkit-full-page-media::-webkit-media-controls-panel

video::-webkit-media-controls-timeline-container

video::-webkit-media-controls-time-remaining-display

video::-webkit-media-controls-seek-back-button

video::-webkit-media-controls-seek-forward-button

video::-webkit-media-controls-fullscreen-button

video::-webkit-media-controls-rewind-button

video::-webkit-media-controls-return-to-realtime-button

video::-webkit-media-controls-toggle-closed-captions-button

video标签在各手机浏览器的兼容性:

浏览器 暂停时视频中间是否有继续播放图标 是否能在页面加浮层
chrome
firefox 没有
qq浏览器 不能
360浏览器
UC浏览器 不能
safari 没有

h5的video标签的更多相关文章

  1. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  2. 解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

    在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...

  3. 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

    kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...

  4. h5的video标签支持的视频格式

    关于<video>标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vo ...

  5. 浏览器支持播放的视频播放格式要求(H5的video标签)

    今天给一个客户上传视频后发现,即使是MP4格式的视频浏览器也打不开,找了好久的问题,最红发现客户视频的编码方式不是h5支持的,折腾了好久,最终确认了浏览器对于MP4编码方式的如下: 浏览器对mp4的编 ...

  6. 微信H5的video标签解决方案

    https://github.com/cczw2010/weixin-video 偶尔发现了可以h5化的一种更适合的方式,一个有趣的属性 h5-page 已经更新

  7. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  8. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  9. H5 video标签视频加载存在的问题

    客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...

随机推荐

  1. html超级简单实现点赞(收藏)和取消赞效果

    1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...

  2. ECMAscript6新特性之解构赋值

    在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...

  3. 异常解决:Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    异常描述 这个异常通常有如下信息: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failu ...

  4. Linux(6)文件和磁盘管理

    文件和磁盘管理 1. 文件管理ls ls : 查看文件信息. 列出目录的内容 -a :显示指定目录下的所有文件, 包括以.开头的隐藏文件 -l :以列表方式显示文件的详细信息 -h :配合-l显示文件 ...

  5. [POI2008]枪战Maf

    [POI2008]枪战Maf 题目 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的 ...

  6. 15. leetcode 349. Intersection of Two Arrays

    Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...

  7. 贡献你的代码,将jar包发布到Maven中央仓库以及常见错误的解决办法

    前几天将自己的日志工具发布到了Maven中央仓库中.这个工具本省没有多少技术含量,因为是修改别人的源代码实现的,但是将jar发布到Maven仓库却收获颇丰,因为网上有些教程过时了,在此分享下自己发布j ...

  8. 吃奶酪 洛谷 p1433

    题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...

  9. 前端布局之Flex语法

    前端布局一直是CSS的一个重点应用,然而基于盒子模型的传统布局方案,依赖display + position + float 属性,对于某些特殊的布局非常不方便,比如:垂直居中就不容易实现.针对这一情 ...

  10. 第10天:CSS初始化操作

    在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式.这样我们在写样式时,就不会有误差.常用的CSS标签初始化如下: @charset & ...