`
wjlgryx
  • 浏览: 306712 次
  • 性别: 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 Audio/Video 标签、属性、方法、事件 HTML5 中的 Audio/Video 标签是多媒体内容的基础组件，用于在网页中播放音频和视频内容。今天，我们将深入探讨 HTML5 Audio/Video 标签的各种属性、方法和事件。 ...

    基于vue框架，利用html5的audio标签实现音频播放，利用html5的video标签实现视频播放.zip

    这可以通过监听Audio或Video标签的事件，如`play`, `pause`, `ended`等，以及使用Vue的响应式特性来实现。 至于`musicplayer-master`这个文件名，它可能是项目源代码的目录，包含了实现以上功能的所有文件，包括Vue...

    浏览器HTML5标签video和audio支持

    HTML5的`&lt;video&gt;`和`&lt;audio&gt;`标签不仅支持播放，还允许添加控制条（controls属性），设置默认音量，甚至通过JavaScript进行交互操作，如暂停、播放、快进、倒退等，这使得在网页上构建复杂的多媒体应用成为可能。...

    Web-前端html+css从入门到精通 119. video标签与audio标签.zip

    `&lt;video&gt;`和`&lt;audio&gt;`标签都有一些共同的属性和方法，如： - `src`：设置或返回媒体文件的URL。 - `autoplay`：视频或音频自动开始播放。 - `loop`：视频或音频循环播放。 - `muted`：默认静音。 - `currentTime`：...

    H5 Video标签调用摄像头进行录像，兼容苹果、安卓系统、可在微信浏览器正常使用

    总结，实现H5 Video标签调用摄像头录像并兼容苹果、安卓系统以及微信浏览器，主要涉及HTML5 `&lt;video&gt;`标签、MediaStream Recording API、JavaScript编程以及微信JS-SDK的使用。通过这些技术，我们可以创建出一个跨...

    第32章 video元素与audio元素的常用属性

    在Web开发中，video和audio元素是HTML5引入的关键特性，极大地丰富了网页的多媒体体验。本章将详细探讨这两个元素的常用属性，以便开发者更好地掌握它们的使用方法。 首先，`&lt;video&gt;`元素用于在网页中嵌入视频内容...

    html5标签属性及使用方法教程

    接下来，我们将深入探讨HTML5标签及属性的使用方法。 首先，了解&lt;!doctype&gt;元素的重要性。它用于声明文档类型，确保浏览器能够以标准模式渲染页面，而不是兼容模式，这对于新功能的正常工作是必需的。在HTML5中，&lt;!...

    HTML5属性，事件，标签

    本文将详细介绍HTML5中的属性、事件和标签，并探讨它们在实际开发中的应用。 首先，HTML5引入了许多新的属性，这些属性使得元素功能更加强大和灵活。例如，`autofocus`属性可以自动将焦点设置在特定输入元素上，`...

    第31章 video元素与audio元素的基础知识

    在HTML5中，`&lt;video&gt;`和`&lt;audio&gt;`元素是两种非常重要的多媒体标签，它们为网页添加视频和音频内容提供了原生支持，无需依赖Flash等外部插件。本章将深入探讨这两个元素的基础知识，以及如何在实际开发中有效地使用...

    JS正则表达式的使用以video标签为例

    使用JS正则表达式，选取video元素的src属性的值，利用jQuery选取元素

    video.js 在ie8 上的兼容demo（附 html5media）

    然而，`video.js` 对于某些浏览器的原始HTML5视频属性和事件的兼容性仍然有限，特别是像IE8这样的老版本浏览器。这时，`html5media` 插件就起到了关键作用。`html5media` 是一个轻量级的JavaScript库，它的主要目标...

    html5 audio demo【修复拖动进度条bug】

    HTML5引入了`&lt;audio&gt;`标签，使得在网页上嵌入音频变得简单。通过`&lt;audio&gt;`标签，我们可以指定音频源（src属性），设置预加载和自动播放等属性，并添加播放、暂停和音量控制等交互。 2. **自定义样式**： 默认的`...

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

    HTML5的&lt;audio&gt;和&lt;video&gt;标签还支持一些其他属性，如： - `autoplay`：自动播放。 - `autobuffer`：自动缓冲，即使不自动播放也会开始加载。 - `controls`：显示播放控制。 - `loop`：循环播放。 - `preload`：预...

    2010.08.10——— html5之video和audio

    本主题主要关注HTML5中的`&lt;video&gt;`和`&lt;audio&gt;`标签，它们使得在网页中嵌入音频和视频变得简单直接。 一、HTML5 `&lt;video&gt;` 标签 1. `&lt;video&gt;` 标签的基本结构： `&lt;video src="movie.mp4" width="320" height="240" ...

    HTML5 Video/Audio播放本地文件示例介绍

    接着，我们可以利用`URL.createObjectURL(file)`方法创建一个Blob URL，这个URL代表了选定的文件，可以安全地用于`&lt;audio&gt;`或`&lt;video&gt;`标签的`src`属性。 以下是一个简单的示例代码，展示了如何实现这一功能： ```...

    html5新增标签和属性

    HTML5 新增标签和属性 HTML5 中新增了许多标签和属性，使得开发者可以更快速地了解和掌握 HTML5 技术，并实现快速上手。这些新增的标签和属性可以帮助开发者快速实现页面布局，提高浏览器的解析速度，并且提供了更...

    VideoJS —— HTML5 视频播放器

    紧接着，在HTML的部分，需要加入标准的HTML5的&lt;video&gt;标签，并设置相应的属性，如控制条、预加载策略、视频尺寸等。同时，需要指定视频文件的源地址以及在视频未加载完成时显示的海报图片： ```html &lt;video id=...

    HTML5视频播放器美化

    首先，我们可以利用HTML5的`&lt;video&gt;`标签来创建基本的视频播放器。这个标签支持多个来源（`src`属性），可以设置视频的宽度和高度，以及预加载和自动播放等特性。例如： ```html &lt;video width="640" height="360" ...

    H5新属性audio音频和video视频的控制详解（推荐）

    本文详细介绍了如何利用H5中的audio和video标签实现对音视频文件的控制，并提供了一些与之相关的JavaScript代码以实现更复杂的控制逻辑。 首先，音频和视频文件可以通过&lt;video&gt;和&lt;audio&gt;标签直接嵌入到网页中。这两...

    HTML中audio相关操作

    在HTML中，`&lt;audio&gt;`元素是用于嵌入音频内容的核心工具，它可以让我们在网页上直接播放音频文件，类似于视频中的`&lt;video&gt;`元素。在"HTML中audio相关操作"这个主题中，我们将深入探讨如何使用`&lt;audio&gt;`元素创建一个...

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