话说前端21-HTML5的音频和视频标签渐变和媒体查询

LearningYard学苑 06-25 209

前言：

此时我们对“html5的audio”都比较重视，你们都需要了解一些“html5的audio”的相关知识。那么小编同时在网络上搜集了一些关于“html5的audio””的相关知识，希望各位老铁们能喜欢，兄弟们快快来学习一下吧！

分享兴趣，传播快乐，增长见闻，留下美好！

亲爱的您，这里是LearningYard学苑。

今天小编为大家带来

欢迎您的访问。

Share interests, spread happiness, increase knowledge, and leave a good legacy!

Dear you, this is The LearningYard Academy.

Today Xiaobian brings it to you

Saturday shared the dominant ideas and theoretical characteristics of the | school of management science

Welcome to your visit.

在HTML5之前，要在页面嵌入音频视频，只能使用<object>和<embed>元素，这种嵌入方式不仅给Web前端开发带来了一定的困难，同时，用户在进行音频视频播放的时候，必须要安装浏览器插件才能播放音频，这样就不方便用户的使用。

Before HTML5, only < object > and < embed > elements could be used to embed audio and video on a page. This embedding method not only brings some difficulties to the development of Web front-end, but also makes it inconvenient for users to install browser plug-ins to play audio when playing audio and video.

所以在HTML5中，新增了两个元素：audio元素和video元素，其中audio元素专门用来播放网络上的音频数据，而video元素专门用来播放网络上的视频或电影。使用这两个元素，就不需要使用其他的插件了，只要支持HTML5的浏览器即可。同时，在开发的时候，也不再需要object元素和embed元素编写复杂的代码了

Therefore, in HTML5, two new elements are added: audio element and video element, in which audio element is dedicated to playing audio data on the network, while video element is dedicated to playing videos or movies on the network. With these two elements, you don't need to use other plug-ins, just a browser that supports HTML5. At the same time, during the development, it is no longer necessary to write complex code with object element and embed element.

Audio语义：

<audio>

您的浏览器不支持audio

</audio>

Audio semantics:

<! -The compilers that browsers can support are inconsistent. To ensure that an audio can be supported by all browsers that support HTML5 at the same time, you can specify multiple sources for the same audio through the < source > element->

<audio>

Your browser does not support audio

</audio>

Vedio语义：

<video>

您的浏览器不支持audio

</video>

Vedio semantics:

<! -The compilers that browsers can support are inconsistent. To ensure that a video can be supported by all browsers that support HTML5 at the same time, you can specify multiple sources for the same video through the < source > element->

< video src="./source/ The wind above you plays and sings 1.mp4 "controls =" controls "> </video >

<video>

Your browser does not support audio

</video>

渐变：

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。使用background-image属性来设置渐变属性

渐变的类型可分为两种:

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角的方向

径向渐变（Radial Gradients）- 由它们的中心定义

（注意:一个线性渐变，你必须至少定义两种颜色节点)

Gradient:

CSS3 gradients allow you to show a smooth transition between two or more specified colors. Use the background-image property to set the gradient property.

There are two types of gradients:

Linear Gradients)- Down/Up/Left/Right/Diagonal direction

Radial gradients—defined by their centers.

(Note: for a linear gradient, you must define at least two color nodes)今天的分享就到这里了。

如果您对今天的文章有独特的想法，

欢迎给我们留言，

让我们相约明天，

祝您今天过得开心快乐！

That's it for today's sharing.

If you have a unique idea about today’s article,

Welcome to leave us a message,

Let us meet tomorrow