码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-09-17 21:47:26      阅读:43      评论:0      收藏:0      [点我收藏+]

标签:图像   type   play   像素   工作   音频播放   cimage   display   music   

视频

<video> 元素用来嵌入一段视频

<!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 当浏览器不支持<video>标签的时候,就会显示这段内容

音频

<audio> 标签,使用的方法几乎与上面的<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:定义了一组媒体条件,什么样的尺寸

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

标签:图像   type   play   像素   工作   音频播放   cimage   display   music   

原文地址:https://www.cnblogs.com/yiluotalk/p/13650782.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!