1、嵌入视频和音频

1.1 在HTML5中嵌入视频(video)

语法格式:


在上面的语法格式中,src属性用于设置视频文件的路径,controls属性用于为视频提供播放控件,这两个属性是video元素的基本属性。并且
之间还可以插入文字,用于在不支持video元素的浏览器中显示。

  1. !DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>复仇者联盟</title>
  5. <meta charset="utf-8" />
  6. <style type="text/css">
  7. video{
  8. width:1000px;
  9. height:420px;
  10. margin:100px auto 0;
  11. display:block;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <video src="http://www.yyfun001.com/res/htmlclassics/full/video/avenger.mp4"
  17. controls="controls"
  18. poster="http://www.yyfun001.com/res/htmlclassics/full/images/video_bg.png">
  19. </video>
  20. </body>
  21. </html>

8.1 嵌入视频和音频 - 图1
在video元素中还可以添加其他属性,来进一步优化视频的播放效果。

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 “autoplay”,则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

1.2 在HTML5中嵌入音频(audio)

在HTML5中,audio标签用于定义播放音频文件的标准,它支持三种音频格式,分别为Ogg、MP3和wav。
语法格式:

<audio src="音频文件路劲"  controls="controls"></audio>

8.1 嵌入视频和音频 - 图2