html5学习(一) video字段
2013-11-18 12:46
162 查看
html5对视频的支持:
html5通过<video></video>字段实现web页面上视频的播放功能。
目前各大浏览器对<video>字段的支持:
当前,video 元素支持三种视频格式:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
简单的html显示视频的例子
src:指定视频资源的位置(包括相对地址以及绝对地址)。
control 属性供添加播放、暂停和音量控件。
此处注意视频格式
通过mvideo的play或者pause判断视频是否在播放或者暂停。
html5通过<video></video>字段实现web页面上视频的播放功能。
目前各大浏览器对<video>字段的支持:
当前,video 元素支持三种视频格式:
格式 | IE | Firefox | Opera | Chrome | Safari |
---|---|---|---|---|---|
Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |
WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
简单的html显示视频的例子
<!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> </body> </html>
src:指定视频资源的位置(包括相对地址以及绝对地址)。
control 属性供添加播放、暂停和音量控件。
此处注意视频格式
<video> 标签的属性
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暂停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { myVideo.width=560; } function makeSmall() { myVideo.width=420; } function makeNormal() { myVideo.width=520; } </script> </body> </html>
方法 | 属性 | 事件 |
---|---|---|
play() | currentSrc | play |
pause() | currentTime | pause |
相关文章推荐
- HTML5学习之一:HTML5的结构
- html5和css3学习历程
- Html5学习笔记
- HTML5学习笔记简明版(4):新元素之video,audio,meter,datalist,keygen,output
- 感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例详解》连载已经结束了!
- HTML5的学习--performance
- HTML5表单学习笔记
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
- html5 canvas学习--绘制线性渐变
- HTML5制作坦克大战游戏+Canvas绘制基础图形——学习笔记一
- 学习HTML5开发RPG游戏第二步>资源预加载
- 7个很有用的HTML5学习资源
- HTML5学习之WebSocket通讯(六)
- HTML5学习之拖放(十)
- 蓝鸥零基础学习HTML5第五讲 CSS的基础样式
- Windows8的到来,让所有程序员必须彻底的刷新自己,否则将被淘汰!学习HTML5
- HTML5的学习(二)HTML5标签
- 【整理】HTML5游戏开发学习笔记(5)- 猜谜游戏
- Html5学习之旅(3) 文本元素
- 【web前端】HTML5抽奖转盘demo学习笔记