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

目录

  • 1.设置音频:
  • 2.设置视频:

前言

当今互联网上的内容不仅限于文字和图片,也包括音频和视频。在网页中设置音频和视频不仅可以让网站更加生动,也可以增强用户的互动体验。本文将介绍如何在 HTML 中设置音频视频

1.设置音频:

使用<audio>元素可以嵌入音频文件,例如MP3、WAV等格式的音频文件。可以通过设置src属性指定音频文件的路径或URL,通过设置controls属性显示播放器控件,如播放/暂停按钮、音量控制等。

音频属性:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放,必须与muted属性联合使用才有效果
controls controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)
loop loop 如果出现该属性,则每当音频结束时重新开始播放
muted muted 如果出现该属性,则音频输出为静音
preload auto、metadata、none 规定当网页加载时,音频是否默认被加载以及如何被加载
src URL 规定音频文件的 URL。

示例代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频title>
head>
<body>



<audio  src="../audios/我的作品1.mp4" controls >audio>
body>
html>

效果:
在HTML中如何设置音频和视频_第1张图片

2.设置视频:

使用<video>元素可以嵌入视频文件,例如MP4、WebM等格式的视频文件。可以通过设置src属性指定视频文件的路径或URL,通过设置controls属性显示播放器控件,如播放/暂停按钮、音量控制等。

音频和视频的属性有:

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放,必须与muted属性联合使用才有效果
controls controls 如果出现该属性,则向用户显示控件(比如播放/暂停按钮)
loop loop 如果出现该属性,则每当媒介文件完成播放后重新开始播放
muted muted 如果出现该属性,则音频输出为静音
preload auto、metadata、none 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
src URL 规定音频文件的 URL。
poster URL 规定视频正在下载时显示的图像,直到用户点击播放按钮
width pixels 设置视频播放器的宽度
height pixels 设置视频播放器的高度

当前,video 元素支持三种视频格式:

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

  • 支持的浏览器有:Firefox、Opera、Chrome

  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

  • 支持的浏览器有:IE9+、Chrome、Safari

  • 虽然目前应用较广,单有专利保护,是收费在

  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

  • 支持的浏览器有:Chrome、Opera、Safari

  • 专门为网页传播而设计在,清晰度高,压缩率也很高,并且开源免费,未来可能会成为主流。目前国外大在视频网站很多采用。

代码演示:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频title>
    <style type="text/css">
        .v1{
            width: 300px;
            height: 200px;
        }
    style>
head>
<body>

<video class="v1" src="../audios/我的作品1.mp4"  controls autoplay muted loop poster="../image/rose.jpg"  >video>
body>
html>

html代码效果如下:

以上就是音频和视频标签的使用了 制作不易 谢谢观看❀

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