小白教程

 找回密码
 立即注册
查看: 6885|回复: 0

[好文分享] HTML网页设计:八、媒体元素

[复制链接]

176

主题

185

帖子

663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
663
发表于 2021-4-16 12:30:55 | 显示全部楼层 |阅读模式
媒体元素

HTML5新增了两个与媒体相关的标签<audio>、<video>,可以在网页中嵌入跨浏览器的音频和视频内容。

HTML系列文章目录1.音频

其基本格式如下:

  1. <audio  src="音频文件">在浏览器不支持时显示的文本</audio>
复制代码

其常用属性如下:


controls属性: 控制控件的显示,取值只能为controls。

autoplay属性: 布尔属性,自动播放。(可以不用书写属性值 )

muted属性:布尔属性,静音播放。(可以不用书写属性值 )

loop属性: 布尔属性,循环播放。(可以不用书写属性值 )

代码示例如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>音频元素学习</title>
  6. </head>
  7. <body>
  8.         <audio src="./audio/许嵩 - 最佳歌手 [mqms2].mp3" controls autoplay loop>最佳歌手-许嵩</audio>
  9. </body>
  10. </html>

复制代码

网页显示如下:

2.视频

其基本格式如下:

  1. <video src="视频文件">在浏览器不支持时显示的文本</video>
复制代码

常用属性与音频一致。

代码示例如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>视频元素学习</title>
  6. </head>
  7. <body>
  8.         <video src="./video/许嵩 - 雅俗共赏.mp4" controls autoplay muted width="400px" height="300px">雅俗共赏-许嵩</video>
  9. </body>
  10. </html>
复制代码

网页显示如下:

3.兼容性
  • 旧版本的浏览器不支持这两个元素。
  • 不同的浏览器支持的音、视频格式可能不一致。


本帖寻求最佳方案

,目前已有 0 个回复 我要奖励

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-11-24 15:38 , Processed in 0.022046 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表