H5 video 标签 详解
昨天使用H5 video 标签 写了视频播放 本打算参考爱奇艺的代码进行修改 发现 它是动态数据 静态页面需要拆解代码
我情急之下 使用了 video 整理一下笔记 后面有人用 的话 简单起来
video兼容性
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4(MP4视频格式) | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
video标签属性
src="文件路径地址" width="宽" height="高" controls="控制条" autoplay="自动播放" loop="循环" preload="预加载"
<video width="320" height="240" controls="controls">
<!-- 同一视频的兼容性写法 -->
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<!-- 同一视频的兼容性写法 -->
Your browser does not support the video tag.
</video>
video js API
方法 | 属性 | 事件 |
---|---|---|
play() //播放 | currentSrc | play |
pause() //暂停 | currentTime //当前时间 | pause |
load() //加载 | videoWidth | progress //进度 |
canPlayType | videoHeight | error |
duration //视频长度 | timeupdate | |
ended | ended | |
error | abort | |
paused | empty | |
muted | emptied | |
seeking | waiting | |
volume //声音 | loadedmetadata | |
height | ||
width |
注释:在所有属性中,只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后,其他属性才可用。
视频拉伸效果
video的css样式设置成 object-fit:'fill';
简单的整理一下 有机会再回来完善
H5 video 标签 详解的更多相关文章
- 小强的HTML5移动开发之路(14)——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
- html常用标签详解
html常用标签详解 一.总结 一句话总结: 这些资料没必要自己总结,可以直接网上找,简单方便,再根据需求改一下 二.HTML常用标签详解 转自或参考:HTML常用标签详解https://blog.c ...
- html标签详解
html标签详解 <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...
- Meta标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
- 网页设计:Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- 引用 struts2标签详解 - wo的的日志 - 网易博客
引用 元元 的 struts2标签详解 引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...
- html标签详解(2)
http标签详解 声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品.2:如要要转载本文章,则要说明文字的出处.3:如有哪里不对欢迎指出. 在上一篇文章中主 ...
- html标签详解(1)
http标签详解及讲解 1.基础标签 <!DOCTYPE html> <!--表示文本类型--> <html> <!--<html> ...
随机推荐
- java客房管理小项目,适合java小白练手的项目!
java客房管理小项目 这个客房管理小项目,适合java初学者练手.功能虽然不多,但是内容很齐全! 喜欢这样文章的可以关注我,我会持续更新,你们的关注是我更新的动力!需要更多java学习资料的也可以私 ...
- 笔记本安装SSD固态硬盘详细的优化设置
现在好多笔记本.台式机都加上固态硬盘了,固态硬盘的优势大家应该都有所了解了,在此略写一下固态硬盘优势: 1.启动快,没有电机加速旋转的过程: 2.不用磁头,快速随机读取,读延迟极小: 3.相对固 ...
- HTTP知识整理
HTTP协议 HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式. 2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST.每种方法规定了客 ...
- PTC【Creo OR Proe】添加参数的方法
Dim model As IpfcModel Try model = CoCreoAsyncConnection.Session.CurrentModel If model Is Nothing Th ...
- 前端-HTLM
前端简介: 什么是前端? 任何与用户直接打交道的操作界面都可以被称为前端,如:网页界面,手机界面.... 前端的学习历程和内容: 要学习的内容: 三大重点: 1.Web服务的本质: 浏览器中敲入网址回 ...
- 广义线性模型|logistics|Odds ratio|最大似然函数|LR|AIC|
广义线性模型 y是分类变量 Link function:将分类变量和数值变量放在一起 使用得到结果0 or 1的概率值来评估选0 or1 函数关系: 正比例函数: logistics函数S型曲线: O ...
- 【Mongodb】mongoDB与mongoose---Scheme和Collections对应问题
mongodb是一个基于分布式文件存储的文档型数据库 MongoDB 是一个介于关系数据库和非关系数据库之间的产品 MongoDB 最大的特点是他支持的查询语言非常强大,而且还支持对数据建立索引 官方 ...
- 54)PHP,访问修饰符
类外就是你再实例化成对象的时候 用你类里面的变量 继承的类内, 就是子类里面,但是实例化对象时,不能用 本类内, 只在本类的定义时用,子类不能用.
- JacksonConfig
package org.linlinjava.litemall.core.config; import com.fasterxml.jackson.annotation.JsonInclude; im ...
- linux特殊权限(acl)
建立用户目录 创建目录/oldboy/tech./oldboy/edu,分别用于不同项目组添加组账号 添加组账号tech.edu,GID分别设置为1001.1002 ...