h5的video标签
- 在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标签的更多相关文章
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)
- 解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放
在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...
- 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...
- h5的video标签支持的视频格式
关于<video>标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vo ...
- 浏览器支持播放的视频播放格式要求(H5的video标签)
今天给一个客户上传视频后发现,即使是MP4格式的视频浏览器也打不开,找了好久的问题,最红发现客户视频的编码方式不是h5支持的,折腾了好久,最终确认了浏览器对于MP4编码方式的如下: 浏览器对mp4的编 ...
- 微信H5的video标签解决方案
https://github.com/cczw2010/weixin-video 偶尔发现了可以h5化的一种更适合的方式,一个有趣的属性 h5-page 已经更新
- H5的video标签在网页上播放MP4视频时只有声音没有画面
最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
- H5 video标签视频加载存在的问题
客户发现上传的视频无法播放,然后主管让我解决这个问题,这个页面不是我负责的,我看了代码,发现视频用的h5标签video标签加载视频.我看了没问题,然后 我先用ie浏览器打开,视频加载没问题.然后我给主 ...
随机推荐
- html超级简单实现点赞(收藏)和取消赞效果
1.前言 我们经常会遇到对一些列表呀进行点赞呀收藏数据等效果呀.今天就用html+css实现超级简单易上手的点赞和取消赞的demo展示. 2.详情 1.css样式 .like{ font-size:6 ...
- ECMAscript6新特性之解构赋值
在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...
- 异常解决:Caused by: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
异常描述 这个异常通常有如下信息: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failu ...
- Linux(6)文件和磁盘管理
文件和磁盘管理 1. 文件管理ls ls : 查看文件信息. 列出目录的内容 -a :显示指定目录下的所有文件, 包括以.开头的隐藏文件 -l :以列表方式显示文件的详细信息 -h :配合-l显示文件 ...
- [POI2008]枪战Maf
[POI2008]枪战Maf 题目 有n个人,每个人手里有一把手枪.一开始所有人都选定一个人瞄准(有可能瞄准自己).然后他们按某个顺序开枪,且任意时刻只有一个人开枪.因此,对于不同的开枪顺序,最后死的 ...
- 15. leetcode 349. Intersection of Two Arrays
Given two arrays, write a function to compute their intersection. Example: Given nums1 = [1, 2, 2, 1 ...
- 贡献你的代码,将jar包发布到Maven中央仓库以及常见错误的解决办法
前几天将自己的日志工具发布到了Maven中央仓库中.这个工具本省没有多少技术含量,因为是修改别人的源代码实现的,但是将jar发布到Maven仓库却收获颇丰,因为网上有些教程过时了,在此分享下自己发布j ...
- 吃奶酪 洛谷 p1433
题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...
- 前端布局之Flex语法
前端布局一直是CSS的一个重点应用,然而基于盒子模型的传统布局方案,依赖display + position + float 属性,对于某些特殊的布局非常不方便,比如:垂直居中就不容易实现.针对这一情 ...
- 第10天:CSS初始化操作
在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式.这样我们在写样式时,就不会有误差.常用的CSS标签初始化如下: @charset & ...