【前端】HTML多媒体嵌入

StatisticsLittleFish
173 阅读5分钟

1. HTML中的图片

基本使用方式

<img src="dinosaur.jpg">

<img src="images/dinosaur.jpg">

<img src="https://www.example.com/images/dinosaur.jpg">  
<!-- 不推荐 -->

备选文本

<img src="images/dinosaur.jpg"
     alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth">

宽度和高度

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">

图片标题

<img src="images/dinosaur.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341"
     title="A T-Rex on display in the Manchester University Museum">

为图片搭配说明文字

<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
     width="400"
     height="341">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

<figure> 可以是几张图片、一段代码、音视频、方程、表格或别的。

CSS背景图片

为页面中的所有段落设置一个背景图片：

p {
  background-image: url("images/dinosaur.jpg");
}

如果图像对您的内容里有意义，则应使用 HTML 图像。如果图像纯粹是装饰，则应使用 CSS 背景图片。

2. 视频和音频内容

vedio元素

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
  • width 和 height 视频会保持它原始的长宽比 — 也叫做纵横比。。
  • autoplay 使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。
  • loop 让音频或者视频文件循环播放。
  • muted 媒体播放时，默认关闭声音。
  • poster 这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。
  • preload 缓冲较大的文件，有 3 个值可选：
    • none ：不缓冲
    • auto ：页面加载后缓存媒体文件
    • metadata ：仅缓冲文件的元数据

audio标签

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

不支持 width height poster属性

重新播放媒体

const mediaElem = document.getElementById("my-media-element");
mediaElem.load();

音轨增删事件

const mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
  audioTrackAdded(event.track);
}

显示音轨文本

WebVTT 是一个格式，用来编写文本文件，这个文本文件包含了众多的字符串，这些字符串会带有一些元数据，它们可以用来描述这个字符串将会在视频中显示的时间，甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做 cues ，你可以根据不同的需求来显示不同的样式，最常见的如下：

  • subtitles 通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。
  • captions 同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内容。
  • timed descriptions 将文字转换为音频，用于服务那些有视觉障碍的人。

一个典型的 WebVTT 文件如下：

1
00:00:22.230 --> 00:00:24.606
第一段字幕

2
00:00:30.739 --> 00:00:34.074
第二段

  ...

让其与 HTML 媒体一起显示，你需要做如下工作：

  1. 以 .vtt 后缀名保存文件。
  2. 用 <track> 标签链接 .vtt 文件， <track> 标签需放在 <audio> 或 <video> 标签当中，同时需要放在所有 <source> 标签之后。使用 kind 属性来指明是哪一种类型，如 subtitles、captions、descriptions。然后，使用 srclang 来告诉浏览器你是用什么语言来编写的 subtitles。
<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

3. 从对象到iframe

iframe详解

<iframe src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1" 		   scrolling="no" 
        border="0" 
        frameborder="no" 
        framespacing="0" 
        allowfullscreen="true"> 
</iframe> 
<p>改革春风吹满地</p>

<iframe src="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
      <a href="https://player.bilibili.com/player.html?aid=19390801&cid=31621681&page=1">
    	Fallback link for browsers that don't support iframes
      </a> 
  </p>
</iframe>

<iframe>基本要素：

  • allowfullscreen 可以通过全屏 API设置为全屏模式（稍微超出本文的范围）。

  • frameborder 如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在CSS 中可以更好地实现相同的效果。

  • src 包含指向要嵌入文档的 URL 路径。

  • width 和 height 这些属性指定您想要的 iframe 的宽度和高度。

  • 备选内容 如果浏览器不支持<iframe>，将会显示备选内容。

  • sandbox 该属性可以提高安全性设置。

embed元素

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

object元素

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can 
      <a href="myfile.pdf">download the PDF file.</a>
  </p>
</object>

4. 在网页中添加矢量图形

什么是矢量图形？

在网上，你会和两种类型的图片打交道 — 位图和矢量图：

  • 位图使用像素网格来定义 — 一个位图文件精确得包含了每个像素的位置和它的色彩信息。流行的位图格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), 和 GIF (.gif.)
  • 矢量图使用算法来定义 — 一个矢量图文件包含了图形和路径的定义，电脑可以根据这些定义计算出当它们在屏幕上渲染时应该呈现的样子。 SVG 格式可以让我们创造用于 Web 的精彩的矢量图形。

放大，PNG 图片变得像素化了，因为它存储是每个像素的颜色和位置信息 — 当它被放大时，每个像素就被放大以填满屏幕上更多的像素，所以图像就会开始变得马赛克。

矢量图像看起来仍然效果很好且清晰，因为无论它的尺寸如何，都使用算法来计算出图像的形状，仅仅是根据放大的倍数来调整算法中的值。

此外，矢量图形相较于同样的位图，通常拥有更小的体积，因为它们仅需储存少量的算法，而不是逐个储存每个像素的信息。

SVG是什么？

SVG 是用于描述矢量图像的XML语言。

以下代码创建一个圆和一个矩形：

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

将SVG添加到页面

快捷方式<img>

<img
    src="equilateral.svg"
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

如何在HTML中引入SVG代码

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

如何使用iframe嵌入SVG

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

SVG 元素参考

5. 响应式图片

分辨率切换：不同的尺寸

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

分辨率切换：相同的尺寸，不同的分辨率

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

美术设计

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
avatar
文章
阅读
粉丝