CSS的多媒体嵌入

最新推荐文章于 2024-07-07 07:24:46 发布

程序员的客栈

最新推荐文章于 2024-07-07 07:24:46 发布

阅读量967

点赞数 22

文章标签： css 数据库前端

本文链接：https://blog.csdn.net/cmHuney/article/details/135767038

版权

图片：

<div class="figure">
  <img
    src="https://img1.baidu.com/it/u=876548659,803197528&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706115600&t=946c7ab644d20f2e83c18c139a2e33fe"
    alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
    width="400"
    height="341"
    title="恐龙恐龙恐龙恐龙" />
  <p>这是一个恐龙</p>
</div>

alt属性，对图片的文字描述，用于在图片无法显示或不能被看到的情况。

title属性，鼠标放到图片上时显示的内容

结果展示：

HTML5 的 <figure>和 <figcaption>元素，可以为图片提供一个语义容器，在标题和图片之间建立清晰的关联。

<figure>
  <img
    src="https://img1.baidu.com/it/u=876548659,803197528&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706115600&t=946c7ab644d20f2e83c18c139a2e33fe"
    alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
    width="400"
    height="341"
    title="恐龙恐龙恐龙恐龙" />
  <figcaption>这是一个恐龙</figcaption>
</figure>

背景图片：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
 <style>
        p {
        background-image: url("images/1.jpg");
        width: 250px;
        height: 300px;
      }
    </style>
</head>
<body>
  <div>
    <img
      src="https://img1.baidu.com/it/u=876548659,803197528&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706115600&t=946c7ab644d20f2e83c18c139a2e33fe"
      alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。"
      width="400"
      height="341"
      title="恐龙恐龙恐龙恐龙" />
    <p>这是一个恐龙</p>
    
  </div>
</body>
</html>

结果展示：

视频和音频：

1.video标签

<style>
  video{
       width: 300px;
       height: 300px;
       }
 </style>

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

src 属性指向你想要嵌入网页当中的视频资源

controls：用户必须能够控制视频和音频的回放功能。

<p> 标签内的内容：后备内容 ，当浏览器不支持 <video> 标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。

结果展示：

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

浏览器将会检查 <source> 标签，并且播放第一个与其自身 codec 相匹配的媒体。你的视频应当包括 WebM 和 MP4 两种格式，这两种在目前已经足够支持大多数平台和浏览器。

每个 <source> 标签页含有一个 type 属性，这个属性是可选的，但是建议你添加上这个属性 — 它包含了视频文件的MIME types，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  poster="poster.png">
  <source src="1.mp4" type="video/mp4" />
  <source src="1.webm" type="video/webm" />
  <p>
    你的浏览器不支持 HTML5 视频。可点击<a href="1.mp4">此链接</a>观看
  </p>
</video>

①autoplay：

这个属性会使音频和视频内容立即播放，即使页面的其他部分还没有加载完全。建议不要应用这个属性在你的网站上，因为用户们会比较反感自动播放的媒体文件。

②loop：

这个属性可以让音频或者视频文件循环播放。同样不建议使用，除非有必要。

③muted：

这个属性会导致媒体播放时，默认关闭声音。

④poster：

这个属性指向了一个图像的 URL，这个图像会在视频播放前显示。通常用于粗略的预览或者广告。

⑤preload：

这个属性被用来缓冲较大的文件，有 3 个值可选：

"none" ：不缓冲
"auto" ：页面加载后缓存媒体文件
"metadata" ：仅缓冲文件的元数据

2.audio标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <audio controls>
          <source src="audio/1.mp3" type="audio/mp3" />
          <source src="audio/1.ogg" type="audio/ogg" />
          <p>你的浏览器不支持 HTML5 音频，可点击<a href="audio/1.mp3">此链接</a>收听。</p>
      </audio>
</body>
</html>

结果展示：

与 <video> 的差异如下：

<audio> 标签不支持 width / height 属性，由于没有视觉部件，也就没有可以设置 width/height 的内容。
同时也不支持 poster 属性，因为没有视觉部件。

除此之外，<audio> 标签支持所有 <video> 标签拥有的特性

重新播放媒体

任何时候，你都可以在 Javascript 中调用 load() 方法来重置媒体。如果有多个由 <source> 标签指定的媒体来源，浏览器会从选择媒体来源开始重新加载媒体。

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

音轨增删事件

你可以监控媒体元素中的音频轨道，当音轨被添加或删除时，你可以通过监听相关事件来侦测到。具体来说，通过监听 AudioTrackList(en-US)对象的 addtrack 事件（即 HTMLMediaElement.audioTracks对象），你可以及时对音轨的增加做出响应。

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

以 .vtt 后缀名保存文件。
用 <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>

subtitles：

通过添加翻译字幕，来帮助那些听不懂外国语言的人们理解音频当中的内容。

captions：

同步翻译对白，或是描述一些有重要信息的声音，来帮助那些不能听音频的人们理解音频中的内
容。

timed descriptions：

将文字转换为音频，用于服务那些有视觉障碍的人。