视频自动播放的实现与问题解决

Posted 2023-03-13 仰望星空的代码

一、前言

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

二、页面实现

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

<video :src="staticUrl(\'banner_video\',  type: \'mp4\' )"
    
    class="absolute"