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>彩蛋：
我在实现视频播放效果时，网上找了很多插件来用，按照指示方法一步一步来，但是可能是项目版本问题
我每次用的插件都没能实现视频播放效果，给我整得大无语
最后，只能选择用原生标签，没想到轻轻松松就可以视频播放了
枉费我之前绕了那么一大圈，有时候不得不承认，也许最简单的恰恰是最高效的。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了使用ElementUI写一个前端分页查询的实例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最近项目开发中遇到一个需求,需要实现宽度自动适应,所以下面这篇文章主要给大家介绍了关于Vue前端项目自适应布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue文件使用iconfont解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了浅谈vue中resetFields()使用注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
vue对storejs获取的数据进行处理时遇到的几种问题小结
这篇文章主要介绍了vue对storejs获取的数据进行处理时遇到的几种问题小结,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-03-03
这篇文章主要为大家介绍了Vue3之列表动画和状态动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法，使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下2018-11-11
本文主要介绍了在Vue中使用的一些常见混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器对代码进行加固,需要的可以参考下2023-12-12
这篇文章主要为大家详细介绍了vue实现移动端悬浮窗效果，vuejs实现div拖拽移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论