H5 video 标签 详解
2024-09-06 15:03:52
昨天使用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';
简单的整理一下 有机会再回来完善
最新文章
- ansible-安装与使用
- 第一章 Android系统移植与驱动开发概述
- Java基础之扩展GUI——使用字体对话框（Sketcher 5 displaying a font dialog）
- 10 Common Problems Causing Group Policy To Not Apply
- PyPI镜像网站
- Rac & DG
- 【暴力模拟】UVA 1594 - Ducci Sequence
- C#实现登录窗口(不用隐藏)
- MVC控制器方法返回类型
- KO.js学习笔记(一)
- 编程习题——Maximum Subarray
- Java数据库连接泄漏应对办法-基于Weblogic服务器
- Error Code: 1175. You are using safe update mode and you tried to update a table
- php的运行机制
- jquery刷新页面代码
- cs架构与bs架构的对比
- EntityFramework 动态构造排序 Func<IQueryable<T>, IOrderedQueryable<T>> Dynamic
- 使用CSS3改变文本选中的默认颜色
- while 语句
- linux rpm之已安装包校验、rpm包中文件提取