초기 인터넷은 주로 학업 결과를 공유하는 데 사용되었지만 일반 사람들에게는
视频
,音频
과 같은 좀 더 흥미로운 콘텐츠를 공유하려는 의지가 더 컸습니다. 이러한 기술은<a href="http://www.php.cn/wiki/1118.html" target="_blank">html5</a>
그 어느 것도<a href="http://www.php.cn/code/5011.html" target="_blank">html标签</a>
초기
html
에서는 비디오나 비디오를 지원하는 태그를 제공하지 않았지만 오디오 재생, 이는 사람들의 공유 욕구에 영향을 미치지 않습니다.
지원 방법 1:
embed
을 이용해 페이지에 직접 영상을 삽입한 후 Windows Media Player
, Apple QuickTime
또는 실제 비디오 플레이어를 이용하여 재생창
을 만들 수 있는데, 이는 방법이 영상 자체에 적합하지 않습니다. 제어, 호환성 문제를 고려할 수 없습니다
지원 방법 2
브라우저 플러그인을 사용하세요. 그 중 하나는 Microsoft의 Silverlight
이며 가장 일반적으로 사용되는 Adobe Flash
Flash
은 브라우저 지원을 완전히 해결할 뿐만 아니라 문제인데 설치율도 놀라울 정도로 높네요 와우 (기본적으로 99%의 컴퓨터에 Flash Player가 설치되어 있습니다)
Flash
를 이용해 영상을 재생할 때 기술 자체를 익히는 것 외에, 더 중요한 것은 Flash
, iPhone
이 기술을 지원하지 않는다는 것입니다ipad
등이 보이면 클릭하세요. 텍스트가 보이면 클릭하세요. 웹사이트는 Flash 플러그인 Flash
멀티미디어 를 사용합니다. 태그:
Html5
이용에 따른 다양한 문제를 해결하기 위해 멀티미디어 태그 Flash
요약:
에는 다양한 단점이 있지만 여전히 이 새로운 기술을 수용해야 합니다. 기술은 사용법이 매우 간단합니다html5
inw3c for 설명은 다음과 같습니다. 오디오 태그
audio
샘플 코드 1:
자동 재생:자동 재생
<audio src="song.ogg" controls="controls" autoplay loop> </audio>
샘플 코드 2:
태그 형식은 지원되지 않습니다. 최종 텍스트 내용은 source
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> 你的浏览器不支持此种格式 </audio>동영상 태그
태그가 표시됩니다. 사용법은
Video
태그audio
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px"> </video>
샘플 코드 2:
src:동영상 주소
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中推出了两个进度条控件,接下来就让我们来看看如何使用它们
外观
如果只是定义该元素6ecb87e5318a36c03c59e25d55f43372286eadbea6fb8620b27b0583d75aaab6
不设置任何内容,显示效果如下图
作用:
用来显示任务的进度(进程)
如果想要用来显示度量值
(比如容量使用情况)请使用meter
标签
属性:
max: 总工作量
value: 已完成工作量
兼容性:
为了保证显示效果,可以再progress
标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容
外观:
通过属性值的搭配能够显示出多重不同的变化
常见属性:
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>
显示效果即截图
两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要
结合实际情况
决定是否使用它们(或者是使用对应的前端框架)。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
위 내용은 HTML5--멀티미디어 태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!