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

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

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

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

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

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

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

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

1.下载安装Movavi Video Editor软件

2.打开视频编辑软件Movavi Video Editor，在欢迎视窗中，请选择建立新专案。之后，点击加入媒体档案，再挑选你想要编辑的影片档。被读入的影片，将会自动出现在时间轴之内。

3.点击一下更多分页标签，然后选择平移和缩放。进入平移和缩放区块之后，选择放大。你可以先点击预览按钮，了解此特效的作用。确定要置入放大功能时，请于选择后点击新增。在预览视窗内，可藉由调整橘红色框框的大小，设定出你想要放大的区域。

当特效被成功添加进去之后，我们可以在时间轴之影像轨上，看到一个标记着起始点与结束点的箭头符号(或称为主要画面格)。移动箭头，可以改变放大特效的起始位置。你也能够伸展箭头的长度以调整特效的持续时间，方法是把主要画面格往右或往左拖曳。想编辑一个特定的主要画面格，可用滑鼠右键在它的上面点击，再从跳出的选单中选择编辑主要画面格。你还能够透过选单中的两种移除功能，删除某一个主要画面格，或者一口气丢弃全部的主要画面格。如果你希望恢复到原本的影像大小，请选择缩小，并且把这个选项以同样 *** 作放进时间轴内。如果有需要，使用者可在自己影片的任何片段，多次地使用放大与缩小特效。每次添加成功，你都会在时间轴上看到一个新的主要画面格。

html

<div class="camera-box">

          <img class="camera-bg" src="../../assets/camera_bg.png" alt="">

          <video id="cameraVideo" autoplay></video>

        </div>

css

.camera-box {

    width: 324px

    height: 471px

    overflow: hidden

    position: relative

    z-index: 2

    .camera-bg {

      width: 324px

      height: 471px

      position: relative

      z-index: 1

    }

    #cameraVideo {

      position: absolute

      left: 50%

      top: 0

      height: 471px

      transform: translateX(-50%)

    }

  }

不知道楼主想要的是不是这个效果

---