HTML代码教程
【HTML教程】HTML的source标签|html入门知识
时间: 2025-03-19 22:16:05 浏览次数:17
常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:【定义和用法】source标签用于为媒体元素(如 video、audio和 p

常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:


【定义和用法】

source标签用于为媒体元素(如 video、audio和 picture)指定多个媒体资源。

source标签允许您指定备用的视频/音频/图像文件,浏览器可以根据浏览器支持或视口宽度进行选择。浏览器将选择它支持的第一个 source。


【实例】

例子 1

这是一个带有两个音频源文件的音频播放器。浏览器将选择它支持的第一个 source:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。</audio>

例子 2

在 video中使用 source播放视频:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  您的浏览器不支持视频标签。</video>

例子 3

在 picture中使用 source来根据视口宽度定义不同的图像:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;"></picture>

【属性】

HTML的source标签|html入门知识

友情链接: 知识付费 | EDU指南导航 | 小程序开发 | 上网行为管理 | 小程序开发公司 | 企业财务服务 |
Copyright©2011 Guangzhou Longtengfei Network Technology Co., Ltd. 广州龙腾飞网络科技有限公司 粤ICP备18029205号 XML地图 | 系统开发专题地图