vue如何使用原生video标签播放视频_Vue.js

使用原生video标签播放视频

页面效果如下图

如果想实现自动播放，需要加autoplay属性，

但是加了之后也可能出现无法自动播放的问题，还需要在加muted属性

muted 是静音属性添加了以后会自动播放但是没有声音

怎么取舍，就看你的需求如何平衡效果了，我个人觉得简简单单只加一个controls就好了。

vue相关代码

<!--原生video标签播放视频 2022-07-22 -->
<template>
    <div>
        <!-- muted 是静音属性 添加了以后 会自动播放 但是没有声音 -->
        <video width="600" height="450" autoplay muted controls :src="videourl"></video>
    </div>
</template>
<script>
export default {
    name: "",
    data() {
        return {
            videourl:
                "https://aliyun.oss.careyshop.cn/uploads/files/20191113/9bbf7ac9-a452-445b-8152-4443bc3505e8.mp4?type=aliyun",
        };
    },
    methods: {},
};
</script>
<style scoped>
</style>

彩蛋：

我在实现视频播放效果时，网上找了很多插件来用，按照指示方法一步一步来，但是可能是项目版本问题

我每次用的插件都没能实现视频播放效果，给我整得大无语

最后，只能选择用原生标签，没想到轻轻松松就可以视频播放了

枉费我之前绕了那么一大圈，有时候不得不承认，也许最简单的恰恰是最高效的。