audio–音频标签

标签属性
  • contrils:播放器的控制面板
  • autoplay:自动播放
  • loop:循环播放
  • src:文件地址
  • preload用来缓存大的文件其中有三个值可选
  • none:不缓存
  • auto:缓存(默认)
  • metadata:缓存文件元信息
  • 案例:
    <audio src="年少有为.mp3" controls autoplay loop>浏览器不支持该标签时,才显示这部分文字</audio>
    
    效果图:

    H5多媒体标签--视频video和音频audio

    video视频标签

    标签属性
  • src:表示文件地址
  • contrils:播放器的控制面板
  • autoplay:自动播放
  • loop:循环播放
  • width:宽度
  • height:高度
  • preload用来缓存大的文件其中有三个值可选
  • none:不缓存
  • auto:缓存(默认)
  • metadata:缓存文件元信息
  • poster:当前视频还没有完全下载,或者用户还没有点击播放前的默认显示封面。默认显示当前视频文件第一帧画面
  • 注意事项:当设置宽高的时候,一般情况下只会设置宽度或高度,让其等比例缩放。如果同时设置宽度和高度,那么视频并不会真正调整到设置的宽高。
  • 案例:
    <video src="李荣浩%20-%20年少有为.mp4" poster="1.jpg" controls width="800"></video>
    
    效果图:

    H5多媒体标签--视频video和音频audio

    重点说明source的使用

    因为不同浏览器支持的视频格式不一样,所以我们在进行视频添加的时候,需要考虑到浏览
    器是否支持。我们可以准备多个格式的视频文件,让浏览器自动选择

    <video>
        <source src="李荣浩%20-%20年少有为.mp4" type="video/mp4">
        <source src="李荣浩%20-%20年少有为.flv" type="video/flv">
        您的浏览器不支持当前的视频播放
    </video>
    
    浏览器视频格式兼容性参考图如下:

    H5多媒体标签--视频video和音频audio

    相关文章: