在div+css布局的网页中如何加入视频？

新建一个html文件，命名为test.html，用于讲解在div+css布局的网页中如何加入视频。

使用video标签来实现。在video标签内可以设置视频的大小、播放方式等，在source标签内设置视频的路径。

使用object标签来实现。在object标签内，同样可以设置视频的大小，data属性是视频的路径。

使用embed标签来实现。在embed标签内，通过src设置视频的路径。

video、object、embed三个标签视频的路径不仅支持相对路径，而且支持其他远程链接视频路径（如优酷、爱奇艺等）。

video、object、embed三个标签对不同的浏览器存在不同的兼容问题，在实际使用中，一般将三个标签整合写在一起，以达到最好的兼容性。

在浏览器打开test.html文件，查看播放视频的效果。

通常情况下，使用<video>标签插入视频。这是HTML5中新增加的标签，某些老版本浏览器可能不会兼容（例如ie7）。简单设置视频的样式和控件即可（下面是代码）。

对于早期浏览器，使用Adobe flashplayer插件加载视频吧。

<video src="url" autoplay="autoplay" loop="loop" controls="controls" width="XXXpx">

    请更新你的浏览器到最新版本

</video>

div+css布局如何插入视频的方法。

如下参考：

1.创建一个新的HTML文件test.html来解释div+CSS布局的基本过程。

2.在test.html文件中，设置正文的样式，将margin设置为0,padding设置为0，将text对齐到文本的中心。

3.在test.html文件中，为了便于解释，将所有div的高度设置为200px，内容的颜色设置为红色。

4.在test.html文件中，使用div创建页面的标题，使用margin:0auto设置divcenter，将其宽度设置为800px，背景颜色设置为灰色。

5.在test.html文件中，使用div创建页面的中间部分，使用margin:0auto设置divcenter，并将其宽度设置为800px。

6.在test.html文件中，在页面的中间创建两个div，将中间分成两个部分，每个部分的宽度为50%。左边部分使用float:left来设置左边的float，右边部分使用float:right来设置右边的float。

7.在test.html文件中，使用div创建页面的底部。使用clear:两者都清除上面div的浮动，以避免影响底部的布局。同时，使用margin:0auto来设置divcenter，宽度为800px，背景颜色为#000fff。

8.在浏览器中打开test.html文件，布局插入视频的问题就解决了。

---