在HTML中如何设置音频和视频?

目录

  • ‍1、音频标签(audio)
  • ‍2、视频标签(video)

HTML 引入原生态的多媒体支持,可在浏览器中直接播放音频和视频文件,不需要借助视频插件播放音频和视频。

‍1、音频标签(audio)

audio 标签的主要属性如下:

属性 作用
src URL 音频文件的 URL,必填
controls controls 音频就绪后包含播放/暂停按钮的控件
autoplay autoplay 音频就绪后自动播放
loop loop 每当音频结束时重新开始循环播放
muted muted 静音
 1、src指的是音频地址

 2、autoplay需要设置muted之后才生效。

例如:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<audio src="音频路径" controls="controls" autoplay="autoplay" loop="loop">audio>
body>
html>

运行结果:
在HTML中如何设置音频和视频?_第1张图片

‍2、视频标签(video)

成对标签 用来在页面的视频播放,支持MP4、webm 和 ogg 三个视频格式; video 标签具有 src、controls、autoplay 和 loop 等属性,其含义跟 audio 标签属性相同。

属性
src 要播放的视频的 URL
autoplay 自动播放
controls 显示控件,比如播放按钮
loop 循环播放
muted 输出被静音
preload 页面加载的时候,自动预加载资源
height 设置播放器高度
width 设置播放器宽度
poster 视频封面
 1、src指的是视频地址

 2、autoplay需要设置muted之后才生效。

 3、height与width设置后视频并不会拉伸,而是会自动调整大小

 4、preload指的是:当前视频会默认下载到内存,不管你点不点即播放

 5、poster用于设置视频封面

例如:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<video src="视频路径" autoplay="autoplay" controls="controls" loop="loop">video>
body>
html>

运行结果:
在HTML中如何设置音频和视频?_第2张图片

你可能感兴趣的:(html,音视频,前端)