乐趣区

关于前端:04-HTML基础关于图片和视频你知道多少呢

摘要:在这篇文章,你将会看到在负责网页构造的 HTML 中如何插入图片和视频。非常适合初学者!大鹏一日同风起,扶摇直上九万里!一起学习,一起提高!


1.HTML 中的图片

HTML5 的 <figure><figcaption>为图片提供了一个语义容器,在题目和图片之间建设了清晰的分割。<figcaption>元素通知浏览器和其余辅助的技术工具这段阐明文字描述了 <figure> 元素的内容。<figure>能够是几张图片、一段代码、音视频、方程或表格等。

代码如下:

<figure>
  <img src="https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1"
   alt="《肖申克的救赎》海报"
   height="300">
  <figcaption> 故事产生在 1947 年,银行家安迪(Andy)被指控枪杀了妻子及其情人,安迪被判无期徒刑,这意味着他将在肖申克监狱中度过余生。</figcaption>
</figure>

效果图如下:
<figure>
<img src=”https://bkimg.cdn.bcebos.com/pic/8718367adab44aede658ce89b11c8701a18bfb4d?x-bce-process=image/resize,m_lfit,w_220,limit_1″
alt=”《肖申克的救赎》海报 ”
height=”300″>
<figcaption> 故事产生在 1947 年,银行家安迪(Andy)被指控枪杀了妻子及其情人,安迪被判无期徒刑,这意味着他将在肖申克监狱中度过余生。</figcaption>
</figure>

小结:如果图像对您的内容有意义,则应该应用 HTML 图像。若纯正是装璜,则应该应用 CSS 背景图片,能更好的管制图片和设置图片的地位。

2.HTML 中的视频和音频

先看代码:

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

成果如下(前提是你须要有该视频的资源方可关上视频):
<video src=”rabit320.webm” controls>
<p> 你的浏览器不反对 HTML5 视频,可点击此链接观看 </p>
</video>

  • 其中,src 指向你要嵌入到网页中的视频资源;controls 可管制回放以及音量性能。<video>标签内的内容叫后备内容,当浏览器不反对 <video> 的时候,就会显示这段内容。
  • 接下来,
    咱们把 src 从 <video>中移除,把它放在几个独自的 <source> 中,这样浏览器会先查看 <source>,并且播放第一个与其本身相匹配的媒体,你的视频该当包含 webm 和 mp4 两种格局,目前这两种格局曾经足够反对大多数平台和浏览器。<source> 中的 type属性可选,倡议加上,它蕴含了视频文件的 MIME types,同时会跳过那些不反对的格局。若你不加的话,浏览器会尝试加载每一个文件,直到找到一个正确的格局,这样会耗费大量的工夫和资源。
<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>

留神:<audio>用法简直与 <video>齐全一样。此处就不赘述了。

  • 再来看一个十分有意义的标签 <track>,它能够给听不懂音频的 / 不不便播放音频的 / 听觉有阻碍的人提供字幕。当然这就须要用到一个 WebVTT 文本格式,一个典型的 WebVTT 文件如下(这种文件的具体写法能够在查查相干材料,网上很多博客都有写到相干写法):

WEBVTT
1
00:00:22.230 –> 00:00:24.606
第一段字幕

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

  • 要以.vtt 后缀名保留文件;
  • <track>链接.vtt 文件,需放在 <audio><video>中,<source>之后,用 kind 指明是哪种类型 (eg:subtitles/captions/descriptions),用srclang 通知浏览器你应用的语言。
<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
  <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”>
<track kind=”subtitles” src=”subtitles_en.vtt” srclang=”en”>
<p> 你的浏览器不反对 HTML5 视频,可点击此链接观看 </p>
</video>

以上均是参考最权威的 MDN web docs,总结进去的比拟重要的知识点,与君共勉。不欠缺之处,评论区欢迎您!

退出移动版