|
video 元素支持三种视频格式 |
IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 | No | 3.5+ | 10.5+ | 5.0+ | No |
| 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 | 9.0+ | No | No | 5.0+ | 3.0+ |
| 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 | No | 4.0+ | 10.6+ | 6.0+ | No |
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
1、设置一个ogg格式的文件
执行如下：
当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”
2、设置多种格式
执行如下：
如上图为视频设置一个默认图片。也可以添加其他属性。
controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片
3、自定义播放暂停及大小(Video + DOM)
将javascript写在html的下方
function playPause()
{
i f (myVideo.paused)
myVideo.play(); //播放
else
myVideo.pause(); //暂停
}
function makeNormal()
{
myVideo.width=420; //自定义宽度，高度自适应
}
执行如下：
大多数浏览器支持的视频方法、属性和事件（日后在做理解）
| 方法 | 属性 | 事件 |
|---|---|---|
| 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 |
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
立即学习“前端免费学习笔记（深入）”；
下方为html5 视频和音频的方法属性和事件参考
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
613
