HTML5 audio与video标签实现视频播放,音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。
<audio> 标签属性
<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>
当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
再如下面:
<audio controls="controls">
<source src="music.ogg" />
<source src="music.mp3" />
<source src="music.wav" />
</audio>
<video> 标签属性
下面先介绍下video标签的一般用法
video标签的属性如下:
注:control 属性供添加播放、暂停和音量控件。
一般用法:
<div class="videoCon">
<video width="750" height="300" id="videoP" src="video.mp4"></video>
</div>
当然可以暂停,播放该视频,使用方法如下:
function playPause() {
var myVideo = document.getElementById('videoP');
if (myVideo.paused){
myVideo.play();
}else{
myVideo.pause();
}
}
当然video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:
如下:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
获取HTMLVideoElement和HTMLAudioElement对象
//audio可以直接通过new创建对象
Media = new Audio("http://www.abc.com/test.mp3");
//audio和video都可以通过标签获取对象
Media = document.getElementById("media");
Media方法和属性
//错误状态
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 //网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域,TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto: //准备状态
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking //回放状态
Media.currentTime = value; //当前播放的位置,赋值可改变位置
Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value; //默认的回放速度,可以设置
Media.playbackRate = value; //当前播放速度,设置后马上改变
Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停 //控制
Media.controls; //是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音 //TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置
事件
eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
});
}
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载(不是因为错误引起),
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //提示当前帧的数据是可用的
eventTester("waiting"); //等待数据,并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放,但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变
HTML5 audio与video标签实现视频播放,音频播放的更多相关文章
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- Using HTML5 audio and video
From:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video Using HTML5 ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML插入音频和视频:audio和video标签及其属性
一.上传到第三方网站,然后引入例如视频上传到优酷网,然后得到代码 <iframe height=498 width=510 src='http://player.youku.com/embed/ ...
- HTML5的Audio标签打造WEB音频播放器
目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...
- HTML中的<audio>和<video>标签讲解
关于<audio>标签讲解:点击这里 这里来一段简单的html5的音频代码: <audio src="someaudio.wav"> 您的浏览器不支持 au ...
随机推荐
- CAD打印线条太粗、线条颜色设置
不管你是使用打印机,还是将CAD转换为PDF文件,如果出现以下情况,线条太粗,根本看不清楚,怎么解决呢? 或者,不想通过图层复杂.繁琐的设置,想将各种颜色线条的CAD全部打印成黑白,或者指定某一种颜色 ...
- bootstrap - 响应式标题栏
先要拆分: .navbar 先变成相对定位 设置最小高度为50px: 设置底部边距为20px 然后设置一个 透明边框! 边框倒角 4px //@media (min-width:768px) - ...
- 简单的c#winform象棋游戏(附带源码)
算法源自网络(网络源码连接:http://www.mycodes.net/161/6659.htm) 整体思路:用二维数组构建棋盘每一个数组元素封装为一个picturebox附带若干属性(例如:棋 ...
- 【安装Redis】CentOS7 下安装NodeJs+Express+MongoDB+Redis
Redis,V3.2,官网l官方链接:http://www.redis.io/download,参考:http://blog.csdn.net/mlks_2008/article/details/19 ...
- js获取系统时间时自动补齐日期带零
最近在开发中发现有日期不规范的问题,正常规则应该是yy-mm-dd,而在输出时候却变成yy-mm-d,这是js的date()方法在作怪 解决思路是若在10号前,则自动给它补齐一个0,下面给出解决方法, ...
- C#设计模式之原型模式
原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象. 分析: 孙悟空:根据自己的形状复制(克隆)出多个身外身 软件开发:通过复制一个原型对象得到多个与原型对象一模一样的新对 ...
- php json_encode
1.该函数只接受utf-8编码的字符串,其他编码的字符串会返回false 2.字符串中的斜线'/'会被自动转义成'\/',如果不想被转义,可用如下方式(适用于php5.4及以上) json_encod ...
- 【笔记】ztree的使用
引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery ...
- Python的方法解析顺序(MRO)
mro即method resolution order,主要用于在多继承时判断调的属性的路径(来自于哪个类). http://blog.csdn.net/imzoer/article/details/ ...
- Guava学习笔记(一)概览
Guava是谷歌开源的一套Java开发类库,以简洁的编程风格著称,提供了很多实用的工具类, 在之前的工作中应用过Collections API和Guava提供的Cache,不过对Guava没有一个系统 ...