HTML5音频和视频处理

为什么会有audio？或者说audio的出现是为了解决一些什么问题？
在H5之前，如果想在浏览器上播放视频和音频的话都是需要通过一些插件的支持（比如flash），但是因为浏览器和插件之间存在一些兼容性的问题，所以为了解决这些问题，H5就退出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法，使其可以统一化、简便化。

1、audio–音频

<audio src="files/荣耀.mp3" preload="metadata" controls="controls"></audio>

（1）src():本地或服务端音频文件的地址
（2）controls：由浏览器提供的音频控件
（3）preload：预加载，让文件预先进行缓冲，优化播放速度。
三个可选值：auto 对整个音频文件进行加载默认值
metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）

<audio src="files/荣耀.mp3" autoplay  loop  controls="controls"></audio>

loop：循环播放，布尔类型在标签内使用时默认为true。
autoplay：自动播放，布尔类型在标签内使用时默认为true。

控制函数和常用属性
（1）playOrPaused()：控制音频的播放和暂停。
play():播放
pause():暂停

function playOrPaused(id,obj){if(audio.paused){audio.play();obj.innerHTML='暂停';return;}audio.pause();obj.innerHTML='播放'
}

（2）getCurrentTime():获取已播放的时长，或者说是播放了多长时间

function getCurrentTime(){alert(audio.currentTime+'秒');
}

（3）duration():获取音频的总时长

function duration(){alert(audio.duration+'秒')
}

（4）hideOrShowControls():对浏览器提供的音频控件进行隐藏或显示

//对浏览器提供的音频控件进行隐藏或显示
function hideOrShowControls(obj){if(audio.controls){audio.removeAttribute("controls");obj.innerHTML = '显示';return;}audio.controls = 'controls';obj.innerHTML = '隐藏';
}

可脚本控制的特性值
（1）muted():布尔类型，当它的值为true时开启静音，值为false时，关闭静音。

//开启或关闭静音
function muted(obj){if(audio.muted){audio.muted=false;obj.innerHTML='开启静音'}else{audio.muted = true;obj.innerHTML ='关闭静音'}
}

（2）vol:通过改变函数中定义的volume的值来控制音量的大小
volume范围：0.0-1.0 超出范围会报错。

//音量的加减
function vol(type){if(type=='up'){//加音键var volume = audio.volume+=0.1;if(volume>=1){volume=1;}audio.volume=volume;}else{//减音键var volume = audio.volume-=0.1;if(volume<=0){volume=0;}audio.volume=volume;}document.getElementById("nowVol").innerHTML = round(audio.volume);
}
function round(value){value = Math.round(parseFloat(value)*10)/10;//将音量的值转化为浮点数并四舍五入if(value.toString().indexOf(".")<0){value=value.toString()+".0";}return value;
}

video–视频
标签属性：

<video src="files/mov_bbb.mp4" preload="auto" loop  poster="poster.png" width="400" height="350" controls="controls"></video>

（1）src():本地或服务端视频文件的地址
（2）controls：由浏览器提供的视频控件
（3）preload：预加载，让文件预先进行缓冲，优化播放速度。
三个可选值：auto 对整个视频文件进行加载默认值
metadata：只加载文件的元数据（第一帧，播放总时长，播放列表等）
（4）loop：循环播放，布尔类型在标签内使用时默认为true。
（5）autoplay：自动播放，布尔类型在标签内使用时默认为true。
（6）poster()：给视频设置第一帧（封面）。括号内写图片的路径内容。
（7）width 、 height ：设置视频的高度和宽度

常用的方法：
（1）playBySeconds()：通过改变currentTime的值设置视频开始播放的位置（播放点）

function playBySeconds(){video.currentTime = 5;
}

（2）setPlaySpeed()：通过改变playbackRate的值来设置视频的播放速度

function setPlaySpeed(){video.playbackRate = 0.1;
}

（3）duration():返回视频的总时长

function duration() {alert(video.duration);
}

（4）onended：当视频播放完成后触发的事件。

video.onended = function () {alert("视频播放完成");
}

HTML5音频和视频处理相关推荐

移动端HTML5音频与视频问题及解决方案
移动端HTML5音频与视频问题及解决方案参考文章: (1)移动端HTML5音频与视频问题及解决方案 (2)https://www.cnblogs.com/aaronjs/p/4812119.html ...
html5中加入视频格式,HTML5音视频格式video和audio
html5音频和视频使用详解. 一.html5视频以前,大多数视频是通过插件(比如 Flash)来显示的,然而,并非所有浏览器都拥有同样的插件现在,HTML5 规定了一种通过 video 元素来包 ...
【阿里云大学课程】前端必知——HTML5新特性完整视频教程（音频、视频、画布、web存储、动画……）...
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体. 本课程中,你将学习到下列这些HTML5新特性(点击下列课时立即学习): ...
网页设计html加音频,HTML5网页中如何嵌入音频，视频？
<HTML5的视频播放控制技术> 介绍了本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3.Wav 和 Ogg 格式的音频,代码示 ...
[html] HTML5如何使用音频和视频？
[html] HTML5如何使用音频和视频? video和audio标签个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面 ...
HTML5 音频视频
audio 元素能够播放声音文件或者音频流. <!DOCTYPE html> <html> <head lang="en"><meta c ...
在 HTML5 中捕获音频和视频
Capture Audio and Video in HTML5 机翻原文:Capture Audio and Video in HTML5 - HTML5 Rocks 介绍长期以来,捕获音频和视 ...
html5前端Video视频标签和audio音频标签的使用
html5前端Video视频标签和audio音频标签的使用 h5新特性中关于Video视频标签和audio音频标签的使用和浅谈一.Video视频标签 video标签是h5新特性中用来播放视频的控件, ...
php播放音乐视频,html5停止（暂停）当前播放的音频或视频的方法pause()
实例带有播放和暂停按钮的一段视频:var myVideo=document.getElementById("video1"); function playVid() { myVi ...

HTML5音频和视频处理

HTML5音频和视频处理相关推荐

最新文章

热门文章