• <video>和<audio>标签,对视频和音频的支持


    H5新增了<video>和<audio>标签,提供对视频和音频的支持

      <audio>的属性与<video>属性相同

    <video>

      video之间识别多个source标签,可以链接不同的视频资源,浏览器取最近的一个可识别的视频资源:(比如Safari只识别MP4,所以Safari取的是第二个source标签)

    <video width="240" height="320" controls="controls" autoplay="autoplay" loop="loop" poster="xx.jpg">
        <source src="xx.ogg" type="video/ogg">
        <srouce src="xx.mp4" type="video/mp4">
    Your browser doesn't support <video> tag. <video>

       设置视频显示的宽度

      height: 设置视频显示的高度

      controls: 用于控制视频的播放、暂停、音量等的显示

      autoplay: 视频就绪后,就直接播放

      loop: 控制视频是否能循环播放

      poster: 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。

      muted: 规定视频被静音

      preload: 页面加载的时候,视频同时也加载,并预备播放。但是当有autoplay参数时,忽略该参数

      src: 视频资源链接

      type: 视频类型

      

      提示:可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    视频格式

      当前,video 元素支持三种视频格式:

    格式IEFirefoxOperaChromeSafari
    Ogg No 3.5+ 10.5+ 5.0+ No
    MPEG 4 9.0+ No No 5.0+ 3.0+
    WebM No 4.0+ 10.6+ 6.0+ No

      Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

      MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

      WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

    音频格式

      当前,audio 元素支持三种音频格式:

     IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
    Ogg Vorbis    
    MP3    
    Wav    
  • 相关阅读:
    构建一个真实的应用电子商务SportsStore3
    关于计算程序运行时间的方法汇总
    系统分析员备考之CMM篇
    大数据时代的技术hive:hive的数据类型和数据模型
    图片滚动图片的效果
    React初探
    所有的分页查询一览及数据导出(easyui + knouckoutjs + mvc4.0)
    golang微信公众平台之人脸识别
    测试rest接口的两个工具使用详解(restclient+soapUI)
    Linux系统服务基础
  • 原文地址:https://www.cnblogs.com/rachel-pzl/p/6273326.html
Copyright © 2020-2023  润新知