HTML5音视频

  这里只介绍HTML5在音视频部分新添加的标签的基本用法,其中的API另用一篇随笔写

 

视频

video标签

基本信息

  video标签是HTML5新添加的标签,用来放视频文件,其中可以支持的文件格式包括mp4webmogv

  作为标签,video内部可添加文字,这些文字只有在不支持video标签/不支持视频格式的时候显示

浏览器支持

  各大主流浏览器中,FirefoxChrome支持以上三种文件格式的视频,只是控制菜单有些不同

  safari只认mp4

  IE8及以下不支持video标签,以上的只认mp4

常用属性

  src:视频的路径,最重要的属性,必需

  controls:视频播放的控制台,如果缺失只有视频的第一帧,必需

  width/height:视频的长宽,必须是按照源文件的大小等比例缩放,如果同时设置,只会让播放器宽高拉伸,而视频内容始终在中心

  autoplay:设置视频是否自动播放,Chrome下必需点击播放的按钮才可播放

  loop:设置视频是否在播放结束后自动从头重新播放

  poster:视频刚加载未播放时显示的图片,也是设置一个图片,否则停在视频第一帧,中途暂停或者倒回到开头无效

  muted:设置视频播放是否为静音,这个属性同autoplay同时存在时,可以解决Chrome无法自动播放的bug

 

source标签

  source标签可定义在video内部,可添加src属性,同样也表示视频文件的路径,但video里的src属性优先度高于source的

  如果第一个标签的视频播放失败,继续看下一个source标签的视频是否可以正常播放,直至最后一个

posted @ 2019-09-09 15:20  且听风吟720  阅读(139)  评论(0编辑  收藏  举报