0
点赞
收藏
分享

微信扫一扫

HTML5之多媒体标签

两岁时就很帅 2021-09-28 阅读 67

网页音视频解决方案发展

  • 支持方式1:

    • 使用embed直接将视频塞入页面,然后就可以使用Windows Media Player,Apple QuickTime或者其实的视频播放器来创建播放窗口
    • 但是这种方式对于视频本身不可控,兼容性问题也无法顾及
  • 支持方式2

    • 使用浏览器插件,一个是微软的Silverlight,还有使用最普遍的Adobe Flash
    • Flash不但完全解决了浏览器支持问题,而且装机率之高让人咋舌(基本上99%的计算机都安装了Flash播放器)
    • 使用Flash播放视频除了要学习Flash这项技术本身以外,更关键的是在iPhone,ipad并不支持这项技术
    • 如果想要查看视频的播放方式,将鼠标移动到视频窗口,右键如果可以看到Flash等文字,那么该网站使用的就是Flash插件
  • 多媒体标签:

    • Html5为了解决使用Flash的各种问题推出了多媒体标签
    • 由于视频格式问题,不同的浏览器对于相同格式的视频支持不同,需要准备多份视频
    • 无法对播放的视频提供很好的保护效果,因为用户可以直接对视频文件另存为
  • 总结:

    • 虽然html5中的多媒体标签有各种不好,但我们还是需要拥抱这项新的技术,因为他的用法,真的十分简单

audio标签

  • 示例代码1:
    • 下面演示一种最简单的使用方式
    • src:音频的地址
    • controls:音频播放控制器
    • autoplay:自动播放
    • loop:循环
    • poster:指定视频不播放时显示的封面
<audio src="song.ogg" controls="controls" autoplay loop>
</audio>
  • 示例代码2:
    • 由于音频格式在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码
    • source:指定多个音频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容
      • src:音频的地址
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持此种格式
</audio>

Video标签

  • 示例代码1:
    • src:视频地址
    • controls:控制器
    • autoplay:自动播放
    • loop:循环
    • width:宽度
    • height:高度
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
</video>
  • 示例代码2:
    • 由于视频在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码
    • source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容
      • src:视频的地址
 <video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
你的浏览器不支持video标签
</video> 

两种进度条

process

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

    • 用来显示任务的进度(进程)
    • 如果想要用来显示度量值(比如容量使用情况)请使用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>
  • 显示效果即截图

总结

举报

相关推荐

0 条评论