HTML5之Video视频简单用法

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 314 次

HTML5之Video视频简单用法当前，video元素支持三种视频格式：Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4=带有H.264视频编码和AAC音频编码的MPEG

HTML5之Video视频简单用法

当前，video 元素支持三种视频格式：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

video 标签属性：
autoplay:如果出现该属性，则视频在就绪后马上播放。
controls:如果出现该属性，则向用户显示控件，比如播放按钮。
height:设置视频播放器的高度。
width:设置视频播放器的宽度。
loop:如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload:如果出现改属性，则视频在页面加载时加载，并预备播放。如果使用autoplay属性，则该属性忽略
src:要播放的视频的 URL。
HTML实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Video标签用法详细</title> <style type="text/css"> #source{ width:100%; height:20px; line-height:20px; border-width:0px} #start{ width:100px; height:30px} #pause{ width:100px; height:30px} #goon{ width:100px; height:30px} </style> <script type="text/javascript"> function start() { /* *视频开始事件 */ var source = document.getElementById("source"); var video = document.createElement("video"); video.width = 400; video.height = 250; video.src = source.value; //数据源 video.controls = true; //如果是 true，则向用户显示控件，比如播放按钮。 video.autoplay = true; //如果是 true，则音频在就绪后马上播放。 document.body.appendChild(video); }; /* *视频暂停事件 */ function pause() { var video = document.getElementsByTagName("video"); video[0].pause(); }; /* *视频继续事件 */ function goon() { var video = document.getElementsByTagName("video"); video[0].play(); }; </script> </head> <body> <div> <input id="source" value="http://demoplayer.inrete.eu/video/samplevideo_hq.old.mp4" type="text" /> <p><input id="start" type="button" value="加载视频文件" onclick="start();" /></p> <p><input id="pause" type="button" value="暂停视频文件" onclick="pause();" /></p> <p><input id="goon" type="button" value="继续视频文件" onclick="goon();" /></p> </div> </body> </html>

效果图：

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。