HTML--视频,图片,音频标签

最新推荐文章于 2024-07-20 18:10:58 发布

浮光跃金.free

最新推荐文章于 2024-07-20 18:10:58 发布

阅读量85

点赞数

文章标签： html 音视频 servlet

本文链接：https://blog.csdn.net/qq_52040402/article/details/127270663

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<body>
    <video src="./1.mp4" controls width="600" muted loop></video>
    <!-- controls---播放 -->
    <!-- autoplay---视频可以自动播放,谷歌浏览器配合muted实现静音播放 -->
</body>
</html> 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片标签</title>
</head>
<body>
    <!-- alt:替换文本，图片不显示时显示的文字 -->
    <!-- title:鼠标停在图片上显示的文字 -->
    <!-- width和height只需要给一个值，另一个等比例缩放，图片不会变形 -->
    <img src="1.jpg" alt="这是图" title="鼠标悬停时显示" width ="300">
    <img src="2.jpg" alt="">  
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<body>
    <!-- <audio src="./1.mp3" controls></audio>   -->
    <audio src="./2.mp3" controls autoplay loop></audio>
    <audio src="./3.mp3" controls loop></audio>
    <!-- <audio src="./4.mp3" controls></audio> -->
    <audio src="./5.mp3" controls loop></audio>
    <!-- ./可快速找到代码所在文件夹里的音频,图片文件 -->
    <!-- src---音频的路径 -->
    <!-- controls---显示播放的控件 -->
    <!-- autoplay---自动播放,部分浏览器不支持,功能有局限性,一般很少用 -->
    <!-- loop---循环播放 -->
    <!--qq音乐里MV转化的mp3文件不能播放,比如第一个和第四个  -->
    <!-- 音频标签目前支持:MP3(多用),Wav,Ogg -->
</body>
</html>