`
wjlgryx
  • 浏览: 297676 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

HTML5音乐浏览器PHPBlog 
阅读更多

本文转自：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 //错误状态
, Courier, monospace !important; font-weight: normal !important; font-style: normal !important;
分享到：
| EasyJspRun!一键搭建安装图文教程
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML5 AudioVideo 标签,属性,方法,事件

    HTML5 AudioVideo 标签,属性,方法,事件

    解决video标签在安卓webview下无法自动播放问题

    在安卓webview下 html5 的 video 设置autoplay 属性 或在document ready中使用play方法 都不能使它自动播放 只能用webview的onPageFinished方法来解决此问题，代码如下： 代码如下: mPlayer.setWebViewClient(new ...

    HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签，但有一定含义，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如<audio>和<video>标记。[3]

    HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似和标签，但有一定含义，例如（网站导航块）和。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素...

    html5 音乐播放器 audio 标签使用概述

    标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 &lt;videoid=”media”src=”...

    HTML5新语义

    HTML5新语义及基本布局: HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 &lt;div&gt; 和 &lt;span&gt; ...同时为其他浏览要素提供了新的功能，通过一个标准接口，如 &lt;audio&gt; 和 &lt;video&gt; 标记。

    《HTML5从入门到精通》中文PDF文字版.doc

    HTML5 提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引 擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的 功能，如&lt;audio&gt;和&lt;...

    HTML5 source标签：媒介元素定义媒介资源

    标签属性: 属性 值 描述 media media query 规定媒体资源的类型。 src url 规定媒体文件的 URL。 type numeric value 规定媒体资源的 MIME 类型。  &lt;source&gt; 标签支持HTML中的全局属性和事件属性。 ...

    HTML5从入门到精通教程

    HTML+5+从入门到精通教程.HTML5 提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引 擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如&...

    使用HTML开发商业网站-嵌入视频和音频课件.pptx

    在HTML5中，video标签用于定义播放视频文件的标准。 属性 值 描述 autoplay autoplay 当页面载入完成后自动播放视频。 loop loop 视频结束时重新开始播放。 preload preload 如果出现该属性，则视频在页面加载时进行...

    html5手册w3c标准

    这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如&lt;audio&gt;和&lt;video&gt;标记。 　一些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记...

    使用HTML5在网页中嵌入音频和视频播放的基本方法

    我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。 嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式： XML/HTML Code复制内容到剪贴板 &lt;video src="foo.mp4" width...

    Html5中文手册(程序员必备手册)

    Html 5 标签（按照英文字母a～z顺序排列）： 1、&lt;!--...--&gt; 定义注释。 2、&lt;!DOCTYPE&gt; 定义文档类型。 3、&lt;a&gt; 定义超链接。 4、&lt;abbr&gt; 定义缩写。 5、&lt;address&gt; 定义地址元素。 6、&lt;area&gt; 定义图像映射中的区域。 7...

    HTML5中文手册 + CSS3中文手册

    这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如&lt;audio&gt;和&lt;video&gt;标记。 　CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展...

    HTML5到底会有什么发展?HTML5的前景展望

    HTML 5提供了一些新的元素和属性，其中有些是技术上类似和标签，但有一定含义，例如和。这种标签将有利于搜索引擎的索引整理、小屏幕设备和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如&...

    Html5新标签解释及用法

    HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 &lt;div&gt; 和 &lt;span&gt; 标签，但有一定含义，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。...

    html5 从入门到精通

    HTML5 提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引 擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的 功能，如&lt;audio&gt;和&lt;video&gt;标记。

Magicbox
Global site tag (gtag.js) - Google Analytics