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> ...
随机推荐
- D - Lis on Circle Gym - 102441D (LIS + 线段树)
There are nn people at the round gaming table. Each of them has a set of cards. Every card contains ...
- PAT Basic 1104 数字⿊洞 (20) [数学问题-简单数学]
题目 给定任⼀个各位数字不完全相同的4位正整数,如果我们先把4个数字按⾮递增排序,再按⾮递减排序,然后⽤第1个数字减第2个数字,将得到⼀个新的数字.⼀直重复这样做,我们很快会停在有"数字⿊洞 ...
- c语言中命令行参数argc,argv[]详解
main(int argc,char *argv[ ]) 1.argc为整数 2.argv为指针的指针(可理解为:char **argv or: char *argv[] or: char argv[ ...
- Python语言学习:字典常用的方法
1. 增加:字典[key]=value(不存在的key和value) info={ 'stu1101':'TengLan', 'stu1102':'LuoZe', 'stu1103':'XiaoZe' ...
- sqlserver修改某列为自增
sqlserver如果建表的时候不设自增,之后是没法直接修改的,需要先删再重设: alter table 表名 drop column ID alter table 表名 add ID int ide ...
- epoll——IO多路复用选择器
上上篇博客讲的套接字,由于其阻塞性而导致一个服务端同一时间只能与一个客户端连接.基于这个缺点,在上篇博客我们将其设置为非阻塞实现了一个服务端同一时间可以与多个客户端相连,即实现了并发,但其同样留下了一 ...
- Linux-proc文件系统介绍
1.操作系统级别的调试 (1).简单程序单步调试 (2).复杂程序printf打印信息调试 (3).框架体系日志记录信息调试 (4).内核调试的困境 2.proc虚拟文件系统的工作原理 (1).Lin ...
- Django学习---多人博客项目(1)
一.创建项目和应用 在Pycharm中用Django模板创建一个工程文件 创建项目 python manage.py startproject 项目名 . 创建应用 python manage.p ...
- 如何动态调用WebService
封装WBS类 using System; using System.Collections.Generic; using System.Linq; using System.Web; using Sy ...
- vue-cli3解决跨域问题
在 vue.config.js里面配置 devServer: { proxy: { '/': { // search为转发路径 target: 'http://www.baidu.com', // 目 ...