vue如何使用原生video标签播放视频
作者：菜鸟茜
这篇文章主要介绍了vue如何使用原生video标签播放视频问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
使用原生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>彩蛋：
我在实现视频播放效果时，网上找了很多插件来用，按照指示方法一步一步来，但是可能是项目版本问题
我每次用的插件都没能实现视频播放效果，给我整得大无语
最后，只能选择用原生标签，没想到轻轻松松就可以视频播放了
枉费我之前绕了那么一大圈，有时候不得不承认，也许最简单的恰恰是最高效的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。