h5-audio/video标签
音频/视频
基础用法
属性
事件
audio元素和video元素
<audio id="audio" src="./成都.mp3"></audio>
<video id="video" src="./成都.mp4"></video>
一些属性
1、autoplay 自动播放
<audio src="成都.mp3" autoplay></audio>
2、controls 设置控件
<audio src="成都.mp3" autoplay controls></audio>
3、preload(none/metadata/auto) 预加载，规定是否在页面加载后载入视频 （与autoplay不能同时存在）
none 不需要加载数据
metadata 元数据 诸如时长、比特率、帧大小这样的原数据，而不是媒体内容需要加载的
auto 浏览器应当加载它认为适量的媒体内容
<audio src="成都.mp3" autoplay controls preload="auto"></audio>
4、loop 是否循环播放音/视频
<audio src="成都.mp3" autoplay controls loop preload="auto"></audio>
5、poster (video 独有)
当视频不可用时，使用一张图片替代，否则是空白 <video src="成都.mp4" poster="封面.jpg" controls></video>
多类型资源
<audio id="music">
<source src="成都.mp3" type="audio/mpeg">
<source src="成都.ogg" type='audio/ogg"'>
</audio>
（有时候不识别，为了保险起见，可以用哪个就拿哪个）
脚本化
var audio = document.getElementById('audio');
var audio = new Audio('./laojie.mp3');
var audio = document.createElement('video');
<script>
var audio = document.createElement('audio');
audio.setAttribute('controls','controls'); //增加属性
audio.setAttribute('autoplat','autoplay');
audio.loop = "loop";
audio.src = ""; //资源路径
document.body.appendChild(audio);
</script>
设置属性
controls/loop/preload/autoplay属性
audio.controls = true;
audio.loop = 'loop';
audio.preload = 'auto';
audio.autoplay = true;
currentSrc 资源链接，媒体数据的url地址
注意：window.onload
方法
1、play() 方法
2、pause() 方法
3、load()方法
重新加载视频/音频元素，用于在更改来源或其他设置后对音频/视频元素进行更新
音量 volume属性
表示播放音量，介于0(静音)~1(最大音量)之间，默认1。
将muted属性设置为true则会进入静音模式，设置为false则会恢复之前指定的音量继续播放。
超过范围会报错[0, 1]
<body>
<audio src="" controls></audio>
<button id="volum_add">+</button>
<button id="volum_sub">-</button>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="reload">重播</button>
<script>
var audio = document.getElementsByTagName('audio')[0];
volum_add.onclick = function(){
if(audio.volume <=0.7){
audio.volume += 0.3;
}else{
audio.volume = 1;
}
}
volum_sub.onclick = function(){
if(audio.volume >=0.3){
audio.volume -= 0.3;
}else{
audio.volume = 0;
}
}
play.onclick = function(){
audio.play();
}
pause.onclick = function(){
audio.pause();
}
reload.onclick = function(){
audio.load();
audio.play();
}
</script>
播放速率 playbackRate
用于指定媒体播放的速度。该属性值为1.0表示正常速度，大于1则表示”快进”，0~1之间表示”慢放"，负值表示回放。
每个浏览器实现的会有差别，具体看浏览器实现
<button id="add_rate">快进</button>
<button id="sub_rate">慢放</button>
add_rate.onclick = function(e){
if(audio.playbackRate < 2){
audio.playbackRate += 0.1;
}
}
sub_rate.onclick = function(e){
if(audio.playbackRate > 0.5){
audio.playbackRate -= 0.1;
}
}
currentTime/duration属性
currentTime 设置或返回音频/视频播放的当前位置
duration 返回当前音频/视频的时长(window.onload)
单位 秒
played/buffered/seekable
played属性返回已经播放(看过)的时间段，buffered属性返回当前已经缓冲的时间段，seekable属性则返回用户可以跳转的时间段。这三个属性都是TimeRanges对象，每个对象都有一个length属性以及start()和end()方法，length属性表示当前的一个时间段，start()与end()分别返回当前时间段的起始时间点和结束时间点(单位是秒，起始参数是0)
下面代码确定当前缓存内容的百分比：
paused/seeking/ended （都返回布尔值）
这三个属性用来查询媒体播放状态，paused为true表示播放器暂停。seeking为true表示播放器正在调到一个新的播放点，如果播放器播放完媒体并且停下来，则ended属性为true。
作为了解
play.onclick = function(){
if(audio.paused){
audio.play();
play.innerText = '暂停'
}else{
audio.pause();
play.innerText = '播放'
}
} //播放、暂停一体
canPlayType()方法 （看浏览器是否支持播放当前文件）
h5-audio/video标签的更多相关文章
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
- h5的video标签
在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- H5 <audio> 音频标签自定义样式修改以及添加播放控制事件
H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...
- 解决h5的video标签，android、ipad客户端播放正常，iphone客户端无法播放
在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...
- 更改kindeditor编辑器，改用支持h5的video标签替换原有embed标签
kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...
随机推荐
- tomcat升级 遇到的坑
今天说说tomcat升级后出的问题 以前的版本是8.0.30的 因用安全漏洞 需要升级tomcat 为8.5.28的版本 升级后jvm的配置 等等都和一起一样,过了几天发现,我们的错误日志和处理影响转 ...
- hdu 6241 Color a Tree 2017 CCPC 哈理工站 L
Bob intends to color the nodes of a tree with a pen. The tree consists of NN nodes. These nodes are ...
- 【leetcode】441. Arranging Coins
problem 441. Arranging Coins solution1: class Solution { public: int arrangeCoins(int n) { ; ; while ...
- Android SDK的下载与安装
一.Android SDK简介 Android SDK(Software Development Kit,软件开发工具包)被软件开发工程师用于为特定的软件包.软件框架.硬件平台.操作系统等建立应用软件 ...
- 【Jmeter】api性能测试总结
1.前提概念 平时常用的性能测试:api性能测试+场景性能测试:今天就说一说api性能测试 2.如何进行性能测试? 需求:对某api进行性能测试,看看最大承受的并发数,分析下图表 分析: 错误思路:当 ...
- tomcat访问错误调试方法
生产环境中经常用到tomcat,所以还是要学一下tomcat的排错的 很重要的一点,就是实时查看catalina.out日志 执行tail -f catalina.out就会实时刷新日志了 catal ...
- ssh 22端口号拒绝
1:当scp或者ssh登录ubuntu远程服务的时候,出现:
- [转]阿里巴巴十年Java架构师分享，会了这个知识点的人都去BAT了
1.源码分析专题 详细介绍源码中所用到的经典设计思想,看看大牛是如何写代码的,提升技术审美.提高核心竞争力. 帮助大家寻找分析源码的切入点,在思想上来一次巨大的升华.知其然,并知其所以然.把知识变成自 ...
- pycharm 3.4 破解
修改host,增加一行: 0.0.0.0 account.jetbrains.com 使用Activate code注册: EB101IWSWD-eyJsaWNlbnNlSWQiOiJFQjEwMUl ...
- threading模块小结
这篇文章是别人文章的一个观后小结,不是什么原创. 首先第一个例子: import threading import time def worker(): print "worker& ...