欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5多媒体标签和视频标签

程序员文章站 2022-05-11 08:14:36
...

HTML5多媒体标签和视频标签

  1. 多媒体标签
    音频标签 <audio src="文件地址" controls="controls"></audio>
    支持格式有限,主要支持三种格式
    1.Ogg Vorbis(常用)
    2.MP3(常用)
    3.Wav
    属性:
    1.autoplay=“autopaly”(音频在就绪后马上播放,谷歌浏览器禁用了自动播放)
    2.controls=“controls”(向用户显示控件,比如播放按钮,不同浏览器显示控件不同)
    3.loop=“loop”(音频结束时重新开始播放)
    4.src=""(要播放的文件名)
    因为不同浏览器支持不同格式,我们需要为这个音频准备多个格式
<audio controls="controls">
            <source src="happy.mp3" type="audio/mpeg">
            <source src="happy.ogg" type="audio/ogg">
            您的浏览器不支持audio标签
</audio> 
  1. 视频标签
    视频标签 video
    格式:
    1.Ogg(常用)
    2.MPEG 4(常用)
    3.WebM
    解决兼容性:
<video controls="controls">
            <source src="move.ogg" type="video/agg">
            <source src="move.mp4" type="video/mp4">
            您的浏览器不支持video标签
</video>

常见属性:

autoplay=“autoplay”(自动播放,谷歌禁止自动播放,需添加muted=“muted”(静音播放)属性才能自动播放)
controls=“controls”(显示播放控件)
width="…px"(播放器宽度)
height="…px"(播放器高度)
loop=“loop”(循环播放)
preload=“proload”(是否等加载完再播放)
src=“url”(视频地址)
poster=“imgurl”(加载等待的画面图片)
muted=“muted”(静音播放)