㈠什么是多媒体?

多媒体来自多种不同的格式。它可以是听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。

Web 上的多媒体指的是音效、音乐、视频和动画。

确定媒体类型的最常用的方法是查看文件扩展名。多媒体元素元素带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。

 

㈡HTML Object(对象)元素

★<object> 的作用是支持 HTML 助手(插件)。

辅助应用程序(helper application)是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频(以及其他)。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是,您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能(比如后退、暂停、停止和播放)的手工(或程序的)控制。

 

★在 HTML 中播放视频的最好方式?

①使用 QuickTime 来播放 Wave 音频

示例:

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>

 

②使用 QuickTime 来播放 MP4 视频

示例:

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

 

③使用 Flash 来播放 SWF 视频

示例:

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

 

④使用 Windows Media Player 来播放 WMV 影片

下面的例子展示用于播放 Windows 媒体文件的推荐代码:

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
height="100%" autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

 

㈢网页中插入音频和视频

☆在网页中,常见的多媒体文件包括音频文件和视频文件。对于在线音频和视频,我们往往都使用embed标签来实现。

☆语法:<embed src="多媒体文件地址" width="播放页面宽度" height="播放页面的高度">

☆embed是HTML5新增的标签,它是一个自闭合标签。src属性用于设置多媒体文件地址,一般情况下,都是用相对地址。

☆示例:插入音频文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入音频文件</title>
</head>
<body>
<embed src="media/music.mp3" width="400px" height="80px" />
</body>
</html>

我们可以看到,使用embed标签插入音频文件还会有一个播放界面,界面上有几个简单的功能按钮。

 

☆示例:插入视频文件

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>插入视频文件</title>
6 </head>
7 <body>
8 <embed src="media/littleApple.wmv" width="400px" height="80px" />
9 </body>
10 </html>

☆使用embed标签插入视频,在浏览器中我们可以看到,浏览器提供了一个简单的操作页面。embed标签支持的视频格式很多,大部分主流格式都支持。

☆如果你使用embed标签不能播放视频,那就可能是视频格式有问题或者编码有问题。可以使用格式工厂等软件工厂转换一下格式。

 

☆有关的解决办法可以参考下面这个链接,能提供更好的方法:

HTML 音频 :https://www.w3school.com.cn/html/html_audio.asp

HTML 视频 :https://www.w3school.com.cn/html/html_video.asp

 

㈣网页中插入背景音乐

☆使用embed标签为网页添加背景音乐

☆语法:<embed src=" " hidden=" " autostart=" " loop=" " />

☆说明:src属性定义了背景音乐的地址。

              autostart属性取值为true或false。取值为true时表示页面一载入则自动播放,取值为false时表示页面载入后不进行播放。

              hidden属性取值为true或false。取值为true时不显示播放器,取值为false时显示播放器。

             loop属性取值为true或false。取值为true时表示无限次播放(循环播放,取值为false时表示只播放一次。)

 

☆示例:

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>网页中插入视频背景音乐</title>
6 </head>
7 <body>
8 <embed src="media/music.mp3" hidden="true" autstart="true" loop="true" />
9 </body>
10 </html>

效果图:

这里使用hidden属性来将播放器隐藏,因此音乐变成了背景音乐。

 

㈤网页中插入Flash

☆Flash是一种动画技术,在网页制作中常常会用到Flash,它可以实现一些较为复杂的动态效果,从而让网页的画面更加生动。

☆在网页中插入Flash也是使用embed标签来实现。

☆语法:<embed src="多媒体文件地址" width="多媒体的宽度" height="多媒体的高度" />

HTML的多媒体属性的更多相关文章

  1. System.Diagnostics.Process.Start的妙用

    我们经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 那么如何做呢? 答案 ...

  2. System.Diagnostics.Process 启动进程资源或调用外部的命令的使用

    经常看到一些程序在保存为一个txt,或者excel的文件的时候,保存完毕立即打开, 启动程序或打开文件的代码 System.Diagnostics.Process.Start(System.IO.Pa ...

  3. System.Diagnostics.Process.Star的用法

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  4. C# Process.Start()方法详解

    System.Diagnostics.Process.Start(); 能做什么呢?它主要有以下几个功能: 1.打开某个链接网址(弹窗). 2.定位打开某个文件目录. 3.打开系统特殊文件夹,如“控制 ...

  5. 命令行启动win7系统操作部分功能

    control.exe /name microsoft.folderoptions 启动资源管理器的 文件夹属性 选项卡 control.exe /name Microsoft.AddHardware ...

  6. WPF中System.Diagnostics.Process.Start的妙用

    我们经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 那么如何做呢? 答案 ...

  7. c#调用系统资源大集合-3

    public static void 打开控制面板多媒体属性音频() { Process.Start("rundll32.exe", " shell32.dll,Cont ...

  8. c#调用系统资源大集合-2

    public static void 打开格式化对话框() { Process.Start("rundll32.exe"," shell32.dll,SHFormatDr ...

  9. C# 之 System.Diagnostics.Process.Start的妙用

    经常会遇到在Winform或是WPF中点击链接或按钮打开某个指定的网址, 或者是需要打开电脑中某个指定的硬盘分区及文件夹, 甚至是"控制面板"相关的东西, 如何做呢? 方法:使用S ...

随机推荐

  1. 减2或减3(很搞的贪心)2019牛客国庆集训派对day6

    题意:https://ac.nowcoder.com/acm/contest/1111/D 问你先减二x次的情况下,最少减几次3. 思路: %3不为0的要先减2,然后%3为0的要先减大的(比如9 3 ...

  2. VC++2017关于项目出现"const char *" 类型的实参与 "char *" 类型的形参不兼容错误的解决方法

    C++项目中经常会定义如下形式的字符串: char *texts[] = { "1. Open Account", "2. To Deposit Money", ...

  3. jquery的scrollTop方法

    scrollTop方法设置或返回备选元素的垂直滚动条位置. 提示:当滚动条位于最顶部时,位置是0 当用于返回位置时: 该方法返回第一个匹配元素的滚动条的垂直位置 当用于设置位置时: 该方法设置所有匹配 ...

  4. ELK-全过程搭建

    环境说明:软件包我都 给你们放/usr/local/src/elk目录下安装目录都放在/usr/local/下数据都放在/data0/elk/目录下日志都放在/data0/logs/elk目录下系统 ...

  5. 7.bash作业控制

    7.作业控制本节讨论作业控制是什么.它怎么工作.以及 Bash 里面怎么使用这些功能7.1 作业控制基础作业控制是指有选择的停止(暂停)并在后来继续(恢复)执行某个进程的能力.通常,用户通过 Bash ...

  6. java——多线程知识点大总结

    1:理解线程的概念之前,我们有必要先理解一下进程的概念 程序(Program)是为实现特定目标或解决特定问题而用计算机语言(比如Java语言)编写的命令序列的集合. 进程指一个程序的一次执行过程   ...

  7. C#面向对象11 里氏转换

    里氏转换 1.子类可以赋值给父类. using System; using System.Collections.Generic; using System.Linq; using System.Te ...

  8. luogu P3645 [APIO2015]雅加达的摩天楼

    luogu 暴力? 暴力! 这个题有点像最短路,所以设\(f_{i,j}\)表示在\(i\)号楼,当前\(doge\)跳跃能力为\(j\)的最短步数,转移要么跳一步到\(f_{i+j,j}\)和\(f ...

  9. 通过javascript得到当前的日期和计算出该班级的平均分

    某班的成绩出来了,现在老师要把班级的成绩打印出来. 格式要求: 1.显示打印的日期. 格式为类似“XXXX年XX月XX日 星期X” 的当前的时间. 2.计算出该班级的平均分(保留整数). 同学成绩数据 ...

  10. TypeError: this.setDynamic is not a function

    启动项目npm run serve 报错 Module build failed (from ./node_modules/_babel-loader@8.0.6@babel-loader/lib/i ...