HTML5--멀티미디어 태그에 대한 자세한 설명-H5 튜토리얼-php.cn

웹 오디오 및 비디오 솔루션 개발

进度条" >两种进度条

process

meter

总结

집

웹 프론트엔드

H5 튜토리얼

HTML5--멀티미디어 태그에 대한 자세한 설명

零下一度

May 08, 2017 pm 01:46 PM

초기 인터넷은 주로 학업 결과를 공유하는 데 사용되었지만 일반 사람들에게는 视频, 音频과 같은 좀 더 흥미로운 콘텐츠를 공유하려는 의지가 더 컸습니다. 이러한 기술은 <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

오디오 태그

in
w3c for 설명은 다음과 같습니다. 오디오 태그 audio

샘플 코드 1:

다음 데모는 이를 사용하는 가장 간단한 방법 중 하나입니다
src: 오디오 주소
컨트롤: 오디오 재생
컨트롤러
자동 재생:자동 재생
루프:
루프
포스터: 영상이 재생되지 않을 때 표시할 표지 지정

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

로그인 후 복사

샘플 코드 2:

src: 오디오 주소
오디오 형식은 국가마다 다르게 지원되므로 브라우저에서는 호환성 문제를 고려하여 다음 코드를 사용해야 합니다.
소스: 현재 브라우저에서 지원하는 오디오가 발견되면 직접 사용됩니다. 모든
태그 형식은 지원되지 않습니다. 최종 텍스트 내용은 source

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

로그인 후 복사

동영상 태그

태그가 표시됩니다. 사용법은 Video 태그audio

샘플 코드 1:

src: 비디오 주소
컨트롤: 컨트롤러
autoplay: 자동 재생
루프: 루프
너비: 너비
높이: 높이

<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中推出了两个进度条控件,接下来就让我们来看看如何使用它们

process

外观

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

HTML5--멀티미디어 태그에 대한 자세한 설명

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>

로그인 후 복사