>  기사  >  웹 프론트엔드  >  HTML5--멀티미디어 태그에 대한 자세한 설명

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

零下一度
零下一度원래의
2017-05-08 13:46:343658검색

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

  • 外观

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

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>
  • 显示效果即截图

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

meter.png

总结

两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

위 내용은 HTML5--멀티미디어 태그에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.