HTML5实现音频和视频嵌入的方法

最新推荐文章于 2024-08-12 22:44:37 发布
最新推荐文章于 2024-08-12 22:44:37 发布
阅读量2.2w 收藏 24
点赞数 3
分类专栏： html5

简介

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

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

?

1

2

3

<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啦。

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

?

1

2

3

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

你的浏览器不支持video元素

</audio>


 

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

audioVideo.html

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<!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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

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

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的属性和方法可以实现更复杂的功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持CDN。

DDOS防御
关注
专栏目录
11 HTML5嵌入视频
Tracy785的博客
08-29 243
<html> <head> <meta charset='utf-8'> <title>video</title> </head> <body> <video src='D:\0Files\HTML+CSS+JS\11 吒儿.mp4' controls preload='auto' poster='D...
HTML5 嵌入视频
热门推荐
在到处之间找我
03-04 2万+
HTML5 支持直接在浏览器中播放音频和视频文件，不需要使用 adobe flash 插件。 插件缺点：插件是令浏览器崩溃的主要原因之一，特别是 flash，存在着很多问题。   在网页中嵌入视频要使用 video 元素。 &lt;video&gt; 标签 定义和用法 &lt;video&gt; 标签定义视频，比如电影片段或者其他视频流。 提示 提示：可以在开始标签和结束标签之间放...
HTML5实现音频和视频嵌入
~~~~~~~~~~~~
05-07 2万+
简介 HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。 html实现音频嵌入(传统方式)：这种方式虽然可以实现，但是要浏览器支持Flash而且并不能实现控制，所以要实现起来很麻烦。 那么也就
[HTML5] 一文读懂H5新特性的应用
最新发布
Kevin ’ s blog
08-12 1210
详细讲解H5新特性
HTML5-嵌入视频和音频
MelanceXin的博客
04-25 534
嵌入视频 Html5 支持直接在浏览器中播放音频和视频文件，不需要使用adobe flash插件 插件是令浏览器崩溃的主要原因之一，特别是Flash，存在着很多问题。 浏览器中常见支持的视频格式为 Ogg，MPEG4，WebM 针对不同浏览器的不同版本，支持的视频格式会存在些许的差异。 IE支持性能较差，Google Chrome支持兼容性较强。 解决：针对不同浏览器，设置不同的影音格式。 vid...
怎么在html5中加入视频,html5怎么嵌入视频
weixin_42283048的博客
05-31 2321
首先我们要知道HTML5是支持直接在浏览器中播放音频和视频文件的，不需要使用 adobe flash 插件。插件缺点：插件是令浏览器崩溃的主要原因之一，特别是 flash，存在着很多问题。(视频学习推荐：html5视频教程)在网页中嵌入视频要使用 video 元素。一、 标签定义和用法 标签定义视频，比如电影片段或者其他视频流。提示可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示...
HTML5实现音频和视频嵌入,如何利用HTML5实现音频和视频嵌入的方法
weixin_32191249的博客
06-15 985
这篇文章主要详情了HTML5实现音频和视频嵌入的方法的相关资料，原生的支持音频和视频，为HTML5注入了巨大的发展潜力，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧简介HTML5未出来之前，在线的音频和视频都是借助Flash或者者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和...
使用HTML5在网页中嵌入音频和视频播放的基本方法
11-21
HTML5 是一种现代的网页标记语言，它引入了许多新的特性，其中包括对音频和视频的原生支持，使得在网页上嵌入多媒体内容变得更加便捷。在本文中，我们将深入探讨如何使用 HTML5 的 `<audio>` 和 `<video>` 标签来...
html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法
weixin_34730055的博客
05-30 2859
HTML5 特性，包括原生音频和视频支持而无需 Flash。HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 controls 属性让用户可以播放和暂停媒体。嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式：XML/HTML Code复制内容到剪贴板Yourbrowserdoesnotsupporttheelement.目前的...
HTML5让页面嵌入视频如些简单
冷月宫主的专栏
04-25 1039
html5插入mp4视频文件
08-02
NULL 博文链接：https://alleni123.iteye.com/blog/1962371
mp4插入视频代码
08-07
mp4插入视频代码 无需安装控件！直接加载html
html5如何嵌入音频视频,实现HTML5音频和视频嵌入的教程
weixin_34544309的博客
06-23 283
//使用脚本检测浏览器的标签支持情况var support = !!document.createElement("audio").canPlayType;if (!support) {alert("你的浏览器不支持本视频播放");}// 定义全局的视频对象var e1 = null;window.addEventListener("load", function() {e1 = document...
如何再html5中嵌入视频网站视频
luckydu_old的博客
03-07 9538
如何在html5中嵌入视频网站视频 比起运用“video”元素播放本地视频，直接嵌入视频网站的视频是一种既帅气又酷炫的方式。之前一直找不到正确方法把视频网站的视频嵌入html5，后来偶然解锁了嵌入视频的标准姿势，简单到比你想象的还简单，甚至不用写代码。 闲话少叙，下面是正文，这里以bilibili和YouTube(需要科学上网)为例 第一步 访问bilibili，然后随便找一个视频，将鼠标悬停在“分享”上 第二部 在“嵌入代码”一栏点击“复制”，然后打开html文件，把代码复制进去 ，记住要在视频地址前加
HTML5插入视频音频的方式
shi0708的博客
09-06 1546
1. 插入视频 1&amp;gt; 如果文件过大，我们可以选择将视频传送到优酷、腾讯等APP中，在APP中找到想要的视频，点击分享，会出来如下图所示的，点击复制Html代码，直接复制到我们的代码中就可以了。 2&amp;gt; 如果文件不大时，由于我们的浏览器支持不同种文件所以，我们要将三种形式都写上，电脑按顺序识别，第一个不行，就第二个，以此类推，有些老的浏览器三种形式都不支持，我就只能告诉用户“您...
HTML中音视频的实现
qq_67413159的博客
03-13 5601
HTML中音视频的使用
如何嵌入HTML5视频播放器？
haibo_shi的博客
02-14 3139
如何嵌入HTML5视频播放器？ 如何嵌入HTML5视频播放器？ 海海软件DRM-X 4.0 HTML5 视频播放使用HTML5 Video 标签，您可以很轻松的通过标准的HTML5标签嵌入视频，并且可以使用市面上流行的HTML5播放器，像VideoJS，您可以使用JavaScript与HTML5播放器进行交互。 在head中引入VideoJS: &lt;!--引用VideoJS脚本--&gt; &...
html中如何加视频背景音乐,怎么用html设置背景音乐
weixin_36038435的博客
06-03 2371
用html设置背景音乐的方法：首先新建网页，使用embed标签，并为其添加src属性；然后添加autostart属性，代码为【autostart="true"】。本教程操作环境：windows7系统、html5版，DELL G3电脑。用html设置背景音乐的方法：1、首先我们创建一个简单的网页，网页上只有一个DIV，DIV里有一段文本内容。代码如图。2、要为网页添加背景音乐，我们可以使用embed...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值