HTML 5 视频(video)
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格式的文件
<video src="movie.ogg" controls="controls" height="200px" width="300px">
您的浏览器不支持 video 标签。
</video>
执行如下:
当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”
2、设置多种格式
<video width="320" height="240" poster="Suk.png" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
执行如下:
如上图为视频设置一个默认图片。也可以添加其他属性。
<video> 标签的属性如下:
controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片
3、自定义播放暂停及大小(Video + DOM)
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeNormal()">更改大小</button>
<video id="video1" width="200">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
将javascript写在html的下方
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
i f (myVideo.paused)
myVideo.play(); //播放
else
myVideo.pause(); //暂停
}
function makeNormal()
{
myVideo.width=420; //自定义宽度,高度自适应
}
</script>
执行如下:
大多数浏览器支持的视频方法、属性和事件(日后在做理解)
方法 | 属性 | 事件 |
---|---|---|
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锚点定位
- svg格式嵌入html中方法之一
- 如何选中html中下拉列表中的选项的文字
- HTML DOM status 属性
- HTML <!DOCTYPE> 标签
- innerHTML在IE与FF、chrome、opera浏览下获取的HTML标称名大小写不一样
- html meta 中文乱码
- HTML特效代码总结
- html
- MVC4 Razor @hepler 让cshtml方法变成类 进行多视图调用
- 浏览器加载和渲染HTML的顺序
- HTML input标签的checked属性与Razor解析
- Web在线文件管理KodExplorer
- html frame标签(点击左边框架内容而在右边框架做出反应)
- 【html】通配符选择器
- HTML框架
- 如何用TextView显示Html格式的数据
- 在html <table> 标签的中background和bgcolor两个属性有什么关系?
- HTML单选、多选、按钮、下拉框、文本输入框
- HTML初识1