HTML基础9--视频音频及矢量图

最新推荐文章于 2023-06-20 00:35:01 发布

伊洛的小屋

最新推荐文章于 2023-06-20 00:35:01 发布

阅读量246

点赞数

分类专栏： HTML基础文章标签： css python html javascript java

本文链接：https://blog.csdn.net/weixin_44386231/article/details/108531229

版权

HTML基础专栏收录该内容

11 篇文章 2 订阅

订阅专栏

本文介绍了HTML5中关于视频、音频的使用方法，包括`<video>`和`<audio>`标签的属性，如src、controls。还探讨了矢量图的优势，特别是SVG在保持高质量缩放方面的特性，并展示了如何将SVG嵌入页面。此外，文章提到了自适应图片的重要性和新属性srcset与sizes在响应式设计中的应用。

摘要由CSDN通过智能技术生成

本文首发公众号：伊洛的小屋，欢迎关注并查看更多内容！！！

视频

元素用来嵌入一段视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo</title>
</head>
<body>
<video src="land.mov" controls></video>
<p>欢迎观看航拍视频</p>

</body>
</html>

打开浏览器播放视频

src 属性指向你想要嵌入网页当中的视频资源
controls 控制视频和音频的回放功能
video 当浏览器不支持标签的时候，就会显示这段内容

音频

标签，使用的方法几乎与上面的完全的相同

公众号：伊洛的小屋
个人主页：https://yiluotalk.com/
博客园：https://www.cnblogs.com/yiluotalk/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
<audio controls>
  <source src="music.mp3" type="audio/mp3"></audio>
  <p>这是一首简单的小情歌</p>
</body>
</html>

打开浏览器听音频

音频播放器所占用的空间比视频播放器要小，标签支持所有标签拥有的特性

矢量图形

拥有较小的文件尺寸，高度可以缩放，不会在镜头拉进或者放大时像素化
位图：用像素网格定义
矢量图：算法定义

SVG

用于描述矢量图的XML语言，需要用不同的元素定义要显示在图像中的形状
优点：矢量图像中的文本仍然可访问

SVG添加到页面

要通过 <img>元素嵌入SVG

自适应图片

可以在不同的屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片
比如在手机上查看页面的时候，一些图片的显示就可能存在问题

新属性

srcset和sizes

<img srcset="320w.jpg 320w,
             480w.jpg 480w,
             800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="800w.jpg" alt="display">

srcset:定义允许浏览器选择的图像集
sizes:定义了一组媒体条件，什么样的尺寸
关注公众号获取更多内容