h5 audio 和 video

html5音频和视频的用法

音频标签audio和视频标签video用法和其他html标签一样,如:

<audio controls src="johann_sebastian_bach_air.mp3"></audio>

但是由于各个浏览器支持的编解码器不一样,所以可以配合source来兼容,如:

<video controls>
    <source src="Intermission-Walk-in.ogv"></source>
    <source src="Intermission-Walk-in_512kb.mp4"></source>
</video>

上述代码的意思就是,如果浏览器支持ogv格式就用ogv格式的,不支持就用MP4。

audio和video中的媒体元素:

controls : 显示或隐藏用户控制界面

autoplay : 媒体是否自动播放

loop : 媒体是否循环播放

currentTime : 开始到播放现在所用的时间

duration : 媒体总时间(只读)

volume : 0.0-1.0的音量相对值

muted : 是否静音

autobuffer : 开始的时候是否缓冲加载,

autoplay的时候,忽略此属性

paused : 媒体是否暂停(只读)

ended : 媒体是否播放完毕(只读)

error : 媒体发生错误的时候,返回错误代码 (只读)

currentSrc : 以字符串的形式返回媒体地址(只读)

除了以上属性之外,video还有几个特性:

poster : 视频播放前的预览图片

width、height : 设置视频的尺寸

videoWidth、 videoHeight : 视频的实际尺寸(只读)

还有三个方法:

play() : 媒体播放

pause() : 媒体暂停

load() : 重新加载媒体(当改变了标签的src的时候,需要重新加载才能生效)

相关事件名称:(感觉用的也不多,只能用的时候再去查了)

loadstart  progress  suspend  emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

另外canvas的drawImage方法的第一个参数也可以是视频!

时间: 2024-08-15 23:15:06

h5 audio 和 video的相关文章

Wechat 微信端正确播放audio、video的姿势

在开发微信项目时,有在项目中播放音频(audio)和视频(video)的需求: 在开发中,我们会遇到的问题 audio.video在Android和IOS系统上的兼容性: video播放完成后,跳出浏览器广告(audio不存在): 对应的解决方案 html代码: <audio id="audio" src="http://q.letwx.com/app/touchtotouch-build/resource/happy.mp3" loop="loop

audio和video元素

前面的话 HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容,这两个标签是<audio>和<video>,且不被IE8-浏览器支持  以视频文件举例,它包含了音频轨道.视频轨道和其他一些元数据(封面.标题.子标题.字幕等) HTML元素 使用这两个元素至少要在标签中包含src属性.位于开始和结束标签之间的任何内容都将作为后备内容,在浏览器不支持这两个媒体元素的情况下显示 <audio> autoplay       

html5中的audio和video属性和事件汇总

<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制 <video> 标签属性: src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 width:视频宽度 height:视频高度 获取HTMLVideoElement和HTMLAudioElement对象

代码验证浏览器是否支持html audio 和video

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script type="text/javascript" > function load() { var video =

HTML5 Audio and Video 的新属性简介

前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio and Video的使用方法做了一个简单的总结,算是一个大致轮廓.至于具体的使用方法可以再网上查到,比较多就没总结. HTML5 Audio and Video 的优势 1.作为原生的浏览器支持,无需安装任何第三方插件 2.HTML5 规范提供了一套完整的多媒体脚本化控制的API,开发人员可以轻易的使

直接在低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频的办法

摘自:http://www.uiej.com/1107.html 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频.video标签虽好,然而目前它却无法在旧版的IE浏览器中使用.所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下: <embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/

html5 音频和视频(audio And video)

1.音频和视频  Web 上的视频 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元素来包含视频的标准方法. 视频格式 当前,video 元素支持三种视频格式: 格式    IE Firefox Opera Chrome Safari Ogg     No 3.5+ 10.5+  5.0+ No MPEG4 9.0+  No           No 5.

Android之Audio和Video

The Android platform offers built-in encoding/decoding for a variety of common media types, so that you can easily integrate audio, video, and images into your applications. android平台内置了相关的编码和解码工具,据此,开发者可以很轻松的集成音频视频和照片到自己的应用程序中. 大致分为两项: 使用android播放音乐

低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频

支持低版本IE的html5播放器演示 通常人们习惯用swf播放器来播放网络视频音频 HTML5给我们带来了很多惊喜,其中新增加的audio和video标签可以让我们更方便的在网页中播放音频和视频.video标签虽好,然而目前它却无法在旧版的IE浏览器中使用.所以一般还是用flash播放器来播放视频,例如优酷网站的插入视频的代码如下: <embed src="http://player.youku.com/player.php/sid/XNjgwMDU5MDU2/v.swf" al