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

Posted 仰望星空的代码

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了视频自动播放的实现与问题解决相关的知识,希望对你有一定的参考价值。

一、前言

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

二、页面实现

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

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

以上是关于视频自动播放的实现与问题解决的主要内容,如果未能解决你的问题,请参考以下文章

vue.js实现audio播放amr格式音频

vue.js+video.js+videojs-contrib-hls支持PC端播放m3u8格式的视频

vue.js 视频播放

vuevideo基于vue.js的视频播放器组件

vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能

vue.js项目实战运用篇之抖音视频APP-第五节:视频播放列表组件功能