vue中video在移动端和pc端的应用

前几天做的项目有个需求是在页面导航栏下面放一个banner，但是这个banner是一个mp4格式的视频，所以我查了一下video属性

video的属性

• controls：是否显示控件
• muted：是否静音
• autoplay:视频加载完成后马上播放
• loop：循环播放

  ---

  我的项目中banner的需求是不显示控件且视频要静音+循环播放。代码如下：

 

<template>
    <div>
        <div class='video'>
            <video
            :src='videoUrl'
            width='100%'
            muted
            autoplay="autoplay"
            loop="loop"
            ></video>
        </div>
    </div>
</template>

---

如果我们的需求是显示部分控件时，我们可以添加controls属性然后通过css控制控件的显示和隐藏

<script>
export default {
    methods: {
        //去掉...
        const el = document.querySelector('video');
        // disablePictureInPicture的