音视频中的source元素
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
石家庄科技工程职业学院软件技术专业群教学资源库
感谢聆听
THANK S 石家庄科技工程职业学院软件技术专业群教学资源库
什么是source元素
<source> 元素允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或 者编解码器的支持进行选择。source元素的语法格式为：
为视频元素提供备用文件
<video controls="controls"> <source src=“视频文件地址" type="媒体文件类型/格式"> <source src=“视频文件地址" type="媒体文件类型/格式"> ……
MP3
支持
Wav
视频格式
Firefox 4.0
Opera 10.6
支持
支持
支持 支持
支持 音频格式
支持
支持
支持
Chrome 6.0 支持 支持 支持
Safari 3.0 支持
支Байду номын сангаас 支持
支持 支持
注意: Internet Explorer 8 或者更早的IE版本不支持 source元素。
石家庄科技工程职业学院软件技术专业群教学资源库
嵌入视频和音频 音视频中的source元素
01
什么是source元素
什么是source元素
虽然HTML5支持Ogg、MPEG 4和WebM的视频格式以及Vorbis、MP3和 Wav的音频格式，但各浏览器对这些格式却不完全支持，具体如下表所示。
格式 Ogg MPEG 4 WebM
IE 9 支持
Ogg Vorbis
石家庄科技工程职业学院软件技术专业群教学资源库
用法示例 石家庄科技工程职业学院软件技术专业群教学资源库
02
总结
总结
了解source元素 以及用法和相关的属性
尝试配合video元素和audio 元素一起使用
石家庄科技工程职业学院软件技术专业群教学资源库
小任务
要求： 1、尝试为一个video元素添加多个文件源，然后到不同浏览器中测试兼容性如 ie，google，火狐等等。
</video>
source元素一般设置两个属性： src：用于指定媒体文件的URL地址。 type：指定媒体文件的类型。
石家庄科技工程职业学院软件技术专业群教学资源库
用法示例
音频中的source元素案例
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>Title</title> </head> <body> <audio controls="controls"> <source src="/i/horse.ogg" type="audio/ogg"> <source src="/i/horse.mp3" type="audio/mpeg"> </audio> </body> </html>
感谢聆听
THANK S 石家庄科技工程职业学院软件技术专业群教学资源库
什么是source元素
<source> 元素允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或 者编解码器的支持进行选择。source元素的语法格式为：
为视频元素提供备用文件
<video controls="controls"> <source src=“视频文件地址" type="媒体文件类型/格式"> <source src=“视频文件地址" type="媒体文件类型/格式"> ……
MP3
支持
Wav
视频格式
Firefox 4.0
Opera 10.6
支持
支持
支持 支持
支持 音频格式
支持
支持
支持
Chrome 6.0 支持 支持 支持
Safari 3.0 支持
支Байду номын сангаас 支持
支持 支持
注意: Internet Explorer 8 或者更早的IE版本不支持 source元素。
石家庄科技工程职业学院软件技术专业群教学资源库
嵌入视频和音频 音视频中的source元素
01
什么是source元素
什么是source元素
虽然HTML5支持Ogg、MPEG 4和WebM的视频格式以及Vorbis、MP3和 Wav的音频格式，但各浏览器对这些格式却不完全支持，具体如下表所示。
格式 Ogg MPEG 4 WebM
IE 9 支持
Ogg Vorbis
石家庄科技工程职业学院软件技术专业群教学资源库
用法示例 石家庄科技工程职业学院软件技术专业群教学资源库
02
总结
总结
了解source元素 以及用法和相关的属性
尝试配合video元素和audio 元素一起使用
石家庄科技工程职业学院软件技术专业群教学资源库
小任务
要求： 1、尝试为一个video元素添加多个文件源，然后到不同浏览器中测试兼容性如 ie，google，火狐等等。
</video>
source元素一般设置两个属性： src：用于指定媒体文件的URL地址。 type：指定媒体文件的类型。
石家庄科技工程职业学院软件技术专业群教学资源库
用法示例
音频中的source元素案例
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>Title</title> </head> <body> <audio controls="controls"> <source src="/i/horse.ogg" type="audio/ogg"> <source src="/i/horse.mp3" type="audio/mpeg"> </audio> </body> </html>