HTML多媒体标签

Posted 郭旺的公众号

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML多媒体标签相关的知识，希望对你有一定的参考价值。

在html中可以通过标签在网页中插入多媒体文件（包括：音频、视频、flash动画等等）。一般情况下，可以使用<embed></embed>标签对和<object></object>标签对。object多用与于IE浏览器，embed用于非IE浏览器。

一、embed标签

使用embed标签可以在网页中放置如SWF动画（即Flash动画）、MP3音乐、MPEG格式的视频和AVI格式的视频等多媒体内容。

语法格式：

<embed src=“文件地址”
height=“value”
width=“value”
hidden=“value”
autostart=“value”
loop=“value”>
</embed>
说明：
src：用于指明多媒体文件所在的路径，可以插入的常见的多媒体文件包括SWF动画、MP3音乐、MPEG格式的视频和AVI格式的视频。

height、width：设置多媒体播放的区域。

hidden：用于控制播放面板的显示和隐藏。当hidden=“true”时，隐藏面板；当hidden=“false”时，显示面板。

loop：用于设定播放的循环次数，loop取值不是具体的数字，而是true或false。true表示媒体文件无限次循环，false表示只播放一次。

autostart：用于控制多媒体内容是否自动播放。当autostart=“true”时，自动播放；当autostart=“false”时，不自动播放。
案例： 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>多媒体标签</title>
</head>
<center>
    <embed src="xihu.mp4"  loop="true"
           height="400px" width="800px"
           hidden="false" autostart="true">
</center>
</body>
</html>

效果：

二、object标签

object标签用于向页面添加媒体对象，包括音频、视频以及flash等。object标签对o中包含param标签对，param标签用来定义播放参数。
object标签中包含属性width、height用来设定播放区域；属性classid用来用来告诉浏览器插件的类型；属性codebase可选，用来检测是否安装flash，未安装则跳转指定的Shockwave的下载页面。
param标签中包含着name属性以及value属性。name是一个param标签属性，而value是对应这个属性的值。
通常情况下，为了确保在IE以及非IE浏览器中都能够正常显示多媒体，可以采取embed和object标签并用的方法，即在object标签对中插入embed标签。

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>多媒体标签</title>
</head>
<center>
    <object width="800px" height="400px">
        <param name="src" value="xihu.mp4">
        <embed src="xihu.mp4"  loop="true" height="400px"
               width="800px" hidden="false" autostart="true">
    </object>
</center>
</body>
</html>

效果：

HTML多媒体标签

三、HTML5中的音视频

1、音频

对于HTML5来说音频的添加可以直接用标签来处理，不需要借助第三方的插件。对于audio标签，支持“.mp3”、“.wav”和“.ogg”格式的音频文件。

语法格式：

<audio src=“xihu.mp3”controls=“controls”>
当前浏览器不支持HTML5：audio
</audio>

说明：

src：表示设置音频文件地址。

controls：表示是否设置控制台。

如果浏览器不支持HTML5，则显示：“当前浏览器不支持HTML5：audio”，不会显示控制条。

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>多媒体标签</title>
</head>
<audio  src="沈华夏%20-%20生活不止眼前的苟且(钢琴版).flac"  controls="controls">
    当前浏览器不支持HTML5：audio
</audio>
</body>
</html>

效果：

HTML多媒体标签

2、视频

对于HTML5来说视频的添加可以直接用标签来处理，不需要借助第三方的插件。video标签支持三种视频文件，分别是：“.mp4”、“.webm”和“.ogg”。

基本格式：

<video src=“course.mp4”controls="controls">
浏览器不支持HTML5：video
</video>

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>多媒体标签</title>
</head>
<center>
    <video src="xihu.mp4" width="800px" height="450px" controls="controls">
        浏览器不支持HTML5：video
    </video>
</center>
</body>
</html>

效果：

当然也可以通过javascript来控制视频播放

语法格式：

<video id=“myvideo”  width=“420”  controls="controls" >
<source src=“course.mp4”  type=“video/mp4”/>
浏览器不支持HTML5：video
</video>
<button onclick=“playpause()”  >播放暂停</button>

说明：

id：表示这块元素的名称，用于在JS中调用该元素。

width：表示设置视频窗口宽度。

controls：表示是否设置控制台。

Source：表示视频文件的来源。（多个source表示设置不同格式的视频，不是多个视频）

src：设置视频文件的地址。

type：设置视频格式。

文字部分：表示当浏览器不支持HTML5时，显示的提示文字。

button：表示按钮，onclick表示点击事件，后面跟的事件名称。（在JS中调用）

案例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>多媒体标签</title>
</head>
<center>
    <video id="myVideo" width="800px" height="400px">
        <source src="xihu.mp4" type="video/mp4">
        浏览器不支持HTML5：video
    </video><br/>
    <button onclick="playPause()">播放/暂停</button>
</center>
<script>
    var v = document.getElementById("myVideo");
    function playPause() {
        if(v.paused)
            v.play();
        else
            v.pause();
    }
</script>
</body>
</html>

效果：


以上是关于HTML多媒体标签的主要内容，如果未能解决你的问题，请参考以下文章

html [媒体标签] HTML5媒体标签#html5

HTML多媒体标签

HTML html的Textmate片段 - 配对输入和标签

html5的新元素

html grav标签枝条片段

如何区分两个“onpause”事件 - 由单击“暂停”按钮引起，以及由到达媒体片段末尾引起？