2021-6-3 工作记录--video自动播放+video-视频铺满全屏+带有动画的返回顶部效果+footer-校区展示+ajax 引入新页面

一、video自动播放

【注意：autoplay要与muted合用，不然自动播放无效】

1. video相关知识：src是 视频地址，controls是 视频的浏览器默认的控件, autoplay是 自动播放, muted是 静音；

二、video-视频铺满全屏

举例：【下面是vue写法】

1. video相关知识：src是 视频地址，poster是 视频的封面图；

2. vue相关知识 ：thisPage是 data里的数据

html

	<video v-if="thisPage.video"
          class="banner_video"
          id="html5player-video-banner"
          // 静音
          muted
          // 循环播放
          loop
          // 自动播放
          autoplay
          wmode="transparent"
          preload="auto"
          webkit-playsinline="true"
          playsinline=""
          x5-playsinline="true"
          x-webkit-airplay="true"
          x5-video-player-type="h5"
          x5-video-player-fullscreen=""
          x5-video-orientation="portraint"
          // 视频地址
          :src="thisPage.video"
          // 视频封面图
          :poster="thisPage.img">
    </video>

css

.banner_video {
	width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

三、带有动画的返回顶部效果

对应代码：

$('body,html').stop().animate({
      scrollTop: 0
});

四、footer-校区展示

1、PC端

代码：
HTML：

CSS：

2、移动端

代码：
HTML：

CSS：

五、ajax 引入新页面