vue如何使用原生video标签播放视频
更新时间：2024年03月21日 17:25:55 作者：菜鸟茜
这篇文章主要介绍了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>彩蛋：
我在实现视频播放效果时，网上找了很多插件来用，按照指示方法一步一步来，但是可能是项目版本问题
我每次用的插件都没能实现视频播放效果，给我整得大无语
最后，只能选择用原生标签，没想到轻轻松松就可以视频播放了
枉费我之前绕了那么一大圈，有时候不得不承认，也许最简单的恰恰是最高效的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue路径分为绝对路径、相对路径、~+路径 及 别名+路径,在js中,引入带别名的文件路径,不需要在别名前加~ ,在css或者style中引入的需要在路径前面加~,路径以 ~ 开头,其后的部分将会被看作模块依赖,本文给大家介绍vue中引用文件路径问题,感兴趣的朋友一起看看吧2023-12-12
图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js，就针对Swiper进行封装，实现一个简单的图片轮播组件。感兴趣的朋友跟随脚本之家小编一起学习吧2018-02-02
Vue Element前端应用开发之Vuex中的API Store View的使用
这篇文章主要介绍了Vue Element前端应用开发之Vuex中的API Store View的使用，对Vue感兴趣的同学，可以参考下2021-05-05
在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,在这里给大家分享vue中ref的用法,感兴趣的朋友一起看看吧2023-11-11
vue eslint报错error "Component name "*****"
这篇文章主要给大家介绍了关于vue eslint报错error “Component name “*****“ should always be multi-word”的解决方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue模式history下在iis中配置流程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
浅谈vue中使用编辑器vue-quill-editor踩过的坑
这篇文章主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
今天小编就为大家分享一篇关于详解vue-router导航守卫，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
今天小编就为大家分享一篇vue输入节流,避免实时请求接口的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
很多朋友不明白在使用vue for时为什么要key，key的作用有哪些,在文中给大家详细介绍，需要的朋友可以参考下2019-07-07
最新评论