HTML5中的多媒体标签的使用

目录

一、音、视频文件的格式

二、音、视屏标签的用法

1.音频标签的使用方法

2.视屏标签的使用方法

 三、滚动标签的使用方法

1.文字滚动

（1）direction属性的取值：

（2） behavior属性的取值：

2.图片滚动

---

一、音、视频文件的格式

音频支持格式	视屏支持格式
mp3	mp4：mpeg-4
wav	webM
ogg	ogg

二、音、视屏标签的用法

1.音频标签的使用方法

 <audio src="音频文件全名" controls></audio>

autoplay：是否自动播放（但是谷歌Chrome和苹果Safari等浏览器禁止自动播放，添加muted也不可以自动静音播放）
loop：循环播放

2.视屏标签的使用方法

<video src="视频文件全名" controls="controls"/></video>
autoplay：是否自动播放（但是谷歌Chrome和苹果Safari等浏览器禁止自动播放，可以添加muted可以自动静音播放）
loop：循环播放
preload：表示视频文件和页面同时加载。它和autoplay属性是互斥的
poster：在视频文件缓冲时显示的图像
 示例：
          

 <video controls  width="300" height="160" poster="../images/cd_img.jpg">
                <source src="../video/pian.mp4">
            </video>

效果如下：

       

 三、滚动标签的使用方法

1.文字滚动

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">文字</marquee>

（1）direction属性的取值：

        left：默认值,向左滚动
        right: 向右滚动
        up：向上滚动
        down：向下滚动

（2） behavior属性的取值：

scroll：默认值,循环滚动
slide：只滚动一次,不重复滚动
width、height：设置滚动范围

他的基本格式为：

<marquee behavior="" direction=""> 
        <h2>Genshin Impact</h2>
    </marquee>

效果如下:

可以观察到他会慢慢的滚到最左边然后再从右边开始滚动。

2.图片滚动

<marquee direction="滚动方向" behavior="滚动方式" scrollmount="滚动速度">
		     <img src=""/>
		   </marquee>

他的属性和文字滚动是一样的。可以滚动多张图片。

 <marquee behavior="" direction="">
        <div>
            <h2>猫猫</h2>
        <img src="../images/mao1 (1).jpg" alt="" width="300px">
        <img src="../images/mao1 (2).jpg" alt="" width="300px">
        <img src="../images/mao1 (3).jpg" alt="" width="300px">
        <img src="../images/mao1 (4).jpg" alt="" width="300px">
    </div>
    </marquee>

效果如下：