美文网首页
HTML5新增的多媒体标签

HTML5新增的多媒体标签

作者: 八月飞花 | 来源:发表于2020-04-21 18:57 被阅读0次

    这两个标签分别是 video 和 audio

    audio音频标签

    属性
      src:播放路径
      controls:显示控制面板
      auto:自动播放:但是页面需要添加交互才能实现自动播放
      loop:循环
    

    video视频标签

    属性
      src:播放路径
      controls:显示控制面板
      auto:自动播放:但是页面需要添加交互才能实现自动播放
      loop:循环
      width:宽度
      height:高度
    设置宽高的时候,默认设置的宽度或高度中的一个生效,另一个虽然也生效,但是
      不会影响视频的画面,视频始终等比例
      poster:当视频还没有完全下载或者用户还没点击播放前的默认显示封面,默认
              显示当前视频文件的第一幅画面,可以是图片路径
    
    <video poster="路径"></video>
    

    由于受到不同浏览器支持视频文件不一样,需要考虑浏览器是否支持

    我们可以准备多个视频文件,让浏览器进行选择
    

    视频

    设置多个格式的视频,会逐一匹配,直到匹配到可以解析的文件
    <video>
     <source src="视频路径" type="video/编码格式1">
     <source src="视频路径" type="video/编码格式2">
     <source src="视频路径" type="video/编码格式3">
    </video>
    

    相关文章

      网友评论

          本文标题:HTML5新增的多媒体标签

          本文链接:https://www.haomeiwen.com/subject/ekupihtx.html