江门城乡建设局官方网站微信小程序建站

一、前言

页面加载一个视频并且自动播放，这个需求看起来非常简单，实现起来感觉也非常简单；但是，实际做起来还是有几处容易产生问题的地方卡住进度。本文讨论基于Vue3的项目在实现页面加载视频后的自动播放遇到的几个问题。

二、页面实现

页面实现非常简单。在页面上放置一个 video 元素然后调整其样式与布局并指定其相关属性即可。设置的属性中与播放相关的有：src、autopictureinpicture、disablepictureinpicture、autoplay、loop。代码如下：

<video :src="staticUrl('banner_video', { type: 'mp4' })"
    height="600"
    class="absolute"