13518219792
网站建设资讯

NEWS

网站建设资讯

HTML5中多媒体标签的简介-创新互联

这篇“HTML5中多媒体标签的简介”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“HTML5中多媒体标签的简介”，小编整理了以下知识点，请大家跟着小编的步伐一步一步的慢慢理解，接下来就让我们进入主题吧。

成都创新互联-专业网站定制、快速模板网站建设、高性价比庐江网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式庐江网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖庐江地区。费用合理售后完善，10余年实体公司更值得信赖。

html有什么特点

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。  3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

早期的因特网主要用来分享学术成果,但是对普通民众而言,更愿意在上面分享一些更有趣的内容,比如视频,音频,这些技术在html5之前都不是由html标签提供的

网页音视频解决方案发展

虽然早期的html并没有提供支持视频或者音频播放的标签,但是这并不影响人们分享的欲望

  • 支持方式1:

    • 使用embed直接将视频塞入页面,然后就可以使用Windows Media Player,Apple QuickTime或者其实的视频播放器来创建播放窗口

    • 但是这种方式对于视频本身不可控,兼容性问题也无法顾及

  • 支持方式2

    • 使用浏览器插件,一个是微软的Silverlight,还有使用最普遍的Adobe Flash

    • Flash不但完全解决了浏览器支持问题,而且装机率之高让人咋舌(基本上99%的计算机都安装了Flash播放器)

    • 使用Flash播放视频除了要学习Flash这项技术本身以外,更关键的是在iPhone,ipad并不支持这项技术

    • 如果想要查看视频的播放方式,将鼠标移动到视频窗口,右键如果可以看到Flash等文字,那么该网站使用的就是Flash插件

  • 多媒体标签:

    • Html5为了解决使用Flash的各种问题推出了多媒体标签

    • 由于视频格式问题,不同的浏览器对于相同格式的视频支持不同,需要准备多份视频

    • 无法对播放的视频提供很好的保护效果,因为用户可以直接对视频文件另存为

  • 总结:

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

audio标签

在w3c中对于audio的说明是这样的audio标签

  • 示例代码1:

    • 下面演示一种最简单的使用方式

    • src:音频的地址

    • controls:音频播放控制器

    • autoplay:自动播放

    • loop:循环

    • poster:指定视频不播放时显示的封面

  • 示例代码2:

    • src:音频的地址

    • 由于音频格式在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码

    • source:指定多个音频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容


  
  
你的浏览器不支持此种格式

Video标签

Video标签用来播放视频,用法跟audio标签十分类似

  • 示例代码1:

    • src:视频地址

    • controls:控制器

    • autoplay:自动播放

    • loop:循环

    • width:宽度

    • height:高度

  • 示例代码2:

    • src:视频的地址

    • 由于视频在不同浏览器中支持情况不同,考虑兼容性问题,我们需要使用下述代码

    • source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的source标签格式都不支持,会显示最后的文本内容




你的浏览器不支持video标签

两种进度条

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

process

  • 外观

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

HTML5中多媒体标签的简介

progress.gif

  • 作用:

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

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

  • 属性:

    • max: 总工作量

    • value: 已完成工作量

  • 兼容性:

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

meter

  • 外观:

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

  • 常见属性:

    • high:规定较高的值

    • low:规定较低的值

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

    • min:规定最小值

    • value:规定度量的值

  • 示例代码:




    
    Title

  • 显示效果即截图

HTML5中多媒体标签的简介

meter.png

以上是“HTML5中多媒体标签的简介”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


网页标题：HTML5中多媒体标签的简介-创新互联
本文URL：http://cdweb.net/article/coeocp.html

其他资讯