任务目标

利用HTML媒体元素实现在页面中嵌入视频，完成课程页面的播放区域

任务要求

（1）完成课程播放页面播放区域，效果如下图。

（2）使用h2标签制作标题内容。

（3）视频宽度900像素，高度400像素。

（4）增加视频封面。

（5）视频显示控制面板。

效果如下图：

任务实施

（1）在页面合适位置添加video元素。

（2）设定video元素的封面。

（3）设定video元素的控件为显示状态，宽度为900像素，高度为400像素。

教学微课

教学课件

经验分享

主流浏览器对音频视频格式的支持情况如上表：主流浏览器都支持视频和音频文件的方法如下：

1. 通过source引入的视频文件的格式至少包括WebM和MPEG4或Ogg和MPEG4。

2. 通过source引入的音频文件的格式至少包括WAV和MP3或Ogg和MP3。

Source标签用于给媒体指定多个可选择的文件地址，且只能在媒体标签没有使用src属性时使用。浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持，视频不存在等等)，如果不能播放，换下一个。此方法多用于兼容不同的浏览器。

能量贴士

“君子之言，信而有征”是说: 君子所说的话，可靠而且有证据。语出《左传·昭公·昭公八年》。