如何利用HTML5实现音频和视频嵌入的方法

篇文章主要介绍了HTML5实现音频和视频嵌入的方法的相关资料，原生的支持音频和视频，为HTML5注入了巨大的发展潜力，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

简介

HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。

html实现音频嵌入(传统方式)：这种方式虽然可以实现，但是要浏览器支持Flash而且并不能实现控制，所以要实现起来很麻烦。

<object height="200" width="200" data="2_1.swf" >

</object>

<embed src="2_1.mp4" type="">

那么也就是说HTML5存在一个很大的问题就是兼容性。音频

HTML5支持的音频格式：

视频

视频格式：

由上可知，HTML5貌似支持的格式有点少哈，所以当你发现用HTML5放置音频和视频不显示时，应该就是格式不支持的问题。注： MP4有3种编码，mpg4(xdiv),,mpg4(xvid)，avc(h264)，只有h264才是公认的MP4标准编码(在这也是被坑了，其他格式的只有声音没有图像。)遇到这种问题，就用视频格式转换器，转换一下格式就OK啦。

音频实现起来很简单：这里工具条使用了浏览器默认的工具条。

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的浏览器不支持video元素

</audio>

视频虽然也可以使用浏览器默认的，但无法实现私人订制，所以从学技术的角度讲，还是要学习一下自己做工具实现功能（audio也可参照此方法）。

audioVideo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>网页放置视频</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/ControlBar.js"></script>

</head>

<body>

<audio src="htmls/1.mp3" controls="controls" loop="loop" preload="auto" >

你的浏览器不支持video元素

</audio>

<video id="myPlayer" width="600" height="400" src="htmls/2_1.mp4" controls="controls" loop="loop" poster="3.jpg">

你的浏览器不支持audio元素

<!-- MP4有3种编码，mpg4(xdiv),,mpg4(xvid)，avc(h264)，

只有h264才是公认的MP4标准编码 -->

</video>

<div id="progress"></div>

<input id="volume" type="range" min="0" max="1" step="0.1" onchange="Volume(this)">

<span id="rate">1</span>fps <span id="info"></span>

<button onclick="Play(this)" id="btn1">播放</button>

<button onclick="Fast()">快进</button>

<button onclick="Slow()">慢进</button>

<button onclick="Prev()">后退</button>

<button onclick="Next()">前进</button>

<button onclick="Muted(this)">静音</button>

</body>

</html>

显示(html)与功能实现(js)分离，由外部导入

ControlBar.js

//使用脚本检测浏览器的标签支持情况

var support = !!document.createElement("audio").canPlayType;

if (!support) {

alert("你的浏览器不支持本视频播放");

}

// 定义全局的视频对象

var e1 = null;

window.addEventListener("load", function() {

e1 = document.getElementById("myPlayer");

});

/*前进：一分钟 */

function Next() {

e1.currentTime+=10; //设置属性currentTime,快进10s

}

/*后退：一分钟 */

function Prev() {

e1.currentTime-=10; //设置属性currentTime,后退10s

}

/*播放/暂停*/

function Play(e) {

if(e1.paused){

e1.play();

document.getElementById("btn1").innerHTML="暂停"

}else{

e1.pause();

document.getElementById("btn1").innerHTML="播放"

}

/*慢进：小于等于1时，每次都只减慢0.2的速率；大于1时，每次减1 */

function Slow(){

if(e1.playbackRate<=1){

e1.playbackRate-=0.2;

}else{

e1.playbackRate-=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

/*慢进：小于等于1时，每次都只减慢0.2的速率；大于1时，每次减1 */

function Fast(){

if(e1.playbackRate<1){

e1.playbackRate+=0.2;

}else{

e1.playbackRate+=1;

}

document.getElementById("rate").innerHTML=fps2fps(e1.playbackRate);

}

function fps2fps(fps){

if(fps<1){

return fps.toFixed(1);

}else{

return fps;

}

/*静音*/

function Muted(e){

if(e1.muted){

e1.muted=false;

e.innerHRML="X";

document.getElementById("volume").value=e1.volume;

}else{

e1.muted=true;

e.innerHRML="x";

document.getElementById("volume").value=0;

}

/*调整音量*/

function Volume(e){

if(e1.muted==true){

e1.muted=false;

}

e1.volume=e.value;

}

/* 进度信息：控制进度条，并显示进度时间*/

function Progress(){

var p1=document.getElementById("progress");

p1.style.width=(e1.currentTime/e1.duration)*720+"px";

document.getElementById("info").innerHTML=s2time(e1.currentTime)+"/"+s2time(e1.duration);

}

function s2time(s){

var m=parseFloat(s/60).toFixed(0);

s=parseFloat(s%60).toFixed(0);

return (m<10? "0"+m:m)+":"+(s<10?"0"+s:s);

}

/* 网页加载完毕后，把进度处理函数添加至视频对象的timeupdate事件中*/

window.addEventListener("load",function(){

e1.addEventListener("timeupdate",Progress);

});

/*给window.onload事件添加进度处理函数*/

window.addEventListener("load",Progress);

实现的功能：播放，暂停，快进，慢进，前进，后退，音量控制，进度条和时间显示。由此可见通过Audio或Video的属性和方法可以实现更复杂的功能。

天小编将分享前端开发中必学的知识点，HTML5中关于音视频处理

视频处理

基本内容：目前国内的视频网站 - Flash技术，HTML5的视频处理首先替换Flash技术，支持的视频格式有：

1.MP4 - .mp4 目前比较主流的视频格式。

2.OGG - .ogv 手机端的视频格式。

3.WebM - 目前唯一一个支持超高清视频格式，该视频格式出自Goggle公司。

问：如何处理视频？

答：<video>元素 - 引入单个格式视频文件，它由自己的属性组成。 src属性 - 指定视频文件的地址， width属性 - 设置视频宽度， height属性 - 设置视频高度。语法规范：<video src="视频文件路径" width=“100px”>

！！需要注意的是：视频的宽高比不会改变，在video元素内定义不支持的提示内容。

如果要想在<video>元素引入多个格式视频文件，那么就使用<source/>，使用这种方式能够实现各个浏览器的兼容性，语法规范：

<video>

</video>

<video>元素的属性

autoplay属性 - 自动播放

controls属性 - 提供控制面板

loop属性 - 循环播放

poster属性 - 播放之前显示一张图片

preload属性 - 预加载(视频)

none - 不加载

auto - (默认值)自动(尽快加载完毕)

metadata - 只加载除视频之外的信息(宽和高)

video的高级用法方法

play() - 播放视频

pause() - 暂停视频

load() - 加载视频

canPlayType() - 判断是否支持该格式

事件

play - 播放视频时触发

pause - 暂停视频时触发

ended - 结束播放时触发

error - 播放错误时触发

canplay - 可播放时触发(不考虑整体)

canplaythrough - 整体播放顺利时触发

progress - 下载进度

属性

paused - 判断视频当前是否暂停，如果暂停状态,返回true

ended - 判断视频当前是否结束播放，如果结束播放,返回true

duration - 当前视频的总时长

currentTime - 获取或设置当前视频播放的位置

音频处理

基本内容：目前HTML页面实现音频处理，将Windows Media Player播放器,内置页面中，使用Flash技术实现音频处理，HTML5实现音频处理支持的音频格式有：

1.mp3 - 感谢百度(MP3)

2.ogg

3.wav

问：如何使用音频？

答： audio元素 - 引入一种音频格式。

<audio>元素的属性

src属性 - 引入音频文件，作用 - 实现页面背景音乐播放

audio元素 - 引入多种音频格式

source元素

autoplay - 自动播放

controls - 提供控制面板

loop - 循环播放

preload - 预加载

audio的高级用法

事件

play - 播放音频时触发

方法

play() - 播放音频

pause() - 暂停音频

属性

paused - true,表示暂停状态

！！需要特别注意，IE 8及之前的版本都不支持

emo：

```html

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio（音频）：在网页中播放音频的简单方法</title>
</head>
<body>
<h1>HTML5 Audio（音频）：在网页中播放音频的简单方法</h1>
<p>下面是一个使用HTML5 Audio标签在网页中播放音频的示例：</p>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>上述代码将呈现出一个带有控制条的音频播放器，并在其中播放指定的音频文件。音频文件可以是MP3格式（<code>.mp3</code>）。</p>
<p>在上述代码中，我们使用了HTML5的Audio标签来嵌入音频。通过设置<code>controls</code>属性，我们可以启用控制条，让用户可以控制音频的播放和暂停。</p>
<p>在<code>audio</code>标签内部，我们使用了<code>source</code>标签来指定音频文件的URL和类型。在示例中，我们提供了一个MP3格式的音频文件。</p>
<p>如果用户的浏览器不支持HTML5 Audio标签或指定的音频文件格式，则会显示<code>Your browser does not support the audio element.</code>的提示信息。</p>
<p>通过使用HTML5 Audio功能，我们可以在网页中方便地播放音频，为用户提供更加丰富和多样化的声音效果。音频可以应用于各种场景，如音乐、语音提示、背景音乐等。</p>
</body>
</html>

```

以上是一篇使用HTML5 Audio标签在网页中播放音频的文章，其中包含了示例代码和一些相关说明。通过使用HTML5的Audio标签，我们可以在网页中方便地嵌入和播放音频。在示例中，我们使用了MP3格式的音频文件。通过设置Audio标签的属性，如控制条，我们可以定制音频播放器的外观和功能。通过使用HTML5 Audio功能，我们可以为用户提供更加丰富和多样化的声音效果，如音乐、语音提示、背景音乐等。请注意，在使用音频功能时，需要确保音频文件的合法性和版权问题。

我是永不低头的熊，喜欢美食、健身，当然也喜欢写代码，每天不定时更新各类编程相关的文章，希望你在码农这条路上不再孤单！

在线咨询

上一篇：做HTML5，需要哪些工具？
下一篇：为HTML页面添加视频、音频的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何利用HTML5实现音频和视频嵌入的方法

视频处理

音频处理

您的项目需求