在Web站点中使用多媒体

作者: 陈老板_ | 来源:发表于2017-03-04 12:33 被阅读54次

    链接到多媒体文件

    把视频和音频文件纳入到Web站点中的最简单的选项是利用<a>标签简单的链接它。
    例如如下代码

    <a href="xxx.mov">click here </a>
    

    当用户单击click here时,将会从你的Web服务器把QuickTime视频文件xxx.mov传输到他或她的计算机上。

    嵌入多媒体文件

    HTML长时间以来都包含一个标准的<object>元素,用于在Web页面中嵌入多媒体文件。

    <object
      width="xxx"
      height="xxx"
      type="video/x-ms-wmv"
      data="pond.wmv"
    </object>
    

    与向Web页面中添加图像唯一真正的区别就是你在这里指定了文件类型(这里是video/x-ms-wmv)
    <object>元素的width和height属性确定了嵌入式播放器的大小。如果没有设置这些属性,一些浏览器会自动调整嵌入式播放器的大小,以适应内容。
    还有两个属性是显示合适的视频文件所必需的,它们是data属性和type属性,其中前者的值是想要播放的文件名(或者文件的URL),后者则用于标识要播放的媒体的类型。在这里是wmv文件,通过MIME类型指定。MIME类型是一个标识符,用于独特地标识Internet上的媒体对象的不同类型。MIME代表多用途国际邮件扩展。
    列举出你可能希望在Web页面中使用的几种流行的声音和视频格式的MIME类型。
    ·WAV Audio:audio/vnd.wave
    ·MP3 Audio:audio/mpeg
    ·MP4 Audio:audio/mp4
    ·WMV:video/x-ms-wmv
    ·MPEG Video:video/mpeg
    ·MPEG4 Video:video/mp4
    ·QuickTime:video/quicktime

    为音频和视频播放使用纯HTML5代码

    使用<audio>元素嵌入。

    <audio
      src="xxx.mp3"
      preload="auto"
      controls
      autoplay
      loop>
    </audio>
    

    在这里,src属性具有一个值,因为这是我想播放的音频文件的名称,除了src属性之外,我还将在这个<audio>元素中使用另外4个属性。
    preload:具有3个可能的值:none,auto,metadata。如果不希望缓冲文件,就使用none;如果要缓冲文件,可使用auto;如果希望只缓冲文件的元数据,则使用metadata。
    controls:如果存在,则显示用于音频播放器的控件。
    autoplay:如果存在,则一加载完文件就播放它。
    loop:如果存在,则继续重复播放文件,直到手动停止它为止。
    (要注意在<audio>元素内给用户包含一条信息,如果用户的浏览器不支持,那么他将看到<p></p>标签内的消息)
    使用HTML5<video>元素与使用<audio>元素相当类似。唯一真正改变是使用height和weigh属性定义被视频播放器和视频剪辑占据的空间。

    <video
      src="xxx.mov"
      preload="auto"
      width="320"
      height="240"
      controls
      autoplay
      loop>
    </video>
    

    preload,controls,autoplay和loop属性为<video>元素所做的事情与它们为<audio>元素所做的事情完全相同。

    相关文章

      网友评论

        本文标题:在Web站点中使用多媒体

        本文链接:https://www.haomeiwen.com/subject/mgndgttx.html