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 asvideo,audio, these technologies were not solved by the# web audio and video provided by thehtml tag before

html5

Solution development

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

• Supported method 1:

• Useembedto directly insert the video into the page, and then you can useWindows 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 usedAdobe 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 learningFlashthis technology itself, the more important thing is thatiPhone,ipaddoes 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

• MultimediaTags:

##Html5
• In order to solve the problem use

  Flash Various issues ofhave 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

w3cis 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

• 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

• ##

  <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> 你的浏览器不支持此种格式 </audio>

  Copy after login
  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

• 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标签格式都不支持,会显示最后的文本内容

两种进度条

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

process

• 外观

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

progress.gif

• 作用:

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

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

• 属性:

• max:总工作量

• value:已完成工作量

• 兼容性:

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

meter

• 外观:

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

• 常见属性:

• high:规定较高的值

• low:规定较低的值

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

• min:规定最小值

• value:规定度量的值

• 示例代码: