HTML5--detailed explanation of multimedia tags

The early Internet was mainly used to share academic results, but for ordinary people, they were more willing to share some more interesting content on it, such as video,audio , these technologies were not solved by the <a href="//m.sbmmt.com/wiki/1118.html" target="_blank"></a># web audio and video provided by the html tag<a href="//m.sbmmt.com/code/5011.html" target="_blank"></a> before

html5

Solution development

Although the early html did not provide tags to support video or audio playback, this does not affect people's desire to share

• Supported method 1:

• Use embed to directly insert the video into the page, and then you can use Windows Media Player,Apple QuickTimeor actual video player to create a playback window

• But this method is not controllable for the video itself. Compatibility issues cannot be taken into account

• ##Support method 2

##Use browser plug-ins, One is Microsoft's
• Silverlight

  , and the most commonly used Adobe Flash

• Flash

  not only completely solves the problem of browsing There are server support issues, and the installation rate is staggeringly high (basically 99% of computers have Flash player installed)

Using
• Flash

  except for In addition to learning Flash this technology itself, the more important thing is that iPhone, ipad does not support this technology

If you want to see how the video is played, move the mouse to the video window and right-click. If you can see text such as
• Flash

  , then the website uses the Flash plug-in

• Multimedia Tags:

##Html5
• In order to solve the problem use

  Flash Various issues of have introduced multimedia tags

  Due to video format issues, different browsers support different videos of the same format, and multiple copies of the video need to be prepared

• cannot provide a good protection effect for the played video, because the user can directly save the video file as

Summary:
Although the multimedia tags in
html5
• have various disadvantages, we still need to embrace this new technology because of its usage. It’s really very simple

audio tag

The description of

in

w3c is Such audio tag

Sample code 1:
The following demonstrates the simplest one How to use

• src: Audio address

• controls:Audio playback
Controller
autoplay
• :Autoplay
  loop:
loop

• ##poster :Specify the cover to be displayed when the video is not playing

• <audio src="song.ogg" controls="controls" autoplay loop>
  </audio>

  Copy after login

• src: Audio address

• Since audio formats are supported differently in different browsers, considering compatibility issues, we need to use the following code

• source: Specify multiple audios. If one is found that is supported by the current browser, it will be used directly. If all

  source
tag formats are not supported, the final text will be displayed. Content

• ##<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;audio controls=&quot;controls&quot;&gt; &lt;source src=&quot;song.ogg&quot; type=&quot;audio/ogg&quot;&gt; &lt;source src=&quot;song.mp3&quot; type=&quot;audio/mpeg&quot;&gt; 你的浏览器不支持此种格式 &lt;/audio&gt;</pre><div class="contentsignin">Copy after login</div></div>Video tag

tag is used to play videos, and the usage is the same as

The tags are very similar

Sample code 1:

• src: video address

• controls:Controller

• autoplay:Auto play

• loop:Loop

• width

  :Width

• height

  :Height

• <video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
  </video>

  Copy after login

Sample code 2:

• ##src:

  The address of the video

• Since video support is different in different browsers, considering compatibility issues, we need to use the following code

• source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video>

两种进度条

在html5之前如果我们想要使用进度条,可以通过一些前端框架,或者自己使用控件搭建出类似的外观,但是在html5中推出了两个进度条控件,接下来就让我们来看看如何使用它们

process

• 外观

• 如果只是定义该元素<progress><progress/>不设置任何内容,显示效果如下图

progress.gif

• 作用:

• 用来显示任务的进度(进程)

• 如果想要用来显示度量值(比如容量使用情况)请使用meter标签

• 属性:

• max: 总工作量

• value: 已完成工作量

• 兼容性:

• 为了保证显示效果,可以再progress标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容

meter

• 外观:

• 通过属性值的搭配能够显示出多重不同的变化

• 常见属性:

• high:规定较高的值

• low:规定较低的值

• max:规定最大值(可以超过,但是进度条已经满了)

• min:规定最小值

• value:规定度量的值

• 示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>