• HTML的多媒体属性


    ㈠什么是多媒体?

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

    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="多媒体的高度" />

  • 相关阅读:
    gdbinit理解
    debug套路
    node 版本升级
    工作方式
    vscode 插件编写
    函数闭包与装饰器
    高阶函数与递归
    函数嵌套及作用域
    函数
    文件处理
  • 原文地址:https://www.cnblogs.com/shihaiying/p/11835797.html
Copyright © 2020-2023  润新知