音频与视频标签—audio和video

controls属性

唯一可选值为controls,出现controls属性并准确赋值时,音频和视频的的播放控件将会显示,控件包括:播放、暂停、定位、音量、全屏切换、字幕(如果可用)、音轨(如果可用)

音频:<audio src="music.mp3" controls>您的浏览器不支持</audio> <--ogg格式的音频文件也可以-->

视频:<video src ="video.mp4" controls></video> <--ogg格式的视频文件也可以-->


autoplay属性

自动播放功能,出现autoplay属性时音频或视频文件就会自动播放

音频:<audio src="music.mp3" controls autoplay></audio>

视频:<video src="video.mp4" controls autoplay></video>


loop属性

循环播放功能,出现loop属性时音频或视频文件就会自动播放

音频:<audio src="music.mp3" controls loop></audio>

视频:<video src="video.mp4" controls loop></video>


preload属性

如果设置了autoplay、preload将会被忽略。

auto 当页面加载后载入整个音频/视频

meta 当页面加载后只载入元数据

none 当页面加载后不载入音频/视频


source属性

浏览器兼容属性,有些浏览器只兼容.mp3而不兼容.ogg格式,则可以使用source兼容浏览器写法,视频也是一样的

音频:<audio controls>

                       <source src="music.mp3" type="audio/mpeg">

                       <source src="music.ogg" type="audio/ogg">

           </audio>

视频:<video controls>

                        <source src="video.mp4" type="video/mp4">

                        <source src="video.ogg" type="video/ogg">

          </video>


muted属性

muted属性规定视频或者音频输出时是被静音的

<video src="video.mp4" controls muted>


video标签width、heigth属性

高度和宽度,一般只需要写一个,将视频播放器设置为固定的宽度或者高度。

<video src="video.mp4" controls width="500"></video>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值