HTML5&CSS3

第八节:多媒体元素

2020-04-08  本文已影响0人  EndPein

多媒体元素

video 视频
audio 音频

video

默认情况是不显示播放控件的
controls:控制控件的显示,取值只能为controls
某些属性,只有两种状态 1、 不写,2、取值为属性名,这种属性叫做布尔属性
布尔属性,在HTML5中,可以不用书写属性值

    <video controls="controls" src="xxx.mp4"></video>
    <video controls src="xxx.mp4"></video>

autoplay:布尔属性,自动播放。

    <video controls autoplay src="xxx.mp4"></video>

不过有的浏览器是禁止自动播放的,因此也需要点击才可以播放,这个时候可以增加一个属性
muted:布尔属性,静音播放。

<video controls autoplay muted src="xxx.mp4"></video>

loop: 布尔属性,循环播放

<video controls autoplay muted loop src="xxx.mp4"></video>

audio 音频

和视频完全一致

<audio src="xxx.mp3" controls>xxx</audio>

也支持autoplay、loop等

兼容性

1、旧版本的浏览器不支持这2个元素,这两个元素是html5里面才有的
2、不同的浏览器支持的音视频格式可能不一致

        <video src="">
            <source src="xxx.mp4">
            <source src="xxx.webm">   
        </video>
        <video src="">
            <source src="xxx.mp4">
            <source src="xxx.webm">   
            <p>
                对不起你的浏览器不支持video元素,请点击这里下载最新版本的浏览器
            </p>
        </video>
上一篇下一篇

猜你喜欢

热点阅读