引入音频 引入视频

img图片引入标签
属性src指向图片路径
属性alt为图片不能正常显示时的替换文本
输入img按TAB键自动带出src和alt属性
属性width为引入图片设置宽度
属性height为引入图片设置高度
不设置则为图片默认尺寸
也可以设置为百分比 =图片宽度/显示器实际设置分辨率宽度
单位是像素PX

<img src="http://www.hebjinyi.com/data/upload/202204/20220407135817_854.png" alt="LOGO"width="600"height="120" />
<br />
<img src="http://www.hebjinyi.com/data/upload/202204/20220407135817_854.png" alt="LOGO"width="600" />
<br />
audio音频引入标签,
controls显示音频播放控件的属性
<audio src="music/海来阿木-不过人间.mp3"controls="controls"></audio>
conterols的属性值和属性一样,可以省略
实现自动播放需要添加autoplay属性,属性值与属性名相同
<audio src="music/海来阿木-不过人间.mp3" autoplay="autoplay"></audio>
loop属性实现音频循环播放
muted属性实现音频播放并静音
preload属性实现预加载音频并准备播放,若使用了aotoplay将不生效
<audio src="music/海来阿木-不过人间.mp3"controls="controls"loop="loop"preload="auto"></audio>
播放控件替换文本
因浏览器不兼容无法显示音频控件是以文本代替
<audio src="music/海来阿木-不过人间.mp3"controls="controls"loop="loop"preload="auto">您的浏览器不支持此音频</audio>
vidoe标签 用于引入视频 ,所用的的属性与audio基本相同
<video src="视频路径"controls="controls"autoplay="autoplay"loop="loop" preload="auto"></video>
src指向视频路径
controls显示视频控件
autoplay自动播放
loop循环播放
preload预加载准备播放(同样使用了autoplay将不生效)-->
视频控件窗口尺寸调整
width宽度 height高度 设置一个值将自动同比例调整
<video src="视频路径" controls="controls" width="600" ></video>
<!--poster属性 用于视频加载或点击播放是显示的图片广告
属性值为图片路径
<video src="视频路径"controls="controls"poster="图片路径"width="450"></video>

source标签用于video及audio定义媒介资源,以兼容所有的浏览器解析
src指向资源路径,type指定资源类型
当浏览器解析是自上而下选择可用的格式进行展示
<video width="800" >
<source src="myvideo.mp4" type="video/mp4"></source>
<source src="myvideo.ogv" type="video/ogg"></source>
<source src="myvideo.webm" type="video/webm"></source>
当前浏览器不支持 video直接播放</video>

posted @ 2022-04-20 16:47  hunxs  阅读(97)  评论(0)    收藏  举报