HTML5 Audio/Video 标签,属性,方法,事件

本文转自：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

<audio> 标签属性：

• src：音乐的URL
• preload：预加载
• autoplay：自动播放
• loop：循环播放
• controls：浏览器自带的控制条

1 <audio id="media" src="http://www.abc.com/test.mp3" controls></audio>

<video> 标签属性：

• src：视频的URL
• poster：视频封面，没有播放时显示的图片
• preload：预加载
• autoplay：自动播放
• loop：循环播放
• controls：浏览器自带的控制条
• width：视频宽度
• height：视频高度

1 <video id="media" src="http://www.abc.com/test.mp4" controls width="400px"heigt="400px"></video>

获取HTMLVideoElement和HTMLAudioElement对象

1 //audio可以直接通过new创建对象
2 Media = new Audio("http://www.abc.com/test.mp3");
3 //audio和video都可以通过标签获取对象
4 Media = document.getElementById("media");

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

01 //错误状态
分享到： HTML5资源 | EasyJspRun!一键搭建安装图文教程 2011-05-09 11:53 浏览 581 评论(0) 分类:Web前端 相关推荐 评论 发表评论 您还没有登录,请您登录后再发表评论 wjlgryx 浏览: 140771 次 性别: 来自: 北京 最近访客 更多访客>> uugvtl zw0283 ahbbzh dylinshi126 文章分类 全部博客 (214) Android 文章 (19) 3D 文章 (45) ophone 文章 (0) Java EE 文章 (1) 面试问题文章 (0) 闲杂类文章 (22) Html5 文章 (81) Ext JS (1) JavaScript (30) webGL全集 (8) JIL Mobile Widget (1) 我的小作坊 (2) 我崇拜的IT风云人物 (1) 社区版块 我的资讯 (0) 我的论坛 (1) 我的问答 (2) 存档分类 2011-11 (1) 2011-07 (12) 2011-06 (12) 更多存档... 最新评论 开发小菜： 支持IE9以下的吗？ HTML5+CSS3+JQuery打造自定义视频播放器 攻城使： 开发Html5必须得下载么，我用dw编写，把文件复制到myec ... html5开发 myeclipse安装aptana插件 疾风鹰狼： ... 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 sardodo： 你好，我想问下，导入例子中的.dae格式模型是可以看到旋转的小 ... c3dl 初步认识 BIOHAZARDX： 下载学习，初学者膜拜一下。 html5 实现动画（三） 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。若作者同意转载，必须以超链接形式标明文章原始出处和作者。 © 2003-2015 ITeye.com. All rights reserved. [ 京ICP证110151号 京公网安备110105010620 ] , Courier, monospace !important; font-weight: normal !important; font-style: normal !important; dp.SyntaxHighlighter.HighlightAll('code', true, true); $$('#main .blog_content pre[name=code]').each(function(pre, index){ // blog content var post_id = 1037331; var location = window.location; source_url = location.protocol + "//" + location.host + location.pathname + location.search; pre.writeAttribute('codeable_id', post_id); pre.writeAttribute('codeable_type', "Blog"); pre.writeAttribute('source_url', source_url); pre.writeAttribute('pre_index', index); pre.writeAttribute('title', 'HTML5 Audio/Video 标签,属性,方法,事件'); }); fix_image_size($$('div.blog_content img'), 700); function processComment() { $$('#main .blog_comment > div').each(function(comment){// comment var post_id = comment.id.substr(2); $$("#"+comment.id+" pre[name=code]").each(function(pre, index){ var location = window.location; source_url = location.protocol + "//" + location.host + location.pathname + location.search; source_url += "#" + comment.id; pre.writeAttribute('codeable_id', post_id); pre.writeAttribute('codeable_type', "BlogComment"); pre.writeAttribute('source_url', source_url); pre.writeAttribute('pre_index', index); pre.writeAttribute('title', 'HTML5 Audio/Video 标签,属性,方法,事件'); }); }); } function quote_comment(id) { new Ajax.Request('/editor/quote', { parameters: {'id':id, 'type':'BlogComment'}, onSuccess:function(response){editor.bbcode_editor.textarea.insertAfterSelection(response.responseText); Element.scrollTo(editor.bbcode_editor.textarea.element);} }); } code_favorites_init(); processComment(); new WeiboShare({share_buttons: $('share_weibo'), img_scope: $('blog_content')}); document.write("<img src='http://stat.iteye.com/?url="+ encodeURIComponent(document.location.href) + "&referrer=" + encodeURIComponent(document.referrer) + "&user_id=' width='0' height='0' />");